Vue2.x
你不能使用箭头函数来定义一个生命周期方法！！因为this啥也找不到还报错！
beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前执行，此时组件实例还未创建，通常用于插件开发中执行一些初始化任务。
created
组件实例已经创建完成，并配置了数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。但是还没有挂载DOM，此阶段可用于异步数据获取。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
组件实例被挂载后完成，DOM已创建，此阶段可用于访问数据和DOM元素，但不会保证所有子组件都一起被挂载。如果您希望整个视图都完成渲染可以在 mounted 内部使用 vm.$nextTick
beforeUpdate
数据更新前调用，可用于获取更新前的状态。可在这里 手动移除已经添加的事件监听器。
updated
此函数执行的时候。DOM已经更新。
updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用，此时可以取消定时器和订阅事件。
除了beforeCreate、created外其他生命周期钩子函数在服务器端渲染期间均不被调用。
官网大图镇楼：
生命周期图示
Vue3
因为钩子函数们依赖内部的全局状态来定位当前的组件实例，所以他们只能在 setup() 期间注册及使用。
import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
- 与2.x的对比（两个被替换了，其余的就是改了个名）
- beforeCreate、created由setup()代替。
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
- 新增了2个方便调试 debug 的回调钩子（为了不误导请前往官方文档）
Vue2.x + Composition API 与 Vue3.x
-
在 Vue2.x + Composition API的环境下，进行两者钩子函数混用时：Vue2.x 的回调函数会相对先执行（例：mounted 先于 onMounted执行）
-
在 Vue3.x 环境下，为了兼容 Vue2.x 的语法，全部旧的生命周期函数获得保留（除了 beforeDestroy 和 destroyed），生命周期混合使用时：Vue3.x 的生命周期相对优先于 Vue2.x 的执行（例：onMounted 先于 mounted 执行）。
当生命周期混用时，主版本的钩子函数就会相对优先执行。为了产生不必要的麻烦就不要混用啦。
网友评论