vue生命周期钩子函数

1 vue的生命周期的钩子函数有哪些

• beforeCreate ：在调用beforeCreate时，已完成的内容是创建了一个空的Vue实例对象，这个对象上有默认的生命周期函数和默认的事件
• created ：此阶段时，数据配置结束。包括数据侦听、计算属性、方法、事件/侦听器的回调函数，此时还是虚拟dom，挂载阶段还未开始，即真实dom还没有生成。
• beforeMount ：此阶段是template模板在内存中编译结束，还未挂载到页面中，浏览器中的dom还未显示（替换）。
• mounted ：此阶段内存中的dom已经替换到浏览器上了，由虚拟dom变为真实dom。注意：此时不能保证所有子组件也挂载完成，如果需要整个视图渲染结束执行某些操作可以在 mounted 内部使用 vm.$nextTick

mounted () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

• beforeUpdate ：此阶段时，data里的数据是最新的，页面还是旧数据。页面上的数据和真实数据未同步
• updated ：此时页面上的数据和data里的数据是同步的，都是最新的。注意：此时不能保证所有子组件也都重新渲染结束，如果需要整个视图渲染结束执行某些操作可以在 updated内部使用 vm.$nextTick

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

• beforeDestroy ：此阶段的各种数据和方法都可以使用。
• destroyed ：此阶段实例已经被销毁，过滤器、数据、方法都无法使用。
• activated ：被keep-alive缓存的组件激活（显示）时调用，一般是页面显示时需要进行的操作可以在这里完成，无法区别对待。
• deactivated：被keep-alive缓存的组件失活（显示的是系统的其他页面）时调用
• 借用杨肆月对于Vue生命周期的图解