Vue--生命周期

生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程，比如，需要设置数据监听，编译模版，将实例挂载到DOM 并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。

下图展示了实例的生命周期

生命周期分为三大阶段：初始化显示，更新显示，销毁Vue实例。

初始化阶段的钩子函数：

beforeCreate()实例创建前：数据和模版均未获取到
created()实例创建后：最早可访问到data数据，但模版未获取到
beforeMount()数据挂载前：模版已获取到，但是数据未挂载到模版上
mounted()数据挂载后：数据已挂载到模版中

更新阶段的钩子函数：

beforeUpdate()模版更新前：data改变后，更新数据模版前调用，在修改 data 中的变量前触发
updated()模版更新后：将data渲染到数据模版中，在修改 data 中的变量后触发

销毁阶段的钩子函数：

beforeDestroy()实例销毁前
destroyed()实例销毁后

beforeCreate()

打开下面的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "邹邹"
            },
            beforeCreate() {
                // Vue实例创建前被调用，数据和模版均未获取到
                console.log('beforeCreate()', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

打开浏览器控制台查看

可以看到this.$el和this.$data都没有被找到，因为是在实例创建前被调用的。

created()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: "邹邹"
            },
            created() {
                // Vue实例创建后，最早可以获取到data数据的钩子，但是模版未获取到
                console.log('created()', this.$el, this.$data)
            }
        })
    </script>
</body>

</html>

打开控制台查看

beforeMount()和mounted()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeMount() {
                // 数据挂载之前，获取到了模版，但是数据还未挂载到模版上
                console.log('beforeMount()', this.$el, this.$data)
            },
            mounted() {
                // 数据已经挂载到模版上
                console.log('mounted()', this.$el, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM
    </script>
</body>

</html>

打开浏览器控制台查看

beforeUpdate()和updated()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        const vm = new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeUpdate() {
                // 当data数据更新之后，去更新模版中的数据前调用,要使用innerHTML查看
                console.log('beforeUpdate()', this.$el.innerHTML, this.$data)
            },
            updated() {
                // 当data数据更新之后，去更新模版中的数据后调用
                console.log('updated()', this.$el.innerHTML, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM
    </script>
</body>

</html>

beforeDestroy()和destroyed()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>

    </div>
    <script>
        const vm = new Vue({
            // el: "#app",
            data: {
                message: "邹邹"
            },
            beforeDestroy() {
                // 销毁 Vue 实例之前调用
                console.log('beforeDestroy()', this.$el.innerHTML, this.$data)
            },
            destroyed() {
                // 销毁 Vue 实例之后调用
                console.log('destroyed()', this.$el.innerHTML, this.$data)
            },
        }).$mount('#app') // 如果实例中没有el选项，可使用$mount()手动挂载DOM

        vm.$destroy() // 销毁 Vue 实例
    </script>
</body>

</html>

总结

创建 creeate：当加载一个组件时，先读取 data 中的变量，创建响应系统。此时只有 data 对象，暂时没有虚拟 DOM 树

挂载 mount：扫描原始 DOM 树，构建虚拟 DOM 树，并填充数据。既有 data 对象，又有虚拟 DOM 树

更新 update：只有当模型变量的值被改变时，才会触发更新阶段

销毁 destroy：只有当主动调用 $destroy，销毁组件时才会触发