Vue的生命周期钩子函数

1、beforeCreate()

在调用beforeCreate()函数前，vue主要做了vm实例一些属性的定义和createElement()方法的封装。此时函数的this指向vm，但还获取不到data中的数据、methods中的方法、watch中的事件，想要在这个阶段获取data中的数据的话，可以通过 $options获取父组件的data，或者通过 $nextTick或者setTimeout等异步方法，等待实例vm完成data的配置后获取。

beforeCreate() {
  console.log(this); // this指向实例化对象
  console.log(this._watcher); // null
  console.log(this.num); // undefined
  console.log(this.add); // undefined
  console.log(this.$options); // 指向父组件
  this.$nextTick(function(){
    console.log(this.num); // 6
  });
  console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
  console.log(this._vnode); // null
},

2、created()

此时，实例vm已经完成了data中的数据、methods中的方法、watch中的事件的挂载。$vnode属性已经存在，但虚拟节点的数据还未生成。所以DOM元素也没有生成， $el为undefined。一般可以将部分简单的数据请求放在这里执行，因为此时data已经可以使用，但如果将过多的数据请求都放在这里，可能会影响视图渲染，出现短暂白屏。

created() {
  console.log(this); // this指向实例化对象
  console.log(this._watchers); // [Watcher]
  console.log(this.num); // 6
  console.log(this.add); // ƒ add()
  console.log(this.$options); // 指向父组件
  console.log(this.$vnode); // 空的虚拟节点
  console.log(this.$el); // undefined
  console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
  console.log(this._vnode); // null
}

3、beforeMount()

与created()中的状态基本相同。在created()和beforeMount()之间主要进行判断是否存在 $el，并将template编译成渲染函数。

beforeMount() {
  console.log(this); // this指向实例化对象
  console.log(this._watchers); // [Watcher]
  console.log(this.num); // 6
  console.log(this.add); // ƒ add()
  console.log(this.$options); // 指向父组件
  console.log(this.$vnode); // 空的虚拟节点
  console.log(this.$el); // undefined
  console.log(this.$createElement); // ƒ (a, b, c, d) { return createElement(vm, a, b, c, d, true); }
  console.log(this._vnode); // null
}

4、Mounted()

挂载完毕，此时可以获取到虚拟DOM和真实DOM，视图也已经渲染完毕。一般将数据请求放在这里执行，如果引用的一些第三方库或者插件需要操作DOM也可以在这里执行，因为DOM已经渲染完毕。

mounted() {
  console.log(this);// this指向实例化对象
  console.log(this._vnode);// VNode {tag: "div", data: undefined, children: Array(5), text: undefined, elm: div, …}
  console.log(this.$el); // 得到DOM元素
}

5、beforeUpdate()

data中的数据已经更新完毕，但页面内容还未响应更改。针对视图层，只有视图层的数据改变才会触发。也就是说data中的数据如果没有在视图层使用那么如果改变不会触发，并且在beforeUpdate中再次改变data中的数据，不会再次触发beforeUpdate，因为此时视图层还未响应更新。 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

beforeUpdate() {
}

6、update()

组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作，比如添加事件监听器。不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 $nextTick

update() {
}

7、beforeDestroy()

销毁之前，实例上的事件、指令都可用，此时组件没有真正销毁。常用来销毁vm实例上的一些监听事件及定时函数，防止内存泄漏，提高性能。

beforeDestroy() {
}

8、destroyed()

beforeDestroy与destroyed之间，将children、watchers、components、evnet listener拆除。常用来销毁一些监听事件及定时函数，防止内存泄漏，提高性能。

destroyed() {
}