生命周期

生命周期

每个 Vue 实例在被创建之前/之后都要经过一系列的初始化过程。

例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。

Vue生命周期的主要（一共是11个）阶段：

挂载（初始化相关属性）

beforeCreate①

注意点：在此时不能获取data中的数据，也就是说this.msg得到的是undefined

created②

beforeMount③

mounted④     页面加载完毕的时候

注意点：默认情况下，在组件的生命周期中只会触发一次

更新（元素或组件的变更操作）

beforeUpdate⑤

updated⑥

注意点：可以重复触发的，所以不要在更新的生命周期中去做数据的修改操作（例如ajax获取数据再改本地data数据），这样会陷入死循环中。

销毁（销毁相关属性）

beforeDestroy⑤

注意点：销毁组件之前，如果有销毁复杂性的操作（例如定时器，复杂的动画操作等）的需求，则代码可以写在这里

destroyed⑥

关于8个生命周期涉及到的方法，可以参考Vue官网API

实例

<div id="app">{{msg}}</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "hello world",
        },
        beforeCreate() {
            // 幼年
            console.log("创建之前");
            console.log(this.msg);
            console.log(this);
        },
        created() {
            // 青年
            console.log("创建之后");
            console.log(this.msg);
        },
        beforeMount() {
            console.log("挂载之前");
            console.log(this.msg);
        },
        mounted() {
            console.log("挂载完毕");
            console.log(this.msg);
        },
        beforeUpdate() {
            console.log("更新之前");
            console.log(this.msg);
        },
        updated() {
            // ajax操作，更新本组件的数据 => 死循环
            console.log("更新之后");
            console.log(this.msg);
        },
        beforeDestroy() {
            // 如果后续有代码需要写在销毁环节中，建议写在这里
            // 项目中可能有定时器的需求、复杂的动画组件使用需求
            // 所以就有了在销毁组件之前将之前耗资源的操作给销毁掉
            console.log("销毁之前");
        },
        destroyed() {
            console.log("销毁完毕");
        },
    });
</script>