生命周期

前言介绍

??生命周期也称生命周期回调函数、生命周期函数、生命周期钩子。每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听、编译模板、挂载实例到 DOM，以及在数据改变时更新 DOM。在这些过程中，它会运行被称为 生命周期钩子 的函数，让开发者有机会在特定阶段运行自己的代码。这些函数的名字不可更改，但函数的具体内容可以根据具体需求而定。其中，生命周期函数中的 this指向 是 vm 或者 组件实例对象（指向调用它的Vue实例）。
??Vue2中生命周期函数有：beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeDestory 、destoryed、errorCaptured ；Vue3中生命周期函数有：beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeUnmount 、unmounted 、renderTracked 、renderTriggered 、serverPrefetch 。
??Vue2与Vue3生命周期函数的区别：可以看出，Vue3的生命周期的钩子函数与Vue2相比，将 beforeDestory、destoryed 修改为 beforeUnmount、unmounted ，并增加了 renderTracked、renderTriggered、errorCaptured 三个钩子函数。
销毁后自定义事件会失效，但原生DOM事件依然有效；另外一般不会在 beforeDestroy 中操作数据，因为即便操作数据，也不会再触发更新流程了。
在这里插入图片描述

Vue2的生命周期钩子函数

??Vue2中生命周期函数有：beforeCreate 、created 、beforeMount 、mounted 、beforeUpdate 、updated 、beforeDestory 、destoryed 。除了这些钩子函数之外，还有两个钩子函数 deactivated 和 activated ，不过只有被 <keep-alive> 包裹的的组件才有这两个生命周期。当组件被缓存（失活）时，会自动触发组件的 deactivated 生命周期函数；当组件被激活时，会自动触发组件的 activated 生命周期函数。当组件第一次被创建的时候，既会执行 created 生命周期，也会执行 activated 生命周期；当组件被激活的时候，只会触发 activated 生命周期，不再触发 created ，因为组件没有被重新创建。
在这里插入图片描述

其中，errorCaptured 生命周期函数是在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

注意：可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

错误传播规则：

默认情况下，如果全局的 config.errorHandler 被定义，所有的错误仍会发送它，因此这些错误仍然会向单一的分析服务的地方进行汇报。
如果一个组件的 inheritance chain (继承链) 或 parent chain (父链) 中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。
如果此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler。
一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

Vue3的生命周期钩子函数

??Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：beforeDestroy改名为 beforeUnmount，destroyed改名为 unmounted。另外，Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount：注册一个钩子，在组件被挂载之前被调用。这个钩子在服务器端渲染期间不会被调用。
mounted=======>onMounted：注册一个回调函数，在组件挂载完成后执行。这个钩子在服务器端渲染期间不会被调用。
beforeUpdate===>onBeforeUpdate：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子在服务器端渲染期间不会被调用。
updated =======>onUpdated：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。这个钩子在服务器端渲染期间不会被调用。注意：不要在此钩子中更改组件的状态（可以在onErrorCaptured中进行更改），这可能会导致无限的更新循环！
beforeUnmount ==>onBeforeUnmount：注册一个钩子，在组件实例被卸载之前调用。这个钩子在服务器端渲染期间不会被调用。
unmounted =====>onUnmounted：注册一个回调函数，在组件实例被卸载之后调用。这个钩子在服务器端渲染期间不会被调用。
errorCaptured ==>onErrorCaptured：注册一个钩子。
renderTracked ==>onRenderTracked
renderTriggered =>onRenderTriggered
serverPrefetch =>onServerPrefetch
activated =====>onActivated：这个钩子在服务器端渲染期间不会被调用。
deactivated ===>onDeactivated：这个钩子在服务器端渲染期间不会被调用。
??其中 onErrorCaptured 钩子可以从这些来源中捕获到错误：组件渲染、事件处理器、生命周期钩子、setup() 函数、侦听器、自定义指令钩子、过渡钩子。其它使用及错误传递规则与 Vue2 相同。

setup函数

??setup函数里面设置生命周期函数，是为了使组合式API的功能和选项式API一样完整。setup函数内部的钩子函数基本和选项式一样，只是没有beforeCreate、created，并且在函数前面加上on（组合式）。另外，因为setup函数会在beforeCreate之前就执行，即组件创建之前执行，所以所有beforeCreate、created的代码应该写在setup中。由上面的Vue3生命周期图示可知，在setup函数执行时，此时并未创建vm实例，所以在setup中避免使用this（this是undefined），也不能访问data、computed、methods，而setup可以接收到两个参数（第一个参数是props，值为对象，包含组件外部传递过来，且组件内部声明接收了的属性；第二个参数是context，context是一个对象，在其中可以拿到 attrs、slots、emit），通过这两个参数则可以访问props、attrs、slots、emit。在setup函数中写的数据以及方法均要返回出去才能使用。
??如果既在setup函数中使用了生命周期钩子函数，又在setup函数外面写了配置项生命周期（选项式API），那么在执行顺序上setup函数中的生命周期要早于对应的配置项的生命周期，如：onBeforeMount -> beforeMount -> onMounted -> mounted。

Vue3新增生命周期

??其中 onRenderTracked() 钩子是注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。它可以告诉我们哪个操作跟踪了组件以及该操作的目标对象和键，它跟踪虚拟 DOM 重新渲染时调用，可以看作收集依赖时触发，就是渲染依赖了那些数据，当数据变化时会触发，接收一个 event对象 ，状态跟踪在一开始渲染页面时就会触发，触发顺序：beforeMounted -> renderTracked -> mounted；页面更新时也会触发，触发顺序：beforeUpdate -> renderTracked -> updated。
??其中 onRenderTriggered() 钩子钩子是注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。和 renderTracked 类似，接收 event对象 ，此事件告诉我们是什么操作触发了重新渲染，以及该操作的目标对象和键。操作页面的显示的数据引起虚拟DOM重渲染就会触发，触发顺序：renderTriggered -> beforeUpdate。
??其中 onServerPrefetch() 钩子是注册一个异步函数，在组件实例在服务器上被渲染之前调用。如果这个钩子返回了一个 Promise，服务端渲染会在渲染该组件前等待该 Promise 完成。这个钩子仅会在服务端渲染中执行，可以用于执行一些仅存在于服务端的数据抓取过程。