vue生命周期的使用

Posted 2020-12-22 xzhce

beforeCreated这是我们第一个的生命周期函数，表示实列完全创建出来之前，会执行他

注意，在执行的时候，data和methods中的数据都还没有初始化

created第二个生命周期函数

在created中，data和methods已经初始化好了

如果调用methods中的方法，或者操作data中的数据，最早只能在created中

在实列挂载之前

beforeMount(){

}

这是遇到的第三个生命周期函数，表示模板在内存已经编译完成，但是没有把模板渲染到页面中

在beforeMount执行的时候，页面中的元素还还有被真正替换过来，只是之前写的模板字符串 

mounted(){

} 

这是遇到的第4个生命周期函数，表示内存中模板已经挂在了页面上，用户可以看到渲染好的 页面了

注意：mounted是实列创建期间的最后一个生命周期函数，当执行完mounted表示，实列已经完全被创建好了，此时，如果没有其它操作的话，这个实列就是躺在那里，不动不动

注意：如果通过某些插件操作页面上的DOM节点，最早实在mounted中进行

 

beforeUpdate和updated这些是组件运行阶段的生命周期，这俩事件，会根据data数据的改变，有选择性的触发0次到多次

这时候表示我们的界面还没有更新，数据被更新了

 

当执行beforeUpdate的时候，页面中的显示数据还是旧的，此时data数据是新的，页面尚未和最新的数据保持同步

updated事件执行的时候，页面和data中的数据已经保持同步了