Vue学习—Vue生命周期

一、Vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

1.生命周期图示

2.生命周期钩子

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算

1.beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

<div id="app">
    <div @click='handleClick'>点击</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg: '今天阳光明媚！'
        },
        methods: {
            handleClick() {
                console.log(this.handleClick);
            }
        },
        watch: {
            msg: {
                handler() {
                    console.log('侦听msg的值');
                },
                immediate: true,
            }
        },
        beforeCreate() {
            console.log(this.msg);   // undefined
            console.log(this.handleClick);  // undefined
            console.log('-----beforeCreate-----');
        }
    });
</script>

2.created

在实例创建完成后被立即调用。

在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

如果要在第一时间调用methods中的方法，或者操作data中的数据，可在此钩子中进行操作。
需要注意的是，执行此钩子时，挂载阶段还未开始，$el 属性目前不可见。

此时，可以进行数据请求，将请求回来的值赋值给data中的数据。

const vm = new Vue({
    el: '#app',
    data: {
        msg: '今天阳光明媚！'
    },
    methods: {
        handleClick() {
            console.log(this.handleClick);
        }
    },
    watch: {
        msg: {
            handler() {
                console.log('侦听msg的值');
            },
            immediate: true,
        }
    },
    beforeCreate() {
        console.log(this.msg);   // undefined
        console.log(this.handleClick);  // undefined
        console.log('-----beforeCreate-----');
    },
    created() {
        console.log(this.msg);  // 今天阳光明媚！
        console.log(this.handleClick);  // function () {...}
        console.log(this.$el);  // undefined
        console.log('----------created-------');
    }
});

3.beforeMount

在挂载开始之前被调用，此时模板已经编译完成，只是未将生成的模板替换el对应的元素。

在此钩子函数中，可以获取到模板最初始的状态。

此时，可以拿到vm.$el，只不过为旧模板

const vm = new Vue({
    el: '#app',
    data: {
        msg: '今天阳光明媚！'
    },
    methods: {
        handleClick() {
            console.log(this.handleClick);
        }
    },
    watch: {
        msg: {
            handler() {
                console.log('侦听msg的值');
            },
            immediate: true,
        }
    },
    beforeCreate() {
        console.log(this.msg);   // undefined
        console.log(this.handleClick);  // undefined
        console.log('-----beforeCreate-----');
    },
    created() {
        console.log(this.msg);  // 今天阳光明媚！
        console.log(this.handleClick);  // function () {...}
        console.log(this.$el);  // undefined
        console.log('----------created-------');
    },
    beforeMount() {
        console.log(this.$el);
    }
});

4.mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

在该钩子函数中的vm.$el为新模板。

执行完该钩子函数后，代表实例已经被完全创建好。

如果要在第一时间，操作页面上的dom节点时，可以在此钩子函数中操作

const vm = new Vue({
    el: '#app',
    data: {
        msg: '今天阳光明媚！'
    },
    methods: {
        handleClick() {
            console.log(this.handleClick);
        }
    },
    watch: {
        msg: {
            handler() {
                console.log('侦听msg的值');
            },
            immediate: true,
        }
    },
    beforeCreate() {
        console.log(this.msg);   // undefined
        console.log(this.handleClick);  // undefined
        console.log('-----beforeCreate-----');
    },
    created() {
        console.log(this.msg);  // 今天阳光明媚！
        console.log(this.handleClick);  // function () {...}
        console.log(this.$el);  // undefined
        console.log('----------created-------');
    },
    beforeMount() {
        console.log(this.$el);
    },
    mounted() {
        console.log(this.$el);
    }
});

5.beforeUpdate

数据更新时调用，发生在虚拟 DOM 打补丁之前。此时数据已经更新，但是DOM还未更新

beforeUpdate() {
    console.log(this.msg);
    console.log(this.$el.outerHTML);//引用值控制台仍会输出，所以用outerHTML
}

6.updated

beforeUpdate() {
    console.log(this.msg);
    console.log(this.$el.outerHTML);
},
updated(){
    console.log(this.msg);
    console.log(this.$el.outerHTML);
}

7.beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。
可以在该钩子函数中，清除定时器。

data: {
    msg: '今天阳光明媚！',
    timer: 0
},
methods: {
    handleClick() {
        console.log(this.handleClick);
    }
},
watch: {
    msg: {
        handler() {
            console.log('侦听msg的值');
        },
        immediate: true,
    }
},
beforeCreate() {
    console.log(this.msg);   // undefined
    console.log(this.handleClick);  // undefined
    console.log('-----beforeCreate-----');
},
created() {
    this.timer = setInterval(() => {
        console.log(1111);
    }, 1000);//************设置一个定时器************
    console.log(this.msg);  // 今天阳光明媚！
    console.log(this.handleClick);  // function () {...}
    console.log(this.$el);  // undefined
    console.log('----------created-------');
},
beforeMount() {
    console.log(this.$el);
},
mounted() {
    console.log(this.$el);
},
beforeUpdate() {
    console.log(this.msg);
    console.log(this.$el.outerHTML);
},
updated() {
    console.log(this.msg);
    console.log(this.$el.outerHTML);
}

Vue 实例销毁后仍会继续

beforeDestroy() {
    clearInterval(this.timer);
}

8.destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除。

beforeDestroy() {
    clearInterval(this.timer);
},
destroyed(){
    console.log('实例已经销毁！');
}