Sync #85fc0ef2

.vitepress/config.ts

@@ -675,6 +675,11 @@ export default defineConfigWithTheme<ThemeConfig>({
         text: 'Português',
         repo: 'https://github.com/vuejs-translations/docs-pt'
       },
+      {
+        link: 'https://bn.vuejs.org',
+        text: 'বাংলা',
+        repo: 'https://github.com/vuejs-translations/docs-bn'
+      },
       {
         link: '/translations/',
         text: '帮助我们翻译！',

src/api/built-in-special-attributes.md

@@ -95,7 +95,7 @@
 
   当 `is` attribute 用于原生 HTML 元素时，它将被当作 [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)，其为原生 web 平台的特性。
 
-  但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 [DOM 模板解析注意事项](/guide/essentials/component-basics#dom-template-parsing-caveats)所述。你可以在 `is` attribute 的值中加上 `vue:` 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：
+  但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 [DOM 内模板解析注意事项](/guide/essentials/component-basics#in-dom-template-parsing-caveats)所述。你可以在 `is` attribute 的值中加上 `vue:` 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：
 
   ```vue-html
   <table>

src/api/render-function.md

@@ -199,7 +199,7 @@
   <div class="composition-api">
 
   ```js
-  const { h, resolveComponent } = Vue
+  import { h, resolveComponent } from 'vue'
 
   export default {
     setup() {
@@ -216,7 +216,7 @@
   <div class="options-api">
 
   ```js
-  const { h, resolveComponent } = Vue
+  import { h, resolveComponent } from 'vue'
 
   export default {
     render() {

src/api/sfc-script-setup.md

@@ -379,4 +379,5 @@ defineProps<{
 
 ## 限制 {#restrictions}
 
-由于模块执行语义的差异，`<script setup>` 中的代码依赖单文件组件的上下文。当将其移动到外部的 `.js` 或者 `.ts` 文件中的时候，对于开发者和工具来说都会感到混乱。因此，**`<script setup>`** 不能和 `src` attribute 一起使用。
+* 由于模块执行语义的差异，`<script setup>` 中的代码依赖单文件组件的上下文。当将其移动到外部的 `.js` 或者 `.ts` 文件中的时候，对于开发者和工具来说都会感到混乱。因此，**`<script setup>`** 不能和 `src` attribute 一起使用。
+* `<script setup>` 不支持 DOM 内根组件模板。([相关讨论](https://github.com/vuejs/core/issues/8391))

src/examples/ExampleRepl.vue

@@ -2,7 +2,7 @@
 import { Repl, ReplStore } from '@vue/repl'
 import '@vue/repl/style.css'
 import { data } from './examples.data'
-import { inject, watchEffect, version, Ref, onMounted, ref } from 'vue'
+import { inject, watchEffect, version, Ref, onMounted, ref, onUnmounted } from 'vue'
 import {
   resolveSFCExample,
   resolveNoBuildExample,
@@ -49,6 +49,10 @@ onMounted(() => {
   }
   set()
   window.addEventListener('resize', set)
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', set)
+  })
 })
 </script>
 

src/glossary/index.md

@@ -168,7 +168,7 @@ JavaScript 对某些结构使用了变量提升，例如 `var`、`import` 和函
 
 详见：
 - [指南 - 创建一个应用 - DOM 中的根组件模板](/guide/essentials/application.html#in-dom-root-component-template)
-- [指南 - 组件基础 - DOM 模板解析注意事项](/guide/essentials/component-basics.html#dom-template-parsing-caveats)
+- [指南 - 组件基础 - DOM 内模板解析注意事项](/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)
 - [渲染选项 - template](/api/options-rendering.html#template)
 
 ## 注入 (inject) {#inject}

src/guide/built-ins/keep-alive.md

@@ -47,7 +47,7 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 </div>
 
 :::tip
-在 [DOM 模板](/guide/essentials/component-basics#dom-template-parsing-caveats)中使用时，它应该被写为 `<keep-alive>`。
+在 [DOM 内模板](/guide/essentials/component-basics#in-dom-template-parsing-caveats)中使用时，它应该被写为 `<keep-alive>`。
 :::
 
 ## 包含/排除 {#include-exclude}

src/guide/built-ins/transition-group.md

@@ -21,7 +21,7 @@ import ListStagger from './transition-demos/ListStagger.vue'
 - CSS 过渡 class 会被应用在列表内的元素上，**而不是**容器元素上。
 
 :::tip
-当在 [DOM 模板](/guide/essentials/component-basics#dom-template-parsing-caveats)中使用时，组件名需要写为 `<transition-group>`。
+当在 [DOM 内模板](/guide/essentials/component-basics#in-dom-template-parsing-caveats)中使用时，组件名需要写为 `<transition-group>`。
 :::
 
 ## 进入 / 离开动画 {#enter-leave-transitions}

src/guide/components/props.md

@@ -144,7 +144,7 @@ export default {
 <span>{{ greetingMessage }}</span>
 ```
 
-虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 [DOM 模板](/guide/essentials/component-basics#dom-template-parsing-caveats)时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：
+虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 [DOM 内模板](/guide/essentials/component-basics#in-dom-template-parsing-caveats)时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：
 
 ```vue-html
 <MyComponent greeting-message="hello" />

src/guide/components/registration.md

@@ -136,6 +136,6 @@ export default {
 
 2. `<PascalCase />` 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。
 
-在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的，详情参见 [DOM 模板解析注意事项](/guide/essentials/component-basics#dom-template-parsing-caveats)。
+在单文件组件和内联字符串模板中，我们都推荐这样做。但是，PascalCase 的标签名在 DOM 模板中是不可用的，详情参见 [DOM 内模板解析注意事项](/guide/essentials/component-basics#in-dom-template-parsing-caveats)。
 
 为了方便，Vue 支持将模板中使用 kebab-case 的标签解析为使用 PascalCase 注册的组件。这意味着一个以 `MyComponent` 为名注册的组件，在模板中可以通过 `<MyComponent>` 或 `<my-component>` 引用。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。

src/guide/components/v-model.md

@@ -21,8 +21,8 @@
 
 ```vue-html
 <CustomInput
-  :modelValue="searchText"
-  @update:modelValue="newValue => searchText = newValue"
+  :model-value="searchText"
+  @update:model-value="newValue => searchText = newValue"
 />
 ```
 

src/guide/essentials/class-and-style.md

@@ -87,7 +87,13 @@ data() {
 <div :class="classObject"></div>
 ```
 
-这也会渲染出相同的结果。我们也可以绑定一个返回对象的[计算属性](./computed)。这是一个常见且很有用的技巧：
+这将渲染：
+
+```vue-html
+<div class="active"></div>
+```
+
+我们也可以绑定一个返回对象的[计算属性](./computed)。这是一个常见且很有用的技巧：
 
 <div class="composition-api">
 

src/guide/essentials/component-basics.md

@@ -174,7 +174,7 @@ import ButtonCounter from './ButtonCounter.vue'
 <button-counter></button-counter>
 ```
 
-请看 [DOM 模板解析注意事项](#dom-template-parsing-caveats)了解更多细节。
+请看 [DOM 内模板解析注意事项](#in-dom-template-parsing-caveats)了解更多细节。
 
 ## 传递 props {#passing-props}
 
@@ -541,7 +541,7 @@ Something bad happened.
 
 当使用 `<component :is="...">` 来在多个组件间作切换时，被切换掉的组件会被卸载。我们可以通过 [`<KeepAlive>` 组件](/guide/built-ins/keep-alive)强制被切换掉的组件仍然保持“存活”的状态。
 
-## DOM 模板解析注意事项 {#dom-template-parsing-caveats}
+## DOM 内模板解析注意事项 {#in-dom-template-parsing-caveats}
 
 如果你想在 DOM 中直接书写 Vue 模板，Vue 则必须从 DOM 中获取模板字符串。由于浏览器的原生 HTML 解析行为限制，有一些需要注意的事项。
 
@@ -583,7 +583,7 @@ const BlogPost = {
 
 这是因为 Vue 的模板解析器支持任意标签使用 `/>` 作为标签关闭的标志。
 
-然而在 DOM 模板中，我们必须显式地写出关闭标签：
+然而在 DOM 内模板中，我们必须显式地写出关闭标签：
 
 ```vue-html
 <my-component></my-component>
@@ -628,7 +628,7 @@ const BlogPost = {
 当使用在原生 HTML 元素上时，`is` 的值必须加上前缀 `vue:` 才可以被解析为一个 Vue 组件。这一点是必要的，为了避免和原生的[自定义内置元素](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)相混淆。
 :::
 
-以上就是你需要了解的关于 DOM 模板解析的所有注意事项，同时也是 Vue *基础*部分的所有内容。祝贺你！虽然还有很多需要学习的，但你可以先暂停一下，去用 Vue 做一些有趣的东西，或者研究一些[示例](/examples/)。
+以上就是你需要了解的关于 DOM 内模板解析的所有注意事项，同时也是 Vue *基础*部分的所有内容。祝贺你！虽然还有很多需要学习的，但你可以先暂停一下，去用 Vue 做一些有趣的东西，或者研究一些[示例](/examples/)。
 
 完成了本页的阅读后，回顾一下你刚才所学到的知识，如果还想知道更多细节，我们推荐你继续阅读关于组件的完整指引。
 

src/guide/essentials/forms.md

@@ -333,7 +333,7 @@ export default {
 
 ```vue-html
 <select v-model="selected">
-  <option v-for="option in options" :key="option.value" :value="option.value">
+  <option v-for="option in options" :value="option.value">
     {{ option.text }}
   </option>
 </select>

src/guide/reusability/composables.md

@@ -216,15 +216,16 @@ export function useFetch(url) {
   const data = ref(null)
   const error = ref(null)
 
-  watchEffect(() => {
-    // 在 fetch 之前重置状态
-    data.value = null
-    error.value = null
-    // toValue() 将可能的 ref 或 getter 解包
-    fetch(toValue(url))
+	const fetchData = (dt) => {
+			fetch(toValue(url))
       .then((res) => res.json())
       .then((json) => (data.value = json))
       .catch((err) => (error.value = err))
+	}
+
+  watchEffect(() => {
+    // reset state before fetching..
+    fetchData(url)
   })
 
   return { data, error }

src/guide/reusability/plugins.md

@@ -103,12 +103,6 @@ TypeScript 用户请参考：[扩展全局属性](/guide/typescript/options-api#
 // plugins/i18n.js
 export default {
   install: (app, options) => {
-    app.config.globalProperties.$translate = (key) => {
-      return key.split('.').reduce((o, i) => {
-        if (o) return o[i]
-      }, options)
-    }
-
     app.provide('i18n', options)
   }
 }

src/guide/typescript/composition-api.md

@@ -353,6 +353,8 @@ onMounted(() => {
 </template>
 ```
 
+可以通过类似于 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#technical_summary) 的页面来获取正确的 DOM 接口。
+
 注意为了严格的类型安全，有必要在访问 `el.value` 时使用可选链或类型守卫。这是因为直到组件被挂载前，这个 ref 的值都是初始的 `null`，并且在由于 `v-if` 的行为将引用的元素卸载时也可以被设置为 `null`。
 
 ## 为组件模板引用标注类型 {#typing-component-template-refs}

src/partners/partners.json

@@ -86,13 +86,25 @@
   {
     "name": "Curotec",
     "logo": "curotec.png",
-    "intro": "Our clients leverage our deep Vue.js & Nuxt.js expertise to develop better digital products and quickly expand their product development team velocity.",
+    "intro": "Work with a team that understands Vue.js inside and out. SaaS and enterprise teams leverage Curotec for best-in-class project execution and staff augmentation services focused on Vue.js.",
     "description": [
-      "Curotec approaches software development and IT support differently – address the business problems that our clients tell us they need to have solved with technology and with the right resources at the right time. That starts with understanding your challenges and pairing it with solutions and talent to get the outcome you’re driving for.",
-      "The result? Products that are responsive to your needs and primed for your growth, while ensuring your applications have a clean and straightforward end-user experience. And with well-developed and elegantly written code, it’s seamless for us to support and maintain as your needs evolve."
+      "Whether you need a firm to build your idea, support an existing codebase, or augment your front-end dev team, we’ve got you covered. SaaS and enterprise product teams turn to Curotec for a firm that can get the job done right.",
+      "We've got an all-shores model with team members in the US, LATAM, and South Asia. We'll create a flexible engagement for your needs aligned with your budget, timezone, and project goals. We also cover three main focus areas which include:",
+      "- Enterprise software development",
+      "- SaaS product development",
+      "- Headless / Jamstack website development",
+      "If you're looking for a Vue.js-focused front-end development team that writes great quality code and gets stuff done, click the contact button below and get in touch!"
     ],
     "region": ["North America", "Latin America"],
-    "proficiencies": ["Vue", "Nuxt", "Laravel", "Jamstack"],
+    "proficiencies": [
+      "Vue.js",
+      "Nuxt",
+      "Laravel",
+      "Headless",
+      "Node.js",
+      "Python",
+      "WordPress"
+    ],
     "website": {
       "text": "www.curotec.com",
       "url": "https://www.curotec.com/services/technologies/vuejs/"

src/style-guide/rules-strongly-recommended.md

@@ -337,7 +337,7 @@ components/
 
 ## Self-closing components {#self-closing-components}
 
-**Components with no content should be self-closing in [Single-File Components](/guide/scaling-up/sfc), string templates, and [JSX](/guide/extras/render-function#jsx-tsx) - but never in DOM templates.**
+**Components with no content should be self-closing in [Single-File Components](/guide/scaling-up/sfc), string templates, and [JSX](/guide/extras/render-function#jsx-tsx) - but never in in-DOM templates.**
 
 Components that self-close communicate that they not only have no content, but are **meant** to have no content. It's the difference between a blank page in a book and one labeled "This page intentionally left blank." Your code is also cleaner without the unnecessary closing tag.
 
@@ -375,15 +375,15 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
 
 ## Component name casing in templates {#component-name-casing-in-templates}
 
-**In most projects, component names should always be PascalCase in [Single-File Components](/guide/scaling-up/sfc) and string templates - but kebab-case in DOM templates.**
+**In most projects, component names should always be PascalCase in [Single-File Components](/guide/scaling-up/sfc) and string templates - but kebab-case in in-DOM templates.**
 
 PascalCase has a few advantages over kebab-case:
 
 - Editors can autocomplete component names in templates, because PascalCase is also used in JavaScript.
 - `<MyComponent>` is more visually distinct from a single-word HTML element than `<my-component>`, because there are two character differences (the two capitals), rather than just one (a hyphen).
 - If you use any non-Vue custom elements in your templates, such as a web component, PascalCase ensures that your Vue components remain distinctly visible.
 
-Unfortunately, due to HTML's case insensitivity, DOM templates must still use kebab-case.
+Unfortunately, due to HTML's case insensitivity, in-DOM templates must still use kebab-case.
 
 Also note that if you've already invested heavily in kebab-case, consistency with HTML conventions and being able to use the same casing across all your projects may be more important than the advantages listed above. In those cases, **using kebab-case everywhere is also acceptable.**
 
@@ -401,7 +401,7 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 ```
 
 ```vue-html
-<!-- In DOM templates -->
+<!-- In in-DOM templates -->
 <MyComponent></MyComponent>
 ```
 
@@ -416,7 +416,7 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
 ```
 
 ```vue-html
-<!-- In DOM templates -->
+<!-- In in-DOM templates -->
 <my-component></my-component>
 ```
 

src/translations/index.md

@@ -13,7 +13,8 @@ aside: false
 - [法语 / French](https://fr.vuejs.org) [[source](https://github.com/vuejs-translations/docs-fr)]
 - [韩语 / Korean](https://ko.vuejs.org) [[source](https://github.com/vuejs-translations/docs-ko)]
 - [葡萄牙语 / Portuguese](https://pt.vuejs.org) [[source](https://github.com/vuejs-translations/docs-pt)]
-
+- [孟加拉语 / Bengali](https://bn.vuejs.org) [[source](https://github.com/vuejs-translations/docs-bn)]
+
 <!-- ## 翻译中的语言 {#work-in-progress-languages} -->
 
 ## 启动新的翻译 {#starting-a-new-translation}