建设部网站官网办事厅,莱芜招聘的网站,江苏南京建设厅网站,网站做淘宝客vue2 生命周期
Vue.js是一个流行的JavaScript框架#xff0c;它使用了一套生命周期钩子函数来管理组件的创建、更新和销毁过程。以下是Vue组件的生命周期钩子函数#xff1a; beforeCreate#xff1a;在实例初始化之后#xff0c;数据观测 (data observer) 和 event/watch…vue2 生命周期
Vue.js是一个流行的JavaScript框架它使用了一套生命周期钩子函数来管理组件的创建、更新和销毁过程。以下是Vue组件的生命周期钩子函数 beforeCreate在实例初始化之后数据观测 (data observer) 和 event/watcher 事件配置之前被调用。此时组件的选项和数据尚未初始化。 created在实例已经创建完成之后被调用。这个阶段完成了数据观测 (data observer)属性和方法的运算watch/event 事件回调等配置。 beforeMount在挂载开始之前被调用。相关的render函数首次被调用。 mounted在挂载完成后被调用。对于需要访问DOM元素的操作或者初始化第三方库的逻辑常常会在这里进行。 beforeUpdate在响应式数据更新之前被调用发生在虚拟DOM重新渲染和打补丁之前。可以在此处进行更改数据的操作但是避免引起无限循环的更新。 updated在虚拟DOM重新渲染和打补丁之后被调用。组件已经更新完成可以执行其他操作。 beforeUnmountVue 3中称为beforeUnmount在实例销毁之前被调用。在这里清理定时器、解绑自定义事件或其他副作用操作。 unmountedVue 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 更新flushScheduleQueuewatcher.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 渲染 vdomvdom 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()在组件卸载完成后执行的函数。
此外如果一个Vue3组件被包含在 keep-alive 中它会有两个额外的生命周期钩子函数
onActivated()当被包含的组件被激活时执行。onDeactivated()当从A组件切换到B组件A组件消失时执行。
以上就是Vue3组件的生命周期及其各阶段的钩子函数。利用好这些钩子函数可以在适当的时机执行特定的操作如数据初始化、节点操作、UI更新等。
