对Vue生命周期的一些理解

每个 Vue 实例在被创建时都要经过一系列的初始化过程，在这个初始化过程中也会运行一些叫做生命周期钩子的函数，这些函数就是vue的生命周期。

官方的生命周期图示：

vue的生命周期如下：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

 

先创建一个vue实例

  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'Vue生命周期钩子'
    }）

1.在beforeCreate阶段:

this.$el:undefined

this.$data:undefined

this.msg:undefined

都是undefined，都没有初始化

2.在created阶段:

this.$el:undefined，

this.$data:object，

this.msg:'Vue生命周期钩子'      已被初始化

3.在beforeMount阶段:

this.$el:已被初始化 ,但只是一个占位<h1>{{msg}}</h1>

this.$data:object，

this.msg:'Vue生命周期钩子'      已被初始化

4.在mounted阶段:

this.$el:已被初始化 ,并被渲染<h1>Vue生命周期钩子</h1>

this.$data:object，

this.msg:'Vue生命周期钩子'      已被初始化

5.在beforeUpdate和updated阶段

如果vue中的data发生了改变，会先后调用beforeUpdate和updated函数，触发对应组件的重新渲染。

6.在beforeDestroy和destroyed阶段

 

beforeDestroy钩子：这一阶段，实例都可用，在vue实例销毁前调用。

destroyed钩子在vue 实例销毁后调用。此时，vue所绑定的东西都会解绑。