vue实例的生命周期

06月

1035 0 0

vue实例的生命周期钩子函数

vue实例从创建到最后的销毁这个过程中会自动的执行一些方法，也被称为vue实例的生命周期钩子函数，具体可以参照vue官方提供的生命周期图片

可以看到在vue的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么首先我们列出所有的钩子函数，再根据代码一一讲解:

beforeCreate	创建前
created	创建成功
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新完成
beforeDestroy	销毁前
destroyed	销毁完成

以下我们根据代码来看一下每个阶段发生了什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        beforeCreat() {
            console.log('beforeCreate 创建前=====');
            console.log( "el     : " + this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message)
        },
        created () {
            console.log('created 创建完成=====');
            console.log("el     : " + this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        beforeMount () {
            console.log('beforeMount 挂载前=====');
            console.log("el     : " + (this.$el));
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        mounted () {
            console.log('mounted 挂载完成=====');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        beforeUpdate () {
            console.log('beforeUpdate 更新前=====');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        updated() {
            console.log('updated 更新完成=====');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        beforeDestroy() {
            console.log('beforeDestroy 销毁前=====');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message);
        },
        destroyed() {
            console.log('destroyed 销毁完成=====');
            console.log("el     : " + this.$el);
            console.log(this.$el);
            console.log("data   : " + this.$data);
            console.log("message: " + this.message)
        }
    })
</script>
</body>
</html>

我们在实例里面分别执行这八个函数钩子，运行以上代码，在浏览器控制台中查看打印信息：