学习vue3系列生命周期
vue3 增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：
与 2.x 版本生命周期相对应的组合式 API
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
import { onMounted, onUpdated, onUnmounted } from 'vue'const MyComponent = {setup() {onMounted(() => {console.log('mounted!')})onUpdated(() => {console.log('updated!')})onUnmounted(() => {console.log('unmounted!')})},
}
这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。
生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。
依赖注入
Vue 组合式 API对依赖注入提供了 provide 和 inject 函数，功能类似 vue2 options API 的 provide/inject。provide 和 inject 函数都只能在当前活动组件实例的 setup() 中调用。
在上游组件提供 provide ：
setup () {provide('Theme', 'dark')}
在下游组件使用 ：
<template><div> hello </div>
</template><script>
import { ref, inject } from 'vue'
export default {setup () {const theme = inject('Theme', 'light' /* 默认值 */)console.log(theme, '依赖注入')}
}
</script>
工具函数
vue3 还有一些其它API，这个工具函数如下：
- readonly 把对象变成只读的。
- isRef 检查一个值是否为一个 ref 对象。
- isProxy 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。
- isReactive检查一个对象是否是由 reactive 创建的响应式代理。
- isReadonly检查一个对象是否是由 readonly 创建的只读代理。
- unref如果参数是一个 ref 则返回它的 value，否则返回参数本身
当我们在组件间提取并复用逻辑时，组合式 API 是十分灵活的。一个组合函数仅依赖它的参数和 Vue 全局导出的 API，而不是依赖其微妙的 this 上下文。你可以将组件内的任何一段逻辑导出为函数以复用它。你甚至可以通过导出整个 setup 函数达到和 extends 等价的效果。