VUE-生命周期

Posted 2021-03-08 star-min

什么是生命周期？

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

三个阶段：创建、运行、销毁

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

成员方法：

• • 创建：beforeCreate created beforeMount mounted；
  • 运行：beforeUpdate updated；
  • 销毁：beforeDestroy destroyed；

为什么学习？

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

创建阶段分析

创建阶段一共四个方法，与el，data都是并列关系；

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

created：此时内部已经完成了data、methods等成员的设置，也是 data初始化的最好时机；

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

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

 

运行和销毁阶段分析 

运行阶段

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

beforeUpdate：可以感知到数据变化之前页面上关于该数据的样子

updated：可以感知到数据变化之后页面上该数据的样子

销毁阶段

beforeDestroy：实例销毁之前

destroyed：实例销毁之后