Vue2与Vue3的生命周期
- 生命周期
- 前言介绍
- Vue2的生命周期钩子函数
- Vue3的生命周期钩子函数
-
生命周期
前言介绍
生命周期也称生命周期回调函数、生命周期函数、生命周期钩子。每个 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
中操作数据,因为即便操作数据,也不会再触发更新流程了。
![在这里插入图片描述](https://img-blog.csdnimg.cn/4cfecefef1ac4ed784540206a965a121.png#pic_center)
Vue2的生命周期钩子函数
Vue2中生命周期函数有:beforeCreate
、created
、beforeMount
、mounted
、beforeUpdate
、updated
、beforeDestory
、destoryed
。除了这些钩子函数之外,还有两个钩子函数 deactivated
和 activated
,不过只有被 <keep-alive>
包裹的的组件才有这两个生命周期。当组件被缓存(失活)时,会自动触发组件的 deactivated
生命周期函数;当组件被激活时,会自动触发组件的 activated
生命周期函数。当组件第一次被创建
的时候,既会执行 created
生命周期,也会执行 activated
生命周期;当组件被激活的时候,只会触发 activated
生命周期,不再触发 created
,因为组件没有被重新创建。
![在这里插入图片描述](https://img-blog.csdnimg.cn/3d90a189b7064e87b1be4f0739a47ddd.png)
其中,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 完成。这个钩子仅会在服务端渲染
中执行,可以用于执行一些仅存在于服务端的数据抓取过程。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)