Vue2 生命周期

原创

BingCola 2022-07-20 06:27:29 博主文章分类：Vue2 ©著作权

文章标签 vue vue-js 生命周期 Vue2 生命周期数据 文章分类 运维

©著作权归作者所有：来自51CTO博客作者BingCola的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

Vue2 生命周期

create 和 mounted
update
destroy
activated

Vue2 生命周期总结
Vue2 父子组件生命周期执行顺序

1. 加载渲染过程
2. 更新过程
3. 销毁过程

Vue3 生命周期

Vue2 生命周期

beforeCreate：创建之前（el、data和message都还是undefined,不可用的）
created：创建完毕（能读取到数据data的值,但是DOM还没生成）
beforeMount：挂载之前（生成DOM,但此时{{ message }}还没有挂载data中的数据）
mounted：挂载完毕（{{ message }}已经成功挂载渲染data的值）
beforeUpdate：更新之前
updated：更新完毕
beforeDestroy：销毁之前
destroyed：销毁完毕（实例与视图的关系解绑，再修改message的值，视图再也不会更新了）
activated：keep-alive 组件激活时调用
deactivated：keep-alive 组件停用时调用

注：

activated 和deactivated 是比较特殊的两个钩子，需要keep-live配合使用
当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created =>mounted =>activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

Vue2 生命周期_生命周期

举例代码：

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

    <script>let app = new Vue({
            el: "#app",
            data: {
                message: 'xia',
            },
            beforeCreate() {
                console.group("1. beforeCreate() =====> 创建之前");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("%c%s", "color:red", "el、data和message都还是undefined,不可用的");
                console.log("-------------------------------------------");
            },
            created() {
                console.group("2. created() =====> 创建完毕");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("%c%s", "color:red", "能读取到数据data的值,但是DOM还没生成");
                console.log("-------------------------------------------");
            },
            beforeMount() {
                console.group("3. beforeMount() =====> 挂载之前");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("%c%s", "color:red", "生成DOM,但此时{{ message }}还没有挂载data中的数据");
                console.log("-------------------------------------------");
            },
            mounted() {
                console.group("4. mounted() =====> 挂载完毕");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("%c%s", "color:red", "{{ message }}已经成功挂载渲染data.name的值：Xia");
                console.log("-------------------------------------------");
            },
            beforeUpdate() {
                console.group("5. beforeUpdate() =====> 更新之前");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("-------------------------------------------");
            },
            updated() {
                console.group("6. beforeUpdate() =====> 更新完毕");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("-------------------------------------------");
            },
            beforeDestroy() {
                console.group("7. beforeDestroy() =====> 销毁之前");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("-------------------------------------------");
            },
            destroyed() {
                console.group("8. beforeDestroy() =====> 销毁完毕");
                console.log("%c%s", "color:red", "el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red", "data   : " + this.$data);
                console.log("%c%s", "color:red", "message: " + this.message);
                console.log("%c%s", "color:red", "实例与视图的关系解绑，再修改message的值，视图再也不会更新了");
                console.log("-------------------------------------------");
            }
        });</script>
</body>

create 和 mounted

beforecreated：Vue 实例的挂载元素$el 和数据对象data 并未初始化
created:完成了 data 数据的初始化，$el没有
beforeMount：完成了 $el 和 data 初始化，但还是挂载在虚拟的 DOM 节点上
mounted：Vue 实例挂载到实际的 DOM 上
.
另外在标红处，我们能发现 $el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了,到后面mounted挂载的时候再把值渲染进去。

Vue2 生命周期_数据_02

update

这里我们在 chrome console里执行以下命令

app.message = 'bing'

下面就能看到data里的值被修改后，将会触发update的操作。

Vue2 生命周期_Vue2 生命周期_03

destroy

这里我们在console里执行下命令对 vue实例进行销毁

app.$destroy();

销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，执行了destroy操作，后续就不再受vue控制了。

Vue2 生命周期_生命周期_04

activated

比较特殊的一个钩子，需要keep-live配合使用

activated:动态组件初始化渲染过程中调用 keep-alive组件激活时调用。
deactivated:动态组件移出过程中调用 keep-alive组件停用时调用。

当引入 keep-alive 的时候，页面第一次进入，钩子的触发顺序 created => mounted => activated，退出时触发 deactivated。当再次进入（前进或者后退）时，只触发activated。

keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

Vue2 生命周期总结

beforecreate: 举个栗子：可以在这加个loading事件
created：在这结束loading，常做一些数据请求和耗时操作，实现函数自执行 (常用)mounted：依赖dom做一些其他的操作，也可以发起后端请求，配合路由钩子做一些事情(常用)beforeDestroy：你确认删除XX吗？
destroyed：当前组件已被删除，清空相关内容

示意图：

Vue2 生命周期_Vue2 生命周期_05