Merge pull request #22 from zhousg/translation-zh

translation: update dead links

Author: Jinjiang

.vitepress/locales/zh.js

@@ -154,7 +154,7 @@ export default {
             link: '/zh/breaking-changes/transition-group'
           },
           {
-            text: 'VNode 声明周期事件',
+            text: 'VNode 生命周期事件',
             link: '/zh/breaking-changes/vnode-lifecycle-events'
           },
           { text: 'Watch 侦听数组', link: '/zh/breaking-changes/watch' }

.vitepress/theme/MigrationBadges.vue

@@ -1,10 +1,20 @@
 <script>
+import { useData } from 'vitepress'
 const validBadges = {
   new: 'new',
   breaking: 'breaking',
   removed: 'removed',
   updated: 'updated'
 }
+const localeBadges = {
+  'en-US': validBadges,
+  'zh-CN': {
+    new: '新增',
+    breaking: '非兼容',
+    removed: '移除',
+    updated: '更新'
+  }
+}
 
 export default {
   props: {
@@ -16,10 +26,9 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      validBadges
-    }
+  setup () {
+    const { site } = useData()
+    return { validBadges: localeBadges[site.value.lang] ?? validBadges }
   }
 }
 </script>

src/zh/breaking-changes/async-components.md

@@ -58,7 +58,7 @@ const asyncModalWithOptions = defineAsyncComponent({
 ```
 
 ::: tip 注意
-Vue Router 支持一个类似的机制来异步加载路由组件，也就是俗称的*懒加载*。尽管类似，但是这个功能和 Vue 所支持的异步组件是不同的。当用 Vue Router 配置路由组件时，你**不**应该使用 `defineAsyncComponent`。你可以在 Vue Router 文档的[懒加载路由](https://next.router.vuejs.org/guide/advanced/lazy-loading.html)章节阅读更多相关内容。
+Vue Router 支持一个类似的机制来异步加载路由组件，也就是俗称的*懒加载*。尽管类似，但是这个功能和 Vue 所支持的异步组件是不同的。当用 Vue Router 配置路由组件时，你**不**应该使用 `defineAsyncComponent`。你可以在 Vue Router 文档的[懒加载路由](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)章节阅读更多相关内容。
 :::
 
 对 2.x 所做的另一个更改是，`component` 选项现在被重命名为 `loader`，以明确组件定义不能直接被提供。
@@ -94,5 +94,5 @@ const asyncComponent = defineAsyncComponent(
 
 有关异步组件用法的详细信息，请参阅：
 
-- [指南：动态 & 异步组件](/guide/component-dynamic-async.html#在动态组件上使用-keep-alive)
-- [迁移构建开关：`COMPONENT_ASYNC`](migration-build.html#兼容性配置)
+- [指南：异步组件](https://cn.vuejs.org/guide/components/async.html)
+- [迁移构建开关：`COMPONENT_ASYNC`](../migration-build.html#兼容性配置)

src/zh/breaking-changes/attribute-coercion.md

@@ -140,7 +140,7 @@ badges:
   </tbody>
 </table>
 
-[迁移构建开关：](migration-build.html#兼容性配置)
+[迁移构建开关：](../migration-build.html#兼容性配置)
 
 - `ATTR_FALSE_VALUE`
 - `ATTR_ENUMERATED_COERCION`

src/zh/breaking-changes/attrs-includes-class-style.md

@@ -60,7 +60,7 @@ export default {
 
 在使用了 `inheritAttrs: false` 的组件中，请确保样式仍然符合预期。如果你之前依赖了 `class` 和 `style` 的特殊行为，那么一些视觉效果可能会遭到破坏，因为这些 attribute 现在可能被应用到了另一个元素中。
 
-[迁移构建开关：`INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#兼容性配置)
+[迁移构建开关：`INSTANCE_ATTRS_CLASS_STYLE`](../migration-build.html#兼容性配置)
 
 ## 参考
 

src/zh/breaking-changes/children.md

@@ -37,8 +37,8 @@ export default {
 
 ## 3.x 更新
 
-在 3.x 中，`$children` property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 [$refs](/guide/component-template-refs.html#模板引用)。
+在 3.x 中，`$children` property 已被移除，且不再支持。如果你需要访问子组件实例，我们建议使用 [模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html#template-refs)。
 
 ## 迁移策略
 
-[迁移构建开关：`INSTANCE_CHILDREN`](migration-build.html#兼容性配置)
+[迁移构建开关：`INSTANCE_CHILDREN`](../migration-build.html#兼容性配置)

src/zh/breaking-changes/custom-directives.md

@@ -103,9 +103,9 @@ mounted(el, binding, vnode) {
 ```
 
 :::warning
-有了[片段](/guide/migration/fragments.html#概览)的支持，组件可能会有多个根节点。当被应用于多根组件时，自定义指令将被忽略，并将抛出警告。
+有了[片段](../new/fragments.html#概览)的支持，组件可能会有多个根节点。当被应用于多根组件时，自定义指令将被忽略，并将抛出警告。
 :::
 
 ## 迁移策略
 
-[迁移构建开关：`CUSTOM_DIR`](migration-build.html#兼容性配置)
+[迁移构建开关：`CUSTOM_DIR`](../migration-build.html#兼容性配置)

src/zh/breaking-changes/custom-elements-interop.md

@@ -96,7 +96,7 @@ Vue.config.ignoredElements = ['plastic-button']
     document.createElement('button', { is: 'plastic-button' })
     ```
 
-[迁移构建开关：`COMPILER_IS_ON_ELEMENT`](migration-build.html#兼容性配置)
+[迁移构建开关：`COMPILER_IS_ON_ELEMENT`](../migration-build.html#兼容性配置)
 
 ## 使用 `vue:` 前缀来解决 DOM 内模板解析问题
 
@@ -128,3 +128,7 @@ Vue.config.ignoredElements = ['plastic-button']
 - 将 `config.ignoredElements` 替换为 `vue-loader` 的 `compilerOptions` (使用构建步骤) 或 `app.config.compilerOptions.isCustomElement` (使用动态模板编译)
 
 - 将所有非针对 `<component>` 标签的 `is` 用法更改为 `<component is="...">` (对于 SFC 模板) 或为其添加 `vue:` 前缀 (对于 DOM 内模板)。
+
+## 参考
+
+- [迁移指南 - Vue 与 Web Components](https://cn.vuejs.org/guide/extras/web-components.html)

src/zh/breaking-changes/data-option.md

@@ -111,7 +111,7 @@ const CompA = {
 }
 ```
 
-[迁移构建开关：`OPTIONS_DATA_FN`](migration-build.html#兼容性配置)
+[迁移构建开关：`OPTIONS_DATA_FN`](../migration-build.html#兼容性配置)
 
 ## 迁移策略
 
@@ -122,7 +122,7 @@ const CompA = {
 
 对于依赖 mixin 的深度合并行为的用户，我们建议重构代码以完全避免这种依赖，因为 mixin 的深度合并非常隐式，这让代码逻辑更难理解和调试。
 
-[迁移构建开关：](migration-build.html#兼容性配置)
+[迁移构建开关：](../migration-build.html#兼容性配置)
 
 - `OPTIONS_DATA_FN`
 - `OPTIONS_DATA_MERGE`

src/zh/breaking-changes/emits-option.md

@@ -49,7 +49,7 @@ Vue 3 现在提供一个 `emits` 选项，和现有的 `props` 选项类似。
 
 该选项也可以接收一个对象，该对象允许开发者定义传入事件参数的验证器，和 `props` 定义里的验证器类似。
 
-更多信息请参阅[这部分特性的 API 文档](../../api/options-data.md#emits)。
+更多信息请参阅[这部分特性的 API 文档](https://cn.vuejs.org/api/options-state.html#emits)。
 
 ## 迁移策略
 

src/zh/breaking-changes/events-api.md

@@ -58,7 +58,7 @@ export default {
 
 ## 迁移策略
 
-[迁移构建开关：`INSTANCE_EVENT_EMITTER`](migration-build.html#兼容性配置)
+[迁移构建开关：`INSTANCE_EVENT_EMITTER`](../migration-build.html#兼容性配置)
 
 在 Vue 3 中，借助这些 API 从一个组件内部监听其自身触发的事件已经不再可能了。该用例没有办法迁移。
 
@@ -97,8 +97,8 @@ export default {
 
 在绝大多数情况下，不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案，但从长期来看，它维护起来总是令人头疼。根据具体情况来看，有多种事件总线的替代方案：
 
-* [Prop](/guide/component-basics.html#passing-data-to-child-components-with-props) 和[事件](/guide/component-basics.html#listening-to-child-components-events)应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
-* [Provide 和 inject](/guide/component-provide-inject.html) 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
-* `provide`/`inject` 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”，即 prop 需要通过许多层级的组件传递下去，但这些组件本身可能并不需要那些 prop。
+* Props 和 事件 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
+* `provide` / `inject` 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
+* `provide` / `inject` 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”，即 prop 需要通过许多层级的组件传递下去，但这些组件本身可能并不需要那些 prop。
 * Prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop，那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容，因此 prop 可以被直接传递而不需要中间组件的参与。
-* [全局状态管理](/guide/state-management.html)，比如 [Vuex](https://next.vuex.vuejs.org/zh/index.html)。
+* [全局状态管理](https://cn.vuejs.org/guide/scaling-up/state-management.html)，比如 [Pinia](https://pinia.vuejs.org/zh/index.html)。

src/zh/breaking-changes/filters.md

@@ -73,7 +73,7 @@ badges:
 
 我们建议用计算属性或方法代替过滤器，而不是使用过滤器。
 
-[迁移构建开关：](migration-build.html#兼容性配置)
+[迁移构建开关：](../migration-build.html#兼容性配置)
 
 - `FILTERS`
 - `COMPILER_FILTERS`
@@ -82,7 +82,7 @@ badges:
 
 如果在应用中全局注册了过滤器，那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。
 
-取而代之的是，你可以通过[全局属性](../../api/application-config.html#globalproperties)以让它能够被所有组件使用到：
+取而代之的是，你可以通过[全局属性](https://cn.vuejs.org/api/application.html#app-config-globalproperties)以让它能够被所有组件使用到：
 
 ```js
 // main.js

src/zh/breaking-changes/functional-components.md

@@ -115,6 +115,6 @@ export default {
 
 有关新的函数式组件的用法和对渲染函数的更改的详细信息，请参考：
 
-- [迁移：渲染函数](/guide/migration/render-function-api.html)
-- [指南：渲染函数](/guide/render-function.html)
-- [迁移构建开关：`COMPONENT_FUNCTIONAL`](migration-build.html#兼容性配置)
+- [迁移：渲染函数](./render-function-api.html)
+- [指南：渲染函数](https://cn.vuejs.org/guide/extras/render-function.html#render-functions-jsx)
+- [迁移构建开关：`COMPONENT_FUNCTIONAL`](../migration-build.html#兼容性配置)

src/zh/breaking-changes/global-api-treeshaking.md

@@ -17,7 +17,7 @@ Vue.nextTick(() => {
 })
 ```
 
-或者，如果你曾经对涉及[异步组件](/guide/component-dynamic-async.html)的应用进行单元测试，那么你很可能编写过以下内容：
+或者，如果你曾经对涉及[异步组件](https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html)的应用进行单元测试，那么你很可能编写过以下内容：
 
 ```js
 import { shallowMount } from '@vue/test-utils'
@@ -110,7 +110,7 @@ export function render() {
 有了全局 tree-shaking 后，用户只需为他们实际使用到的功能“买单”。更棒的是，因为可选特性不会增加未使用它们的应用的打包产物大小，以后在追加核心功能时，即使对框架大小有所顾虑，它也将不再那么重要了。
 
 :::warning 重要
-以上仅适用于 [ES 模块构建版本](/guide/installation.html#对不同构建版本的解释)，用于支持 tree-shaking 的打包工具——UMD 构建仍然包括所有特性，并暴露 Vue 全局变量上的所有内容 (编译器将生成适当的输出以从该全局变量上使用 API，而不是导入)。
+以上仅适用于 [ES 模块构建版本](https://github.com/vuejs/core/tree/master/packages/vue#which-dist-file-to-use)，用于支持 tree-shaking 的打包工具——UMD 构建仍然包括所有特性，并暴露 Vue 全局变量上的所有内容 (编译器将生成适当的输出以从该全局变量上使用 API，而不是导入)。
 :::
 
 ## 插件中的用法

src/zh/breaking-changes/global-api.md

@@ -65,7 +65,7 @@ import { createApp } from 'vue'
 const app = createApp({})
 ```
 
-如果你使用的是 Vue 的 [CDN](/guide/installation.html#cdn) 构建版本，那么 `createApp` 将通过全局的 `Vue` 对象暴露。
+如果你使用的是 Vue 的 [CDN](./introduction.html#cdn) 构建版本，那么 `createApp` 将通过全局的 `Vue` 对象暴露。
 
 ```js
 const { createApp } = Vue
@@ -87,15 +87,15 @@ const app = createApp({})
 | Vue.prototype              | app.config.globalProperties ([见下方](#vue-prototype-替换为-config-globalproperties))                        |
 | Vue.extend                 | *移除* ([见下方](#vue-extend-移除))                                                                 |
 
-所有其他不全局改变行为的全局 API 现在都是具名导出，文档见[全局 API Treeshaking](/guide/migration/global-api-treeshaking.html)。
+所有其他不全局改变行为的全局 API 现在都是具名导出，文档见[全局 API Treeshaking](./global-api-treeshaking.html)。
 
 ### `config.productionTip` 移除
 
 在 Vue 3.x 中，“使用生产版本”提示仅在使用“dev + full build”(包含运行时编译器并有警告的构建版本) 时才会显示。
 
 对于 ES 模块构建版本，由于它们是与打包器一起使用的，而且在大多数情况下，CLI 或脚手架已经正确地配置了生产环境，所以本提示将不再出现。
 
-[迁移构建开关：`CONFIG_PRODUCTION_TIP`](migration-build.html#兼容性配置)
+[迁移构建开关：`CONFIG_PRODUCTION_TIP`](../migration-build.html#兼容性配置)
 
 ### `config.ignoredElements` 替换为 `config.isCustomElement`
 
@@ -118,13 +118,13 @@ app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
 - 这将是 Vue CLI 配置中新的顶层选项。
 :::
 
-[迁移构建开关：`CONFIG_IGNORED_ELEMENTS`](migration-build.html#兼容性配置)
+[迁移构建开关：`CONFIG_IGNORED_ELEMENTS`](../migration-build.html#兼容性配置)
 
 ### `Vue.prototype` 替换为 `config.globalProperties`
 
 在 Vue 2 中， `Vue.prototype` 通常用于添加所有组件都能访问的 property。
 
-在 Vue 3 中与之对应的是 [`config.globalProperties`](/api/application-config.html#globalproperties)。这些 property 将被复制到应用中，作为实例化组件的一部分。
+在 Vue 3 中与之对应的是 [`config.globalProperties`](https://cn.vuejs.org/api/application-config.html#globalproperties)。这些 property 将被复制到应用中，作为实例化组件的一部分。
 
 ```js
 // 之前 - Vue 2
@@ -139,7 +139,7 @@ app.config.globalProperties.$http = () => {}
 
 使用 `provide` ([稍后](#provide-inject)会讨论) 时，也应考虑作为 `globalProperties` 的替代品。
 
-[迁移构建开关：`GLOBAL_PROTOTYPE`](migration-build.html#兼容性配置)
+[迁移构建开关：`GLOBAL_PROTOTYPE`](../migration-build.html#兼容性配置)
 
 ### `Vue.extend` 移除
 
@@ -186,9 +186,9 @@ Vue.createApp(Profile).mount('#mount-point')
 
 #### 组件继承
 
-在 Vue 3 中，我们强烈建议使用 [组合式 API](/api/composition-api.html) 来替代继承与 mixin。如果因为某种原因仍然需要使用组件继承，你可以使用 [`extends` 选项](/api/options-composition.html#extends) 来代替 `Vue.extend`。
+在 Vue 3 中，我们强烈建议使用 [组合式 API](https://cn.vuejs.org/api/composition-api.html) 来替代继承与 mixin。如果因为某种原因仍然需要使用组件继承，你可以使用 [`extends` 选项](https://cn.vuejs.org/api/options-composition.html#extends) 来代替 `Vue.extend`。
 
-[迁移构建开关：`GLOBAL_EXTEND`](migration-build.html#兼容性配置)
+[迁移构建开关：`GLOBAL_EXTEND`](../migration-build.html#兼容性配置)
 
 ### 插件开发者须知
 
@@ -243,7 +243,7 @@ app.directive('focus', {
 app.mount('#app')
 ```
 
-[迁移构建开关：`GLOBAL_MOUNT`](migration-build.html#兼容性配置)
+[迁移构建开关：`GLOBAL_MOUNT`](../migration-build.html#兼容性配置)
 
 ## Provide / Inject
 

src/zh/breaking-changes/index.md

@@ -4,4 +4,68 @@
 
 虽然 Vue 看起来已经发生了很多变化，但您所了解和喜爱的 Vue 的很多东西仍然没有变；但我们希望尽可能完整的为每个记录的更改提供详细的解释和示例。
 
-<!-- TODO -->
+
+## 详情说明
+
+### 全局API
+
+- [全局 Vue API 更改为使用应用程序实例](./global-api.html)
+- [全局和内部 API 都经过了重构，现已支持 TreeShaking （摇树优化）](./global-api-treeshaking.html)
+
+
+
+### 模板指令
+
+- [`v-model` 指令在组件上的使用已经被重新设计，替换掉了  `v-bind.sync`](./v-model.html)
+- [在`<template v-for>`  和没有 `v-for` 的节点身上使用 `key` 发生了变化 ](./key-attribute.html)
+- [`v-if` and `v-for` 在同一个元素身上使用时的优先级发生了变化](./v-if-v-for.html)
+- [`v-bind="object"` 现在是顺序敏感的](./v-bind.html)
+- [`v-on:event.native` 事件修饰符已经被移除](./v-on-native-modifier-removed)
+
+
+
+### 组件
+
+- [函数式组件只能通过纯函数进行创建](./functional-components.html)
+- [单文件组件 (SFC) `<template>` 标签的  `functional` attribute 和函数式组件的 `functional` 选项已被移除](./functional-components.html)
+- [异步组件现在需要通过 `defineAsyncComponent` 方法进行创建](./async-components.html)
+- [组件事件现在应该使用 `emits` 选项进行声明](./emits-option.html)
+
+### 渲染函数
+
+- [渲染函数 API 更改](./render-function-api.html)
+- [`$scopedSlots` property 已移除，所有插槽都通过 `$slots` 作为函数暴露](./slots-unification.html)
+- [`$listeners` 被移除或整合到 `$attrs`](./listeners-removed)
+- [`$attrs` 现在包含 `class` 和 `style` attribute](./attrs-includes-class-style.md)
+
+### 自定义元素
+
+- [自定义元素检测现在在模板编译时执行](./custom-elements-interop.html)
+- [特殊的 `is` attribute 的使用被严格限制在被保留的 `<component>` 标签中](./custom-elements-interop.html#定制内置元素)
+
+### 其他小改变
+
+- `destroyed` 生命周期选项被重命名为 `unmounted`
+- `beforeDestroy` 生命周期选项被重命名为 `beforeUnmount`
+- [`default` prop 工厂函数不再可以访问 `this` 上下文](./props-default-this.html)
+- [自定义指令的 API 已更改为与组件生命周期一致，且 `binding.expression` 已移除](./custom-directives.html)
+- [`data` 选项应始终被声明为一个函数](./data-option.html)
+- [来自 mixin 的 `data` 选项现在为浅合并](./data-option.html#mixin-合并行为变更)
+- [Attribute 强制策略已更改](./attribute-coercion.html)
+- [一些过渡的 class 被重命名](./transition.html)
+- [`<TransitionGroup>` 不再默认渲染包裹元素](./transition-group.html)
+- [当侦听一个数组时，只有当数组被替换时，回调才会触发，如果需要在变更时触发，则必须指定 `deep` 选项](./watch.html)
+- 没有特殊指令的标记 (`v-if/else-if/else`、`v-for` 或 `v-slot`) 的 `<template>` 现在被视为普通元素，并将渲染为原生的 `<template>` 元素，而不是渲染其内部内容。
+- [已挂载的应用不会取代它所挂载的元素](./mount-changes.html)
+- [生命周期的 `hook:` 事件前缀改为 `vue:`](./vnode-lifecycle-events.html)
+
+### 被移除的 API
+
+- [`keyCode` 作为 `v-on` 修饰符的支持](./keycode-modifiers.html)
+- [$on、$off 和 $once 实例方法](./events-api.html)
+- [过滤器 (filter)](./filters.html)
+- [内联模板 attribute](./inline-template-attribute.html)
+- [`$children` 实例 property](./children.html)
+- [`propsData` 选项](./props-data.html)
+- `$destroy` 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
+- 全局函数 `set` 和 `delete` 以及实例方法 `$set` 和 `$delete`。基于代理的变化检测已经不再需要它们了。