生命周期
从vue实例创建到虚拟dom产生再到数据绑定 数据监听 数据渲染以及销毁的整个过程。
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeDestroy
-
destroyed
vue实例初始化阶段
生命周期的第一步就是创建vue实例,并且进行初始化
-
beforeCreate
在初始化的时候调用了beforeCreate,完成了vue实例的生命周期相关属性的初始化以及事件的初始化。这个时候还不能直接访问data中的属性集method中的方法。
-
created
在初始化完毕之后,完成了vue的数据注入及数据监听操作,该构造的执行意味着vue实例创建完毕,可以进行数据的访问工作。
vue挂载阶段
生命周期的第一步就是创建vue实例,并且进行初始化
-
beforeMount
在created之后,vue会判断实例中是否含有el属性,如果没有会调用vm.$mount(el),接着会判断是否含有template属性,如果有将其解析为一个render function,如果没有将el指定的外部html进行解析。这里只是完成了模板的解析但是数据并没有绑定到模板中。
-
mounted
创建vm.$el替换el,实际上这里完成的是数据绑定操作,在期间执行了render函数,将模板进行了解析,将数据进行了动态绑定。
vue更新阶段
截止到现在,vue已经将页面显示了出来,随着用户的操作会引起数据改变进而导致页面刷新
-
beforeUpdate
更新虚拟dom节点。
-
updated
完成了页面的重新渲染
vue销毁阶段
- beforeDestroy
销毁之前调用,此事还是可以访问vue实例的
-
destroyed
-
完成了监听器,子组件,事件监听等移除,销毁vue实例对象