Merge pull request #192 from chengpeiquan/typo

chore: update referenced documentation links

Author: chengpeiquan

docs/communication.md

@@ -42,7 +42,7 @@ Vuex|-|-|[点击查看](#vuex-new)
 为了方便阅读，下面的父组件统一叫 `Father.vue`，子组件统一叫 `Child.vue`。
 
 :::warning
-在 2.x，有的同学可能喜欢用 `$attrs / $listeners` 来进行通信，但该方案在 3.x 已经移除了，详见 [移除 $listeners](https://v3.cn.vuejs.org/guide/migration/listeners-removed.html)
+在 2.x，有的同学可能喜欢用 `$attrs / $listeners` 来进行通信，但该方案在 3.x 已经移除了，详见 [移除 $listeners](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html)
 :::
 
 ## props / emits
@@ -109,7 +109,7 @@ export default defineComponent({
 
 2. 如果是变量，或者其他类型如 `Number`、`Object` 等，则需要通过属性动态绑定的方式来添加，使用 `v-bind:` 或者 `:` 符号进行绑定
 
-3. 官方建议 prop 在 `template` 统一采用短横线分隔命名 （详见：[Prop 的大小写命名](https://v3.cn.vuejs.org/guide/component-props.html#prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%91%BD%E5%90%8D-camelcase-vs-kebab-case)），但实际上你采用驼峰也是可以正确拿到值，因为 Vue 的源码里有做转换
+<!-- 3. 官方建议 prop 在 `template` 统一采用短横线分隔命名 （详见：[Prop 的大小写命名](https://v3.cn.vuejs.org/guide/component-props.html#prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99%E5%91%BD%E5%90%8D-camelcase-vs-kebab-case)），但实际上你采用驼峰也是可以正确拿到值，因为 Vue 的源码里有做转换 -->
 :::
 
 ### 接收 props
@@ -367,7 +367,7 @@ Vue 3 的 `template` 还允许多个根节点，多个根节点的情况下，
 
 当然，前提依然是，`setup` 里要把 `attrs` 给 `return` 出来。
 
-查看详情：[多个根节点上的 Attribute 继承](https://v3.cn.vuejs.org/guide/component-attrs.html#%E5%A4%9A%E4%B8%AA%E6%A0%B9%E8%8A%82%E7%82%B9%E4%B8%8A%E7%9A%84-attribute-%E7%BB%A7%E6%89%BF)
+查看详情：[多个根节点上的 Attribute 继承](https://cn.vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)
 
 ### 绑定 emits{new}
 
@@ -434,7 +434,7 @@ export default defineComponent({
 
 2. 关于绑定的这个 `@` 符号，其实很好记忆，因为在 Vue 的 `template` 里，所有的事件绑定都是通过 `@`，比如 `@click`、`@change` 等等
 
-3. 同样的，在绑定 `emit` 时，也需要使用短横线写法（详见：[事件名](https://v3.cn.vuejs.org/guide/component-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D)）
+<!-- 3. 同样的，在绑定 `emit` 时，也需要使用短横线写法（详见：[事件名](https://v3.cn.vuejs.org/guide/component-custom-events.html#%E4%BA%8B%E4%BB%B6%E5%90%8D)） -->
 :::
 
 ### 接收 emits
@@ -1152,13 +1152,13 @@ export default new Vue;
 
 然后就可以在组件里引入 bus ，通过 `$emit` 去发起交流，通过 `$on` 去监听接收交流。
 
-旧版方案的完整案例代码可以查看官方的 [2.x 语法 - 事件 API](https://v3.cn.vuejs.org/guide/migration/events-api.html#_2-x-%E8%AF%AD%E6%B3%95)
+旧版方案的完整案例代码可以查看官方的 [2.x 语法 - 事件 API](https://v3-migration.vuejs.org/breaking-changes/events-api.html#_2-x-syntax)
 
 ### 了解 Vue 3{new}
 
 Vue 3 移除了 `$on` 、 `$off` 和 `$once` 这几个事件 API ，应用实例不再实现事件触发接口。
 
-根据官方文档在 [迁移策略 - 事件 API](https://v3.cn.vuejs.org/guide/migration/events-api.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5) 的推荐，我们可以用 [mitt](https://github.com/developit/mitt) 或者 [tiny-emitter](https://github.com/scottcorgan/tiny-emitter) 等第三方插件来实现 `EventBus` 。
+根据官方文档在 [迁移策略 - 事件 API](https://v3-migration.vuejs.org/breaking-changes/events-api.html#migration-strategy) 的推荐，我们可以用 [mitt](https://github.com/developit/mitt) 或者 [tiny-emitter](https://github.com/scottcorgan/tiny-emitter) 等第三方插件来实现 `EventBus` 。
 
 ### 创建 3.x 的 EventBus{new}
 

docs/component.md

@@ -411,11 +411,11 @@ Vue 3 是使用了 `Proxy` 的 `getter/setter` 来实现数据的响应性，这
 4. 使用 `Object.assign()` 等方法给对象添加新属性时，也不会触发更新
 5. 更多细节上的问题 …
 
-这也是为什么 Vue 2 要提供一个 [Vue.set API](https://cn.vuejs.org/v2/api/#Vue-set) 的原因，你可以在 [Vue 2 中更改检测的注意事项](https://v3.cn.vuejs.org/guide/change-detection.html) 了解更多说明。
+这也是为什么 Vue 2 要提供一个 [Vue.set API](https://v2.cn.vuejs.org/v2/api/#Vue-set) 的原因，你可以在 [Vue 2 中检测变化的注意事项](https://v2.cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9) 了解更多说明。
 
 而这些问题在 `Proxy` 都可以得到解决。
 
-可以在 [深入 Vue 3 的响应式原理](https://v3.cn.vuejs.org/guide/reactivity.html) 了解更多这部分的内容。
+可以在 [深入 Vue 3 的响应式原理](https://cn.vuejs.org/guide/extras/reactivity-in-depth.html) 了解更多这部分的内容。
 
 ### 用法上的变化
 
@@ -447,7 +447,7 @@ export default defineComponent({
 
 由于新的 API 非常多，但有些使用场景却不多，所以当前暂时只对常用的几个 API 做使用和踩坑说明，更多的 API 可以在官网查阅。
 
-先放上官方文档：[响应性 API | Vue.js](https://v3.cn.vuejs.org/api/reactivity-api)
+先放上官方文档：[响应性 API | Vue.js](https://cn.vuejs.org/api/reactivity-core.html)
 
 ## 响应式 API 之 ref{new}
 
@@ -1201,7 +1201,7 @@ export default {
 watch: { [key: string]: string | Function | Object | Array}
 ```
 
-联合类型过多，意味着用法复杂，下面是个很好的例子，虽然出自 [官网](https://v3.cn.vuejs.org/api/options-data.html#watch) 的用法介绍，但也反映出来对初学者不太友好，初次接触可能会觉得一头雾水：
+联合类型过多，意味着用法复杂，下面是个很好的例子，虽然出自 [官网](https://cn.vuejs.org/api/options-state.html#watch) 的用法介绍，但也反映出来对初学者不太友好，初次接触可能会觉得一头雾水：
 
 ```ts
 export default {
@@ -1755,7 +1755,7 @@ export default defineComponent({
 
 即使观察值变化了多次，值的中间变化将被跳过，不会传递给回调，这样做不仅可以提高性能，还有助于保证数据的一致性。
 
-更多关于 flush 的信息，请参阅 [副作用刷新时机](https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html#%E5%89%AF%E4%BD%9C%E7%94%A8%E5%88%B7%E6%96%B0%E6%97%B6%E6%9C%BA) 。
+更多关于 flush 的信息，请参阅 [回调的触发时机](https://cn.vuejs.org/guide/essentials/watchers.html#callback-flush-timing) 。
 
 #### 停止监听
 
@@ -2178,7 +2178,7 @@ export declare interface ComputedRef<T = any> extends WritableComputedRef<T> {
 
 1. 性能优势
 
-这一点在 [官网文档](https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95) 其实是有提到的：
+这一点在 [官网文档](https://cn.vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods) 其实是有提到的：
 
 >数据的计算是基于它们的响应依赖关系缓存的，只在相关响应式依赖发生改变时它们才会重新求值。
 
@@ -2272,7 +2272,7 @@ const foo = computed({
 
 #### 使用示范
 
-官网的 [例子](https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter) 是一个 Options API 的案例，这里我们改成 Composition API 的写法来演示：
+官网的 [例子](https://cn.vuejs.org/guide/essentials/computed.html#writable-computed) 是一个 Options API 的案例，这里我们改成 Composition API 的写法来演示：
 
 ```ts
 // 还是这2个数据源
@@ -2480,7 +2480,7 @@ export default defineComponent({
 </script>
 ```
 
-内置指令在使用上都非常的简单，可以在 [指令 - API 参考](https://v3.cn.vuejs.org/api/directives.html) 查询完整的指令列表和用法，在模板上使用时，请了解 [指令的模板语法](https://v3.cn.vuejs.org/guide/template-syntax.html#%E6%8C%87%E4%BB%A4) 。
+内置指令在使用上都非常的简单，可以在 [指令 - API 参考](https://cn.vuejs.org/api/built-in-directives.html) 查询完整的指令列表和用法，在模板上使用时，请了解 [指令的模板语法](https://cn.vuejs.org/guide/essentials/template-syntax.html#directives) 。
 
 :::tip
 其中有 2 个指令有别名：

docs/efficient.md

@@ -228,7 +228,7 @@ console.log(props.name);
 
 这是第一种方式：使用 JavaScript 原生构造函数进行类型规定。
 
-也就是跟我们平时定义 prop 类型时一样， Vue 会通过 `instanceof` 来进行 [类型检查](https://v3.cn.vuejs.org/guide/component-props.html#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5) 。
+也就是跟我们平时定义 prop 类型时一样， Vue 会通过 `instanceof` 来进行 [类型检查](https://cn.vuejs.org/guide/components/props.html#prop-validation) 。
 
 使用这种方法，需要通过一个 “对象” 入参来传递给 `defineProps` ，比如：
 

docs/links.md

@@ -8,10 +8,10 @@
 
 名称|官网文档
 :-:|:-:
-Vue 3|[2022 新版（预览）](https://staging-cn.vuejs.org/)，[2021 旧版](https://v3.cn.vuejs.org/)
-Vue Composition API|[2022 新版（预览）](https://staging-cn.vuejs.org/guide/extras/composition-api-faq.html)，[2021 旧版](https://v3.cn.vuejs.org/guide/composition-api-introduction.html)
-Vue Router|[与 Vue 3 匹配的 Router 4 的文档](https://router.vuejs.org/zh/)
-Vuex|[与 Vue 3 匹配的 Vuex 4 的文档](https://vuex.vuejs.org/zh/)
+Vue 3|[点击访问](https://cn.vuejs.org)
+Vue Composition API|[点击访问](https://cn.vuejs.org/guide/extras/composition-api-faq.html)
+Vue Router|[点击访问](https://router.vuejs.org/zh/)
+Vuex|[点击访问](https://vuex.vuejs.org/zh/)
 Pinia|[点击访问](https://pinia.vuejs.org/)
 Vue CLI|[点击访问](https://cli.vuejs.org/zh/)
 Vite|[点击访问](https://cn.vitejs.dev/)

docs/plugin.md

@@ -167,7 +167,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 ## Vue 专属插件
 
-这里特指 Vue 插件，通过 [Vue Plugins 设计规范](https://v3.cn.vuejs.org/guide/plugins.html) 开发出来的插件，在npm上通常是以 `vue-xxx` 这样带有 vue 关键字的格式命名（比如 [vue-baidu-analytics](https://github.com/chengpeiquan/vue-baidu-analytics)）。
+这里特指 Vue 插件，通过 [Vue Plugins 设计规范](https://cn.vuejs.org/guide/reusability/plugins.html) 开发出来的插件，在npm上通常是以 `vue-xxx` 这样带有 vue 关键字的格式命名（比如 [vue-baidu-analytics](https://github.com/chengpeiquan/vue-baidu-analytics)）。
 
 专属插件通常分为 **全局插件** 和 **单组件插件**，区别在于，全局版本是在 `main.ts` 引入后 `use`，而单组件版本则通常是作为一个组件在 `.vue` 文件里引入使用。
 
@@ -521,7 +521,7 @@ vue-demo
 
 #### 设计规范
 
-在设计本地 Vue 插件的时候，需要遵循 Vue 官方撰写的 [Vue Plugins 设计规范](https://v3.cn.vuejs.org/guide/plugins.html) ，并且做好必要的代码注释，除了标明插件 API 的 “用途、入参、返回值” 之外，最好在注释内补充一个 Example 或者 Tips 说明，功能丰富的插件最好直接写个 README 文档。
+在设计本地 Vue 插件的时候，需要遵循 Vue 官方撰写的 [Vue Plugins 设计规范](https://cn.vuejs.org/guide/reusability/plugins.html) ，并且做好必要的代码注释，除了标明插件 API 的 “用途、入参、返回值” 之外，最好在注释内补充一个 Example 或者 Tips 说明，功能丰富的插件最好直接写个 README 文档。
 
 #### 开发案例
 
@@ -712,7 +712,7 @@ const md5Msg: string = this.$md5('message');
 
 在 3.x ，已经不再支持 `prototype` 这样使用了，在 `main.ts` 里没有了 `Vue`，在组件的生命周期里也没有了 `this`。
 
-如果你依然想要挂载全局变量，需要通过全新的 [globalProperties](https://v3.cn.vuejs.org/api/application-config.html#globalproperties) 来实现，在使用该方式之前，可以把 `createApp` 定义为一个变量再执行挂载。
+如果你依然想要挂载全局变量，需要通过全新的 [globalProperties](https://cn.vuejs.org/api/application.html#app-config-globalproperties) 来实现，在使用该方式之前，可以把 `createApp` 定义为一个变量再执行挂载。
 
 ### 定义全局 API{new}
 
@@ -735,7 +735,7 @@ app.config.globalProperties.$log = (text: string): void => {
 app.mount('#app');
 ```
 
-### 使用全局 API{new}
+<!-- ### 使用全局 API{new}
 
 要在 Vue 组件里使用，因为 3.x 的 [生命周期](component.md#组件的生命周期-new) 无法取得实例的 `this` 来操作，需要通过全新的 [getCurrentInstance](https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance) 组件来进行处理。
 
@@ -771,7 +771,7 @@ export default defineComponent({
 需要注意的是， `getCurrentInstance` 只能在 [setup](component.md#全新的-setup-函数-new) 函数或者 Vue 3.0 的 [生命周期](component.md#组件的生命周期-new) 钩子中调用。
 
 如需在 `setup` 或生命周期钩子外使用，需要先在 `setup` 中调用 `const app = getCurrentInstance();` 获取实例变量，然后再通过 `app` 变量去使用。
-:::
+::: -->
 
 ### 全局 API 的替代方案