Vue生命周期简述

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

Vue的生命周期简单来说就是从vue实例创建到虚拟dom产生再到数据绑定监听数据渲染以及销毁的整个过程，下面附带生命周期流程图：由图可以看到生命周期分为8个阶段，分别是
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

生命周期的第一步是创建vue实例，并且进行初始化，即vue实例初始化阶段，有beforeCreate与created

  1. beforeCreate
    在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的
    初始化。这个时候还不能直接访问data中的属性及method中的方法。

  2. created
    在初始化完毕以后，完成了vue的数据注入及数据监听操作，该构造的执行意味着vue实例创建
    完毕，可以进行数据的访问操作

第二步为挂载阶段，有beforeMount与mounted两个阶段

  1. beforeMount
    在created之后，vue会判断实例中是否含有el属性，如果没有会调用vm.$mount(el) ,接着会判
    断是否含有template属性，如果有将其解析为一个render function ，如果没有将el指定的
    外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。

  2. mounted
    创建vm.$el替换el，实际上这里完成的是数据绑定操作，在期间执行了render函数，将模板进
    行了解析，将数据进行了动态绑定。

截止到现在，vue已经将页面显示了出来。随着用户的操作会引起数据改变进而导致页面刷新，进入更新阶段
5. beforeUpdate
更新虚拟dom节点。
6. updated
完成了页面的重新渲染。

最后销毁阶段
7. beforeDestroy
销毁之前调用，此时还是可以访问vue实例的
8. destroyed
完成了监听器，子组件，事件监听等移除，销毁vue实例对象

以上是 Vue生命周期简述 的全部内容， 来源链接： utcz.com/z/377752.html

回到顶部