Vue生命周期及父子组件生命周期的加载顺序

在使用Vue的过程中

首先接触到的就是生命周期

Vue的生命周期分为八个阶段

过程如下图所示

beforeCreate：

此阶段data和$el都未被创建，在组件创建前触发

    beforeCreate() {
        console.log(this.test);         //undefined
        console.log(this.$el);          //undefined
    },

created：

在组件创建后触发，已经完成了数据观测，对Vue对象的Props、Methods、Data、computed、watch进行初始化

在这个阶段可以检测到data、但是$el依旧未被建立

    created() {
        console.log(this.test);         //true
        console.log(this.$el);          //undefined
    },

beforeMounted：

在组件挂载到页面前触发，

虽然输出的和created没有区别但实际上在这个周期进行了 el 和 template 的检查为DOM节点挂载做准备

    beforeMount() {
        console.log(this.test);         //true
        console.log(this.$el);          //undefined
    },

mounted：

在组件挂载到页面后触发，此时$el创建

    mounted() {
        console.log(this.test);         //true
        console.log(this.$el);          //<div id="app">...</div>
    },

到这里，一个Vue的初始化就结束了

ps：keep-alive的组件再次渲染时不会触发created、mounted等钩子函数

beforeUpdate：

Vue具有响应式原理即能够监测到数据的变化

当视图层的数据即将被更新前，就会触发这个生命周期，这个阶段主要可以用在得知哪个组件即将发生数据改动，并且可以移除对其绑定的事件监听器。

updated：

此阶段已经重新渲染完成数据更新后的状态，并且要注意在此期间更改状态，如果要更改官方建议使用computed或watch来进行数据更改。（强调！！如果有疑问可以自己在updated中更改视图数据试一下相信你就理解了）

beforeUpdate与updated的区别：

beforeUpdate如上面所说，是在视图层数据更新前进行的操作，

mounted触发数据更新后，在beforeUpdate中对数据进行操作，此时视图还未更新，所以对数据进行更改后不会再次触发beforeUpdate

如下所示：

<template>
    <div id="app">
        <div>{{value}}</div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            value:0,
        }
    },
    mounted() {
        this.value += 1;
        console.log(this.value);
    },
    beforeUpdate() {
        this.value += 1;
        console.log(this.value);
    },
    updated() {
        console.log(this.value);
    },
}
</script>

如果在updated中更改数据，此时视图已经更新，updated中的操作导致数据再一次变化，引发了视图层再一次更新，从而触发了beforeUpdate和update，但是因为视图层对比后发现数据相同，所以不会再次触发beforeUpdate和update

<template>
    <div id="app">
        <div>{{value}}</div>
    </div>
</template>

<script>


export default {
    data() {
        return {
            value:0,
        }
    },
    mounted() {
        this.value += 1;
        console.log("mounted",this.value);
    },
    beforeUpdate() {
        console.log("beforeUpdate",this.value);
    },
    updated() {
        this.value = 12;
        console.log("updated",this.value);
    },
}
</script>

但是如果将updated中的代码改成动态的操作

export default {
    data() {
        return {
            value:0,
        }
    },
    mounted() {
        this.value += 1;
        console.log("mounted",this.value);
    },
    beforeUpdate() {
        console.log("beforeUpdate",this.value);
    },
    updated() {
        this.value += 1;
        console.log("updated",this.value);
    },
}