Vue3亲身体验---功能详解（四）lifecyclehook

lifecyclehooklifecycle和lifecyclehook是两个不同的概念lifecycle：一个Vue实例的生命周期包括各个组件从创建->运行(Rendering,updating)->一个销毁的过程，每个阶段都会自动执行很多默认的函数。生命周期钩子：除了默认的函数，有时候你需要在不同的生命周期阶段执行一个自定义的函数，这就需要一个钩子来指定函数在哪个生命周期阶段执行。这个函数作为一个钩子链是也称为生命周期钩子，也称为生命周期函数。生命周期图：如下，中间有填充颜色的过程是生命周期，两边没有填充颜色的过程是生命周期函数：我的草，为什么图片居中，这是个破网站！！生命周期创建阶段：初始化声明周期、初始化事件；初始化反应变量数据。渲染阶段：在组件中渲染模板，在内存中生成DOM；将DOM放在网页的内存中。更新阶段：接受更新请求，更新内存中渲染的DOM；将新呈现的DOM放在网页上。销毁阶段：接受销毁请求，销毁内存中的DOM；从网页中销毁DOM。生命周期函数（vue2不同于vue3）beforeCreate===>vue3:setup()初始化创建阶段的声明循环，在初始化事件之后执行（此时data和props中的数据还没有生成和不能使用）。created===>vue3:setup()在创建阶段初始化响应变量数据后执行（此时data和props中的数据已经可用）。beforeMount===>vue3:onBeforeMount在渲染阶段的内存渲染生成DOM后执行。mounted===>vue3:onMounted在渲染阶段的DOM放置到网页后执行。beforeUpdate===>vue3:onBeforeUpdate在update阶段内存中生成DOM后执行。updated===>vue3:onUpdatedupdate阶段的DOM放到网页后执行。beforeDistroy===>vue3:BeforeUnmount内存销毁DOM后执行销毁阶段。distroyed===>vue3:Unmounted销毁阶段网页DOM被销毁后执行。几个特殊的生命周期函数（vue3）激活（activated）如果组件实例是缓存树的一部分，则在组件插入DOM时调用。Deactivated（停用）如果组件实例是缓存树的一部分，当组件从DOM中移除时调用。ServerPrefetch（服务器预取）在组件实例渲染到服务器之前被调用。如果这个钩子返回一个Promise，服务器端渲染将等待Promise完成后再渲染组件。这个钩子只会在服务端渲染时执行，可以用来执行一些只存在于服务端的数据获取过程。ErrorCaptured（错误捕获）不懂RenderTracked（渲染跟踪）不懂RenderTriggered（渲染触发）不懂生命周期函数的用法使用前需要先导入，如下：import{onMounted,onUpdated,onUnmounted}from'vue'life周期函数的参数是箭头的回调函数，如下：onMounted(()=>{console.log('onMounted')});应用场景：见生命周期函数应用场景监控函数watchEffect在生命周期执行中默认在初始化响应变量数据时第一次执行（在onBeforeMount渲染阶段DOM渲染到内存之前），之后每次执行更新依赖项的时间（在onBeforeUpdate更新阶段在内存中生成DOM之前）。如果第二个参数加上{flush:'post'}，会在响应式变量数据初始化时第一次执行（onBeforeMount渲染阶段DOM渲染到内存后），之后每次依赖被更新（在onBeforeUpdate更新阶段内存中生成DOM后）执行一次。