Vue生命周期
生命周期就是我们从开始创建vue实例到销毁的一个过程,这一过程就叫做生命周期。方便我们在vue的各个阶段对其属性进行操作
生命周期示例
-----new Vue 实例化Vue对象 开始初始化主要的生命周期函数
- beforeCreate 创建前 主要的生命周期函数初始化完成
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
//在beforeCreate前调用了三种方法,分别是初始化生命周期函数,初始化时间,
initLifecycle //查找当前组件的非抽象父组件进行vm.push。
initEvents(vm)// 定义$once、$off、$emit、$on函数
initRender(vm)//封装createElement函数,方便后期创建
- created 创建后 可对data和method属性进行操控
------开始编译Vue指令,同时在内存中渲染HTML结构(将模板与数据编译成浏览器可读的HTML),最终得到render函数
- beforeMount 将要渲染到页面上
beforeMount() {
console.log(document.getElementById("h3").innerHTML)
}
//此刻获取到的是真实DOM页面上 未经过渲染的模板字符串:{{msg}}
-
mounted 页面 挂载完成 可以对dom节点进行操作
vue mounted 只执行一次
《-------如果data有更新,循环执行以下阶段
- beforeUpdate 此刻data数据发生变化,vue的虚拟dom树被重新构建,利用diff算法进行新旧两个dom树对比之后重新渲染
- updated 页面已经完成更新,重新渲染虚拟DOM结构
//所有的数据变化都会调用 在更改data并且确定要对其进行渲染时才会调用updated
《 -------
- beforeDestroy vm即将被销毁,但此时还可以正常工作
-----正在销毁
- destroyed 销毁完成