Vue3 作为当前 Vue 的项目大势，开发新项目当中使用得很频繁。记录一 Vue3 的使用总结笔记，温故知新。

常用的 Composition API | 其它 Composition API | 新的组件 | 其他

常用的 Composition API

拉开序幕的 setup

理解：

• Vue3.0 中一个新的配置项，值为一个函数。

• setup 是所有 Composition API（组合 API）“ 表演的舞台 ”。

• 组件中所用到的：数据、方法等等，均要配置在 setup 中。

setup 函数的两种返回值：

• 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

• 若返回一个渲染函数：则可以自定义渲染内容。

注意点：

• 尽量不要与 Vue2.x 配置混用 Vue2.x 配置（data、methos、computed…）中可以访问到 setup 中的属性、方法。 但在 setup 中不能访问到 Vue2.x 配置（data、methos、computed…）。
• 如果有重名, setup 优先。
• setup 不能是一个 async 函数，因为返回值不再是对象, 而是 promise, 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）

####　 reactive 对比 ref

从定义数据角度对比

• ref 用来定义：基本类型数据。
• reactive 用来定义：对象（或数组）类型数据。 备注：ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过 reactive 转为代理对象。

从原理角度对比

• ref 通过类中的的 getter 与 setter 来实现响应式（数据劫持）。
• reactive 通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作源对象内部的数据。

从使用角度对比

• ref 定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
• reactive 定义的数据：操作数据与读取数据：均不需要.value。

setup 的两个注意点

setup 执行的时机

在 beforeCreate 之前执行一次，this 是 undefined。

setup 的参数

将 setup 接收的两个参数(props, context)

• props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
• context：上下文对象 ：
  • attrs: 值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性, 相当于 this.$attrs。
  • slots: 收到的插槽内容, 相当于 this.$slots。
  • emit: 分发自定义事件的函数, 相当于 this.$emit。

计算属性与监视

computed 函数

与 Vue2.x 中 computed 配置功能一致

watch 函数

Vue2.x 中 watch 配置功能一致

两个小“坑”：

• 监视 reactive 定义的响应式数据时：oldValue 无法正确获取、强制开启了深度监视（deep 配置失效）。
• 监视 reactive 定义的响应式数据中某个属性时：deep 配置有效。

watchEffect 函数

• watch 的套路是：既要指明监视的属性，也要指明监视的回调。
• watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect 有点像 computed：

• 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
• 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。

生命周期

Vue3.0 中可以继续使用 Vue2.x 中的生命周期钩子，但有有两个被更名：

• beforeDestroy 改名为 beforeUnmount
• destroyed 改名为 unmounted

可以直接已配置项的形式使用生命周期钩子，也可以使用组合式 API 的形式使用，尽量统一

一般来说，组合式 API 里的钩子会比配置项的钩子先执行，组合式 API 的钩子名字有变化

自定义 hook 函数（重点）

什么是 hook？—— 本质是一个函数，把 setup 函数中使用的 Composition API 进行了封装。

类似于 vue2.x 中的 mixin。

自定义 hook 的优势: 复用代码, 让 setup 中的逻辑更清楚易懂。

toRef

• 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

其它 Composition API

shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

什么时候使用?

• 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

readonly 与 shallowReadonly

readonly: 让一个响应式数据变为只读的（深只读）。

shallowReadonly：让一个响应式数据变为只读的（浅只读）。

应用场景:

不希望数据被修改时。

toRaw 与 markRaw

toRaw

作用：

将一个由 reactive 生成的响应式对象转为普通对象。

使用场景：

用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

markRaw

作用：

标记一个对象，使其永远不会再成为响应式对象。

应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类库等。 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

作用：

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

provide 与 inject

作用：

实现祖与后代组件间通信

套路：

父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

响应式数据的判断

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

新的组件

Fragment

• 在 Vue2 中: 组件必须有一个根标签
• 在 Vue3 中: 组件可以没有根标签, 内部会将多个标签包含在一个 Fragment 虚拟元素中
• 好处: 减少标签层级, 减小内存占用

Teleport

什么是 Teleport？—— Teleport 是一种能够将我们的组件 html 结构移动到指定位置的技术。 用法：body 的弹窗

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

• 异步引入组件
• 使用 Suspense 包裹组件，并配置好 default 与 fallback 两个插槽，它将在内存中渲染默认插槽的同时展示后备插槽内容。如果在渲染时遇到异步依赖项 (异步组件和具有 async setup() 的组件)，它将等到所有异步依赖项解析完成时再显示默认插槽。 – default：就是组件要显示的内容 – fallback：就是组件没加载完全的“备胎”

用法：骨架屏

其他

全局 API 的转移

Vue 2.x 有许多全局 API 和配置。 例如：注册全局组件、注册全局指令等。

• Vue.component()
• Vue.directive(）

Vue3.0 中对这些 API 做出了调整：

• 将全局的 API，即：Vue.xxx 调整到应用实例（app）上
• 2.x 全局 API（Vue）————-3.x 实例 API (app) Vue.config.xxxx —————- app.config.xxxx Vue.config.productionTip —- 移除 Vue.component ——————- app.component Vue.directive ——————- app.directive Vue.mixin ———————— app.mixin Vue.use ————————— app.use Vue.prototype —————— app.config.globalProperties

其他改变

① data 选项应始终被声明为一个函数

② 过渡类名的更改

Vue2.x 写法

• .v-enter,.v-leave-to {}
• .v-leave,.v-enter-to {}

Vue3.x 写法

• .v-enter-from,.v-leave-to {}
• .v-leave-from,.v-enter-to {}

③ 移除 keyCode 作为 v-on 的修饰符，同时也不再支持 config.keyCodes

④ 移除 v-on.native 修饰符

// 父组件中绑定事件
<my-component
v-on:close="handleComponentEvent"
v-on:click="handleNativeClickEvent"
/>

// 子组件中声明自定义事件
<script>
export default {
emits: ['close']
}
</script>

⑤ 移除过滤器（filter）

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。