Vue学习笔记 —— 生命周期

    科技2024-06-20  75

    什么是生命周期?

    每个Vue实例在被创建之前都会经过一系列的初始化过程,这个过程就是vue的生命周期。

    同时Vue在一整个生命周期中,提供了很多钩子函数。利用这些钩子函数,我们可以在生命周期的不同时刻进行操作。 钩子函数如下:

    beforeCreate ------------ 创建前状态created ------------ 创建完毕状态beforeMount ------------ 挂载前状态mounted ------------ 挂载结束状态beforeUpdate ------------ 更新前状态updated ------------ 更新完成状态beforeDestroy ------------ 销毁前状态destroyed ------------ 销毁完成状态

    每一个Vue实例在创建的过程中,都会依次调用这些钩子函数

    1、在beforeCreate和created钩子函数之间的生命周期

    此阶段Vue会进行初始化事件,进行数据观测。

    在created时,data属性会绑定数据(放在data中的属性当值发生改变的同时,视图也会改变)。

    补充:此时还是没有el选项。

    2、created钩子函数和beforeMount间的生命周期

    此阶段会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就停止了生命周期,直到在该vue实例上调用vm.$mount(el)。

    如果后续调用了vm.$mount(el),代码就会继续向下执行。

    生命周期对template参数选项的影响:

    如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。如果没有template选项,则将外部HTML作为模板编译。template中的模板优先级要高于outer HTML的优先级。

    3、beforeMount和mounted 钩子函数间的生命周期

    此阶段给vue实例对象添加$el成员,并且替换掉挂在的DOM元素。

    4、mounted

    在mounted之前,HTML中的标签还是以JavaScript中的虚拟DOM形式存在的,mounted之后,真实数据替换虚拟DOM。

    如下图所示,beforeMount的时候,h1标签中的内容是通过{{message}}进行占位的,也就是虚拟DOM节点。

    5、beforeUpdate钩子函数和updated钩子函数间的生命周期

    当vue发现data中的数据发生改变时会先后调用beforeUpdate和updated钩子函数,会触发对应组件的重新渲染。

    6、beforeDestroy和destroyed钩子函数间的生命周期

    实例销毁之前调用beforeDestroy钩子函数。

    补充:此时实例仍然完全可用。

    Vue 实例销毁后调用destroyed钩子函数。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

    参考博客:详解vue生命周期

    Processed: 0.011, SQL: 8