vue生命周期详解

vue生命周期详解

生命周期示意图

生命周期：

生命周期是指vue实例(或者组件)从创建到销毁所经历的各个阶段的总和。

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

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

成员方法：

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

​ 创建阶段：beforeCreate created beforeMount mounted

​ 运行阶段：beforeUpdate updated

​ 销毁阶段： beforeDestroy destroyed

不同阶段完成不同的任务，开发者可以利用各个阶段的特点及提供的生命周期钩子函数完成业务需要的相关功能。

创建阶段

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

new Vue({
  beforeCreate(){   },     // 初始化vue对象
    
  created(){  },           // data、methods初始化
  
  beforeMount(){   },      // 模板挂载
    
  mounted(){  },           // 模板渲染
})

• beforeCreate：

  • 此时Vue实例对象已经创建完毕，没有任何成员，el、data、methods等都没有，都是undefined，只有this。

• created：

  • 此时vue对象内部已经完成了data（数据监听和属性绑定，data中属性值改变，视图也会改变）、methods等成员的设置，也是data初始化的最好时机。
  • created: 一般用于页面"首屏"数据的获取操作(获取好的数据可以直接赋予给data使用，此方法已经把data做好了，其可以做到第1 时间就把数据赋予给data，供后续使用)

• beforeMount：

  • 此时vue实例已经获取到div容器，给vue实例添加$el成员，并替换掉挂载的dom元素，但是内部的vue指令等信息还没有被编译处理，div容器的内容还是没有编译前的原生内容。

• mounted：

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

注意：

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

运行阶段

运行阶段只有两个生命周期方法，当vue对象data中的数据发生改变，会触发组件的重新渲染，先后调用beforeUpdate 和 updated 钩子函数。

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

注意：

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

销毁阶段

beforeDestroy 钩子函数在vue实例销毁之前调用。在这一步，vue实例仍然可用。

destroyed 钩子函数在vue实例销毁之后调用。调用后，vue实例对象的所有属性都会解除绑定，所有的事件监听器也都会被移除，所有的子实例也都会被销毁。

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

执行 vm.$destroy() 方法，vue实例就会被销毁。

注意：

生命周期的各个方法与 el、data、methods 等成员都是并列的，它们有固定的执行顺序，与设置顺序没有关系。