Vue.js 2 中的 8 个生命周期钩子详解

Vue.js 是一款流行的前端框架，提供了丰富的生命周期钩子函数，用于在实例化过程中插入自定义逻辑。本文将深入探讨 Vue.js 2 中的 8 个生命周期钩子，并结合代码演示它们的用法。

生命周期
1.是回调函数，钩子函数
2.生命周期名称不可以更改
3.this指向vue实例化对象

1.beforeCreate(初始化之前)

beforeCreate 钩子在实例创建之初被调用，此时实例的 data 和 methods 还未初始化。

var vm = new Vue({
    beforeCreate: function () {
        console.log('beforeCreate hook called');
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    }
});

2.created(初始化之后)

created 钩子在实例创建后被调用，此时实例的 data 和 methods 已经初始化完成。

var vm = new Vue({
    created: function () {
        console.log('created hook called');
        console.log('Message:', this.message);
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    }
});

3. beforeMount(解析前|挂载前)

beforeMount 钩子在模板编译之前被调用，此时虚拟 DOM 已经创建完成，但尚未挂载到页面中。

var vm = new Vue({
    beforeMount: function () {
        console.log('beforeMount hook called');
        console.log('Message:', this.message);
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

4. mounted(解析后|挂载后)

mounted 钩子在实例挂载到页面之后被调用，此时实例的模板已经被编译成真实的 DOM。

var vm = new Vue({
    mounted: function () {
        console.log('mounted hook called');
        console.log('Message:', this.message);
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

5. beforeUpdate(更新前)

beforeUpdate 钩子在数据更新前被调用，此时虚拟 DOM 已经重新渲染，但尚未应用到页面。

var vm = new Vue({
    beforeUpdate: function () {
        console.log('beforeUpdate hook called');
        console.log('Message:', this.message);
    },
    updated: function () {
        console.log('Message updated:', this.message);
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

setTimeout(() => {
    vm.message = 'Updated message!';
}, 2000);

6. updated(更新后)

updated 钩子在数据更新后被调用，此时页面已经更新完成。

var vm = new Vue({
    updated: function () {
        console.log('updated hook called');
        console.log('Message:', this.message);
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

setTimeout(() => {
    vm.message = 'Updated message!';
}, 2000);

7. beforeDestroy(销毁前)

beforeDestroy 钩子在实例销毁前被调用，此时实例仍然完全可用。

var vm = new Vue({
    beforeDestroy: function () {
        console.log('beforeDestroy hook called');
        console.log('Message:', this.message);
    },
    destroyed: function () {
        console.log('Instance destroyed');
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

setTimeout(() => {
    vm.$destroy();
}, 4000);

8. destroyed(销毁后)

destroyed 钩子在实例销毁后被调用，此时实例及其相关的 DOM 已经完全被销毁。

var vm = new Vue({
    destroyed: function () {
        console.log('destroyed hook called');
    },
    data() {
        return {
            message: 'Hello, Vue!'
        };
    },
    template: '<div>{{ message }}</div>'
});
vm.$mount('#app');

setTimeout(() => {
    vm.$destroy();
}, 4000);

通过以上代码示例，您可以更加深入地理解 Vue.js 2 中的生命周期钩子函数及其作用。希望这篇博客对您有所帮助！如果您需要进一步的解释或有其他问题，请随时告诉我。

• 打卡3.31