diff --git a/docs/communication.md b/docs/communication.md index 16adef0e..401fbb01 100644 --- a/docs/communication.md +++ b/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 的源码里有做转换 + ::: ### 接收 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)) + ::: ### 接收 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} diff --git a/docs/component.md b/docs/component.md index 7b5a6883..41e004dc 100644 --- a/docs/component.md +++ b/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 extends WritableComputedRef { 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({ ``` -内置指令在使用上都非常的简单,可以在 [指令 - 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 个指令有别名: diff --git a/docs/efficient.md b/docs/efficient.md index 5073d66d..24a4f4e8 100644 --- a/docs/efficient.md +++ b/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` ,比如: diff --git a/docs/links.md b/docs/links.md index ca194f99..f61ca902 100644 --- a/docs/links.md +++ b/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/) diff --git a/docs/plugin.md b/docs/plugin.md index 2847845c..47167756 100644 --- a/docs/plugin.md +++ b/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 的替代方案