持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第24天，点击查看活动详情juejin.cn/post/714765…

最近几天一直都在学习vue3，给大家就分享这些知识，如果哪里有偏差，欢迎小伙伴提出。

vue3生命周期

1. setup（）{}该钩子会在所有钩子函数之前进行调用，它和在viewModel中的
2. beforeCreate（）{} 在组件实例初始化完成之后立即调用。会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。
3. created（）{}在组件实例处理完所有与状态相关的选项后调用。
4. beforeMounted（）{}在组件被挂载之前调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。在它里面更改数据不会更新，也是最后一次更改状态的机会。
5. mounted（）{}组件挂载到页面上之后调用，这时已经生成了真实的DOM。
6. beforeUpdate（）{}在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
7. updated（）{}组件更新之后调用。
8. beforeUnmount（）{}在一个组件实例被卸载之前调用。
9. unmounted（）{}在一个组件实例被卸载之后调用。
10. errorCaptured(){}在捕获了后代组件传递的错误时调用。
11. enderTracked(){}在一个响应式依赖被组件的渲染作用追踪后调用。
12. activated（）{}若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。也就是在缓存组件被激活时调用。 13.deactivated（）{}若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。 这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

provide和inject传值

作用：祖先组件向更深层组件传值。

具体用法如下：

• （1）在祖先组件的viewModel中添加provide属性，如果它的值为一个对象，那么传过去的就是一个静态的值。
• （2）如果想把父组件的数据传过去，provide要写成一个函数，并要有返回值，返回值是个对象，键值就是父组件中的数据。

传：

收：

在后代组件中的viewModel添加inject属性，值为数组，数组成员是provide返回的键名，在模板里直接使用数组元素名称就可以访问数据，在viewModel通过this访问。

watch侦听器

（1）flush:"post"属性

• 作用：回调执行的时机，添加了该属性，该侦听函数里的DOM是依赖发生改变之后的最新DOM。
• 默认情况下侦听属性里的DOM是侦听函数执行之前的DOM，也就是依赖没发生变化之前的DOM。

它默认是在DOM更新之前执行，如果想在这里访问更新之后就访问最新DOM，就可以给它添加flush属性，值为'post'

（2）immediate：true属性

作用：组件渲染时立即执行一次回调。

如何在组件渲染时就让watch监听依赖？

答：给要监听的数据，添加immediate属性，值为true

this.$watch动态侦听属性

1. 作用：允许动态的创建一个侦听器。
2. 用法：可以在符合某些条件的时候，通过this.$watch创建侦听器

通过unwatch()取消侦听