生命周期钩子 = 生命周期函数 = 生命周期事件
实例创建期间的生命周期函数
// 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其他都未创建。
// 如果要调用 methods 中的方法, 或者操作 data 中的数据, 最早只能在 created 生命周期函数中操作
new Vue({
el: "#app",
// 在这个生命周期函数执行的时候,data和methods中的数据都还没有初始化
beforeCreate () {}, // 表示实例完全被创建之前, 会执行这个函数
// 在这个生命周期函数执行的时候,data和methods中的数据都已经初始化好了
created () {} // 表示实例被创建之后, 会执行这个函数
})
查看Vue生命周期图例, 这里表示Vue开始编译模板, 把Vue代码中的那些指令进行执行, 最终在内存中生成一个编译好的最终模板字符串, 然后把这个字符串渲染为内存中的DOM,此时, 只是在内存中渲染好了模板, 并没有把模板挂载到真正的页面中。
运行期间的生命周期函数
new Vue({
el: "#app",
// 在这个生命周期函数执行的时候,页面中的元素还没有被真正的替换过来,只是之前写的一些模板字符串
beforeMounted () {}, // 表示模板已经编译完成,但是还没有把模板渲染到页面中
// 表示模板已经编译完成,内存中的模板已经真实的渲染到了页面中去,已经可以看到渲染好的页面了
// 注意: mounted是实例创建期间的最后一个生命周期函数,当执行完mounted生命周期函数就表示,
// 实例已经被完全创建好了,此时如果没有其他操作的话,这个实例就在内存中一动不动
// 注意: 如果要通过某些插件操作页面上的DOM节点,最早要在mounted生命周期中操作
mounted () {}
// 上面的是组件的创建阶段,接下来进入组件的运行阶段
// 在这个生命周期函数执行的时候,页面中显示的数据还是旧的,但是data中的数据是最新的,
// 页面尚未和最新的数据保持同步
beforeUpdate () {} // 表示当前界面还没有被更新,数据肯定被更新了
// 查看Vue生命周期图例,这里表示先根据data中最新的数据在内存中重新渲染出一份最新的内存DOM树当最新的
// 内存DOM树更新之后会把最新的内存DOM树重新渲染到真实的页面中去这时候就完成了数据从data(model层)
// 到view(视图层)的更新
updated () {} // 表示当前页面和数据保持同步了,都是最新的
})
销毁期间的生命周期函数
走到这里已经进入组件的销毁阶段了
new Vue({
el: "#app",
// 在这个生命周期函数执行的时候.实例身上所有的data和methods以及过滤器、指令等等都是可用状态,还没有
真正的执行销毁的过程
beforeDestroy () {}, // 表示Vue实例已经从运行阶段进入到销毁阶段
// 在这个生命周期函执行的时候,组件中的data和methods以及过滤器、指令等等都已经不可用了
destroyed(){} // 表示组件已经完全被销毁了
})
关于Vue中的生命周期函数, 这里我尽可能的把我自己的理解和认知写了出来, 如果有不对或者不完善的地方请留言告知我。
