关于vue生命周期的理解-优快云博客

本文详细探讨了Vue实例的生命周期，包括beforeCreate、created、beforeMount、mounted等关键阶段，以及如何在不同钩子中进行数据操作和DOM操作。通过实例展示了activated、deactivated在组件缓存中的作用，和destroyed钩子在实例销毁时的执行情况。文章还提出了在不同生命周期钩子中实现功能的实用场景，如AJAX请求、DOM操作和组件状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue生命周期的理解

在 Vue 中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom一渲染、更新一渲染、卸载等一系列过程
首先展示一张关于vue生命周期的图示：
在这里插入图片描述
Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表：

在这里插入图片描述
（除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不被调用。）
实际操作

测试过程基于以下代码执行，引入vue.js后可直接执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="./vue.js"></script>-->
    <script src="../2.5.20-vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <keep-alive>
        <my-components msg="hello" v-if="show"></my-components>
    </keep-alive>
</div>
</body>
<script>
    var child = {
        template: '<div>from child: {{msg}}</div>',
        props: ['msg'],
        data: function () {
            return {
                childMsg: 'child'
            };
        },
            deactivated: function () {
            console.log('component deactivated!');
        },
        activated: function () {
            console.log('component activated');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'show': this.show,
            }
            console.log(this.$el);
            console.log(state);
            this.methodsFun();
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'show': this.show,
            }
            console.log(this.$el);
            console.log(state);
            this.methodsFun();
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message,
                'show': this.show,
            }
            console.log(this.$el);
            console.log(state);
            this.methodsFun();
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change';
            this.methodsFun();
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change2';
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        methods: {
          methodsFun: function(){
              console.log(33);
          }
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'my-components': child
        }
    });
</script>
</html>

首先来梳理一下结构：
1.我们创建了一个Vue根实例命名为app，将其挂载到页面id为app的dom元素上。
2.局部注册的一个组件child并在根实例中将其注册使其可以在根实例的作用域中使用。
3.将子组件用包裹，为接下来的测试作准备。
在谷歌浏览器打开开发者工具，开始测试！

create 和 mounted 相关

在这里插入图片描述
根据测试结果，可以看出

1.beforeCreate执行时：data和el均未初始化，值为undefined

2.created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到app.message的值，但Vue 实例使用的根 DOM 元素el还未初始化
3.beforeMount执行时：data和el均已经初始化，但从{{message}}等现象可以看出此时el并没有渲染进数据，el的值为“虚拟”的元素节点
4.mounted执行时：此时el已经渲染完成并挂载到实例上

activated 和 destroyed相关

在前面的测试图中，我们发现了activated周期钩子已经被触发，这是因为子组件my-components被包裹，随el的挂载触发。
现在我们将此组件停用进行测试：由于子组件具有一个v-if指令v-if=“show”，因此我们可以通过将show的值置为false将其销毁。
控制台输入 app.show = false;测试结果如下：

在这里插入图片描述
由于在这里我们修改了data的值，所以会触发beforeUpdate和updated钩子，这里先不讨论这一组钩子，我们看到deactivated钩子已经触发，表示已经停用，符合预期结果。