VUE之生命周期

在vue中存在“两个生命周期”：vue实例生命周期，组件生命周期。

什么是生命周期？

简单来说生命周期就是指一个对象的生老病死。当然我们这里肯定不是啦。在vue中生命周期指的是从beforeCreate到destroyed的过程。

生命周期中的钩子函数
vue的生命周期中包括这些钩子函数，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
1 beforeCreate：此时vue实例还没有创建，因此是访问不到data数据的。此时dom树没有生成。截图中dom为undefined

 beforeCreate(){
     console.log("beforeCreate",this.test)
 },

2 created：：vue实例创建完毕，此时可以获取、修改data的值，同时也是最早能够发送ajax请求的阶段。此时dom树没有生成。

created(){
    this.test = 'dddd';
    console.log("created",this.test)
}

3 beforeMount：挂载之前，此时可以获取，修改data值，但是dom数据还没有渲染。此阶段修改数据不会触发beforeUpdate和updated两个钩子函数

beforeMount(){
    console.log("beforeMount");
    console.log("beforeMount:",this.test);
    console.log('dom:',this.$el);
},

4 mounted: 挂载完毕，此时dom数据渲染完毕，数据可以获取，修改，并且此阶段修改数据会触发beforeUpdate和updated两个钩子函数

mounted(){
    console.log("mounted");
    console.log("mounted:",this.test);
    console.log('dom:',this.$el);
}

5 beforeUpdate和updated： 触发时机，beforeMount中修改data中的值不会触发beforeUpdate钩子函数，只有在mounted中修改的才会触发beforeUpdate钩子函数（不能再自身去修改，导致死循环）

6 beforeDestroy和destroyed： 销毁实例，分情况说明。（beforeCreate阶段不能执行销毁）
###created阶段就销毁，此时dom树未渲染，但是仍然可以访问vue实例中的data。

###beforeMount阶段销毁，此时数据未渲染，实例能够正常访问

###mounted阶段销毁，挂载完毕，数据渲染完毕。

---

实例中的生命周期和组件中的生命周期对比

1 实例中的生命周期：
生命周期过程图解：

代码演示生命周期创建的顺序：

1 从根组件到孙子组件依次创建，由外向内

2 生命周期中数据的挂载顺序：
可以看到从孙子 组件到根组件依次挂载，有内向外

3 生命周期中数据更新的顺序：