生命周期

生命周期

介绍

目标：

知道什么是生命周期

辅助参考：

https://segmentfault.com/a/1190000011381906

什么是：

生命周期是指vue实例(或者组件)从诞生到消亡所经历的各个阶段的总和

生命周期分为3个阶段，分别是创建、运行、销毁

• 创建阶段：由空白期、data/methods初始化、模板挂载、模板渲染等组成
• 运行阶段：分为 更新前 和 更新后 两部分
• 销毁阶段：分为 销毁前 和 销毁后

成员方法：

各个阶段在Vue实例内部都有对应的成员方法，可以定义、执行、感知

创建：beforeCreate    created   beforeMount   mounted

运行：beforeUpdate  updated

销毁:  beforeDestroy    destroyed

为什么学习：

不同阶段完成不同的任务，开发者可以利用各个阶段的特点完成业务需要的相关功能

创建阶段分析

目标：

了解创建阶段各个方法特点，重点记住created

创建阶段一共有4个方法，它们与 el、data都是并列关系的

new Vue({
  beforeCreate(){   },
  created(){  },
  
  beforeMount(){   },
	mounted(){  },
})

beforeCreate：此时Vue对象刚创建好，没有任何成员，data、methods等都没有呢，只有this

created：此时vue对象已经长大一点，内部已经完成了data、methods等成员的设置，也是data初始化的最好时机

beforeMount：此时vue实例已经把div容器给获得到了，但是内部的vue指令等信息还没有被编译处理

mounted：此时，vue获取到的div容器内部的原生指令已经被编译处理好了，并且也完成了容器的渲染工作，此时模板中已经看不到vue原始指令了

重点关注方法是 created ：

created: 一般用于页面"首屏"数据的获取操作(获取好的数据可以直接赋予给data使用，其可以做到第1 时间就把数据赋予给data，进而不影响后续使用)

注意：

创建阶段各个函数不设置则以，设置后就会自动执行，并且会顺序只执行一次

运行和销毁阶段分析

目标：

了解运行阶段和销毁阶段各个方法特点

运行阶段：

new Vue({
	beforeUpdate(){ 可以感知到数据变化之前页面上关于该数据的样子 }
	updated(){ 可以感知到数据变化之后页面上该数据的样子 }
})

运行阶段方法不会自动执行，当data成员数据发生变化，就执行了，并且数据变化多次，方法也会重复执行多次

销毁阶段：

new Vue({
	beforeDestroy(){ 实例销毁之前 }
	destroyed(){ 实例销毁之后 }
})

当vue实例被销毁后，就要执行以上两个方法，vm.$destroy()

注意：

1. 运行阶段各个方法与创建阶段不同，本身不会自动执行，需要数据变化的条件触发才会执行
2. 销毁阶段各个方法也不会自动执行，需要Vue实例对象调用$destroy()方法