vue 生命周期

---

vue生命周期详解

1、new Vue()

通过 new创建一个Vue实例

2、beforeCreate

$el、data都是undefined

 beforeCreate() {
    console.log("beforeCreate");
    console.log(this.$el);
    console.log(this.$data); 
 },

打印结果：

在beforeCreate之后，created之前 初始化数据和方法

3、created

$el仍然是undefined，而此时data初始化为一个对象，注：修改data，不会update视图。

 created() {
    console.log("created");
    console.log(this.$el);
    console.log(this.$data);
 },

打印结果：

4、模板编译

判断有没有el项（vm.$mount(el)），判断有没有模板(没有将el外层的HTML当模板)，将模板编译成渲染函数，返回虚拟DOM。

5、beforeMount

$el是一个虚拟DOM，虚拟DOM其实就是一个js对象；此时页面还没有渲染出来，data为一个对象，注：修改data，不会update视图。

  beforeMount() {
    console.log("beforeMount");
    console.log(this.$el);
    console.log(this.$data);
  },

打印结果：

在beforeMount之后，mounted之前 创建真实的DOM，并替换虚拟DOM，这一过程，具体可见：vue源码系列

6、mounted

$el是真实的DOM，渲染在页面上。data为一个对象，此时：修改data，会update视图。

  mounted() {
    console.log("mounted");
    console.log(this.$el);
    console.log(this.$data);
  },

结果打印：

7、beforeUpdate和updated

data改变，重新渲染虚拟DOM，并通过diff算法找出不同之处，再更新真实的DOM。

8、beforeDestory和destoryed

清除事件，数据，监听等，Vue实例不可用。

---

总结

以上是本人对vue生命周期的浅理解，如有不正确的地方，望指出。