Vue入门指南-05 Vue实例的生命周期(快速上手vue)

生命周期钩子 = 生命周期函数 = 生命周期事件

实例建立期间的生命周期函数

// 刚初始化了一个空的实例对象, 这时候只有默认的一些生命周期函数和默认事件, 其余都未建立。
// 若是要调用 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中的生命周期函数, 这里我尽量的把我本身的理解和认知写了出来, 若是有不对或者不完善的地方请留言告知我。

Vue入门指南(快速上手vue)