生命周期:
生命周期是:
指vue实例(或组件)从诞生到消亡所经历的各个阶段的总和
生命周期分为三个阶段:
1.创建阶段:由空白期,data/methods初始化、模板挂载、模板渲染等组成。
2.运行阶段:分为 更新前和更新后 两部分。
3.销毁阶段:分为 销毁前和销毁后。
创建: beforeCreate create beforeMount mounted
运行: beforeUpdate updated
销毁: beforeDestroy destroyed
创建阶段有四个:
`new Vue({
beforeCreate(){ },
created(){ },
beforeMount(){ },
mounted(){ },
})`
beforeCreate:此时Vue对象刚创建好,没有任何成员,data、methods等都没有呢,只有this。
created:此时vue对象已经长大一点,内部已经完成了data、methods等成员的设置,也是data初始化的最好时机、一般用于页面"首屏"数据的获取操作(获取好的数据可以直接赋予给data使用,其可以做到第1 时间就把数据赋予给data,进而不影响后续使用)。
beforeMount:此时vue实例已经把div容器给获得到了,但是内部的vue指令等信息还没有被编译处理。
mounted:此时,vue获取到的div容器内部的原生指令已经被编译处理好了,并且也完成了容器的渲染工作,此时模板中已经看不到vue原始指令了。
运行阶段:
new Vue({
beforeUpdate(){ 可以感知到数据变化之前页面上关于该数据的样子 }
updated(){ 可以感知到数据变化之后页面上该数据的样子 }
})
销毁阶段:
new Vue({
beforeDestroy(){ 实例销毁之前 }
destroyed(){ 实例销毁之后 }
})
当vue实例被销毁后,就要执行以上两个方法,vm.$destroy();
如图: