详解vue生命周期

vue2 生命周期

Vue.js是一个流行的JavaScript框架，它使用了一套生命周期钩子函数来管理组件的创建、更新和销毁过程。以下是Vue组件的生命周期钩子函数：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项和数据尚未初始化。
created：在实例已经创建完成之后被调用。这个阶段完成了数据观测 (data observer)，属性和方法的运算，watch/event 事件回调等配置。
beforeMount：在挂载开始之前被调用。相关的render函数首次被调用。
mounted：在挂载完成后被调用。对于需要访问DOM元素的操作或者初始化第三方库的逻辑，常常会在这里进行。
beforeUpdate：在响应式数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。可以在此处进行更改数据的操作，但是避免引起无限循环的更新。
updated：在虚拟DOM重新渲染和打补丁之后被调用。组件已经更新完成，可以执行其他操作。
beforeUnmount（Vue 3中称为beforeUnmount）：在实例销毁之前被调用。在这里清理定时器、解绑自定义事件或其他副作用操作。
unmounted（Vue 3中称为unmounted）：在实例销毁后被调用。这个阶段组件已经完全销毁，所有的事件监听器和DOM元素都已被删除。

以上是Vue组件的常见生命周期钩子函数。可以根据需要使用这些钩子函数来管理组件的不同阶段的行为。请注意，在Vue 3中，生命周期钩子函数的名称发生了一些变化，但其功能大致相同。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

详解

init

initLifecycle/Event ，往vm上挂载各种属性
callHook: beforeCreated : 实例刚创建
initInjection/initState : 初始化注⼊和 data 响应性
created: 创建完成，属性已经绑定，但还未生成真实 dom
进行元素的挂载： $el / vm.$mount()
是否有 template : 解析成 render function
- *.vue 文件: vue-loader 会将 <template> 编译成 render function
beforeMount : 模板编译/挂载之前
执行 render function ，生成真实的 dom ，并替换到 dom tree 中
mounted : 组件已挂载

update

执行 diff 算法，比对改变是否需要触发 UI 更新
flushScheduleQueue
watcher.before : 触发 beforeUpdate 钩子 - watcher.run() : 执行 watcher 中的
notify ，通知所有依赖项更新UI
触发 updated 钩子: 组件已更新
actived / deactivated(keep-alive) : 不销毁，缓存，组件激活与失活

destroy

beforeDestroy : 销毁开始
销毁自身且递归销毁子组件以及事件监听
- remove() : 删除节点
- watcher.teardown() : 清空依赖
- vm.$off() : 解绑监听
  destroyed : 完成后触发钩子

上面是vue的声明周期的简单梳理，接下来我们直接以代码的形式来完成vue的初始化

new Vue({})
// 初始化Vue实例
function _init() {// 挂载属性initLifeCycle(vm)// 初始化事件系统，钩子函数等initEvent(vm)// 编译slot、vnodeinitRender(vm)// 触发钩子callHook(vm, 'beforeCreate')// 添加inject功能initInjection(vm)// 完成数据响应性 props/data/watch/computed/methodsinitState(vm)// 添加 provide 功能initProvide(vm)// 触发钩子callHook(vm, 'created')// 挂载节点if (vm.$options.el) {vm.$mount(vm.$options.el)}
} // 挂载节点实现
function mountComponent(vm) {// 获取 render functionif ( !this.options.render) {// template to render// Vue.compile = compileToFunctionslet { render } = compileToFunctions()this.options.render = render
}// 触发钩子
callHook( 'beforeMounte')// 初始化观察者// render 渲染 vdom，vdom = vm.render()// update: 根据 diff 出的 patchs 挂载成真实的 domvm._update(vdom)// 触发钩子callHook(vm, 'mounted')
}// 更新节点实现
funtion queueWatcher(watcher) {nextTick(flushScheduleQueue)
}// 清空队列
function flushScheduleQueue() {// 遍历队列中所有修改for(){// beforeUpdatewatcher.before()// 依赖局部更新节点watcher.update()callHook( 'updated')}
}// 销毁实例实现
Vue.prototype.$destory = function() {// 触发钩子callHook(vm, 'beforeDestory')// 自身及子节点remove()// 删除依赖watcher.teardown()// 删除监听vm.$off()// 触发钩子callHook(vm, 'destoryed')
}

扩展： Vue3中的生命周期

Vue3中的生命周期包含以下四个阶段和对应的钩子函数：

组件创建阶段：
- setup()：在此阶段开始创建组件，发生在beforeCreate和created钩子函数之前。这个钩子函数主要用来创建组件的data和method。
组件挂载阶段：
- onBeforeMount()：在组件挂载到节点上之前执行的函数。
- onMounted()：组件挂载完成后执行的函数。
数据更新阶段：
- onBeforeUpdate()：在组件更新之前执行的函数。
- onUpdated()：在组件更新完成之后执行的函数。
组件销毁阶段：
- onBeforeUnmount()：在组件卸载之前执行的函数。
- onUnmounted()：在组件卸载完成后执行的函数。