详细聊聊Vue生命周期的那些事

下面是详细聊聊Vue生命周期的攻略：

什么是Vue的生命周期？

Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了数据的变化、用户的操作等各个阶段，其中也包含了组件的创建、挂在、更新和销毁等过程。

Vue的生命周期包含哪些钩子函数？

Vue的生命周期包含了以下几个钩子函数：

beforeCreate：实例创建之前的钩子函数，此时的数据和方法都不存在。
created：实例创建完成，此时的数据已经可以访问，但DOM还未生成。
beforeMount：DOM挂载之前的钩子函数，此时数据已经与DOM关联，但并未生成DOM节点。
mounted：DOM挂载之后的钩子函数，此时实例已经生成了DOM节点，并且可以操作DOM了。
beforeUpdate：数据更新之前的钩子函数，此时数据已经发生变化，但DOM还未更新。
updated：数据更新之后的钩子函数，此时数据已经和DOM同步，可以进行一些需要更新的操作，但注意避免在此钩子函数中修改数据，会导致死循环。
beforeDestroy：实例销毁之前的钩子函数，此时实例中的数据还存在，可以进行一些清理工作。
destroyed：实例销毁之后的钩子函数，此时实例已经被完全销毁，不再存在。

Vue生命周期示例

下面通过两个示例来说明Vue的生命周期：

示例一：Vue实例的初始化过程

<!DOCTYPE html>
<html>
<head>
    <title>Vue生命周期示例一</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, World!'
            },
            beforeCreate: function () {
                console.log('beforeCreate')
            },
            created: function () {
                console.log('created')
            },
            beforeMount: function () {
                console.log('beforeMount')
            },
            mounted: function () {
                console.log('mounted')
            },
            beforeUpdate: function () {
                console.log('beforeUpdate')
            },
            updated: function () {
                console.log('updated')
            },
            beforeDestroy: function () {
                console.log('beforeDestroy')
            },
            destroyed: function () {
                console.log('destroyed')
            }
        })
    </script>
</body>
</html>

在初始化Vue实例的过程中，我们在各个生命周期函数中加入了console.log输出，可以依次观察到控制台输出了这些信息：

beforeCreate
created
beforeMount
mounted

这表明Vue实例在被创建后，先执行了beforeCreate和created钩子函数，然后进行了DOM的挂载（beforeMount和mounted），整个过程中，数据和DOM依次建立了联系。

示例二：Vue实例的销毁过程

<!DOCTYPE html>
<html>
<head>
    <title>Vue生命周期示例二</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, World!'
            },
            beforeCreate: function () {
                console.log('beforeCreate')
            },
            created: function () {
                console.log('created')
            },
            beforeMount: function () {
                console.log('beforeMount')
            },
            mounted: function () {
                console.log('mounted')
            },
            beforeUpdate: function () {
                console.log('beforeUpdate')
            },
            updated: function () {
                console.log('updated')
            },
            beforeDestroy: function () {
                console.log('beforeDestroy')
            },
            destroyed: function () {
                console.log('destroyed')
            }
        })

        setTimeout(function () {
            console.log('start destroy')
            vm.$destroy()
        }, 3000)
    </script>
</body>
</html>

在第二个示例中，我们在Vue实例中增加了一个延迟3秒后销毁实例的操作：

setTimeout(function () {
    console.log('start destroy')
    vm.$destroy()
}, 3000)

我们可以在控制台观察到如下的输出：

beforeCreate
created
beforeMount
mounted
start destroy
beforeDestroy
destroyed

这表明在Vue实例销毁之前，会依次执行beforeDestroy和destroyed钩子函数，整个Vue实例销毁结束。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详细聊聊Vue生命周期的那些事 - Python技术站