Vue3的生命周期大部分还是和Vue2一样，除了beforeCreate和created，这两个已经替换成setup了。在 Vue3 中，需要哪个生命周期钩子也可以用哪个，使用时需要用import从Vue中进行导入。
| 选项API | Hook(setup) | 作用 |
|---|---|---|
| beforeCreate | 不需要 | 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用 |
| created | 不需要 | 在实例创建完成后被立即同步调用 |
| beforeMount | onBeforeMount | 在挂载开始前被调用，DOM尚未加载 |
| mounted | onMounted | 在实例挂载完成后被调用,DOM加载已完成 |
| beforeUpdate | onBeforeUpdate | 页面DOM更新前触发 |
| updated | onUpdated | 页面DOM更新完触发 |
| beforeUnmount | onBeforeUnmount | 在卸载组件之前触发 |
| unmounted | onUnmounted | 卸载组件之后触发 |
| errorCaptured | onErrorCaptured | 在捕获一个来自后代组件的错误是被触发，在vue2.5后出现 |
| renderTracked | onRenderTracked | 跟踪虚拟 DOM 重新渲染时调用，状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，当组件第一次渲染时，就会跟踪，然后生成一个event对象 |
| renderTriggered | onRenderTriggered | 当虚拟 DOM 重新渲染被触发时调用，状态触发，不会跟踪每一个值，而是给出变化之的信息 |
这些钩子中都应该在setup中编写
官方API：https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html
对于mounted这类生命周期API与vue2中使用是类似的，不过在vue3中新增了onRenderTracked和onRenderTriggered。这两种只能在开发环境中调试使用。
实例：
{{ val }}
效果：
在实例中可以看到，最初渲染中，onBeforeMount > onRenderTracked > onMounted，然后修改val数值，页面重新渲染触发onRenderTriggered > onBeforeUpdate > onUpdated。
最后父组件中移除组件时，触发beforeUnmount > onUnmounted
provide提供/inject注入
当需要从父组件向子组件传递数据时，可以使用props，但是如果组件之间深度嵌套，深层的子组件需要父组件的部分内容，此时如果沿着props一层层传递，就会显得非常复杂（当然也可以使用）
在之前的《不习惯的Vue3起步一》 中曾经说到过attrs，这也可以用来获取祖先组件的属性，如果需要的数据不多，也可以使用这种方式。
通过provide和inject的结合，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这特性有两部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来使用这些数据。
首先准备一个父组件:
然后是子组件：
{{ msg }} 说：hello
效果： 在子组件中inject获取到了父组件数据，并且子组件中修改，父组件数据也会watch监听到修改
注意 ：在上面的例子中，想要产生响应式改变，传递的数据需要ref或者reactive包裹。此外在子组件中获取到的msg类型其实是unknown，所以需要将其通过as进行转换。
