生命周期vue-CSDN博客

本文链接：https://blog.csdn.net/weixin_41549971/article/details/131533333

文章目录

一、生命周期定义
二、生命周期图示
三、生命周期8个阶段
四、生命周期总结
五、activated 和 deactivated
- 1.activated
- 2.deactivated
六、errorCaptured

一、生命周期定义

1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.
2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载
3.又名：生命周期回调函数、生命周期函数、生命周期钩子。
4.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
5.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
6.生命周期函数中的this指向是vm 或组件实例对象。

二、生命周期图示

在这里插入图片描述

三、生命周期8个阶段

1. beforeCreate（创建前）：

在实例初始化之后，数据观测（data observer）和事件配置之前被调用。

2. created（创建后）：

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

3. beforeMount（挂载前）：

在挂载开始之前被调用：相关的render函数首次被调用。

4. mounted（挂载后）：

el被新创建的vm.$ el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。

5. beforeUpdate（更新前）：

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前（这个钩子在服务器端渲染期间不被调用）。

6. updated（更新后）：

由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

7. beforeDestroy（销毁前）：

实例销毁之前调用。在这一步，实例仍然完全可用。

8. destroyed（销毁后）：

实例销毁之后调用。该钩子被调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

以下是一个具有完整生命周期的Vue示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue生命周期</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <button @click="changeTitle">Change Title</button>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                title: 'Vue生命周期'
            },
            methods: {
                changeTitle: function() {
                    this.title = 'Lifecycle of Vue';
                }
            },
            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>

生命周期执行顺序：
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

四、生命周期总结

1.常用的生命周期钩子：
（1）.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
（2）.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
2.关于销毁Vue实例
（1）.销毁后借助Vue开发者工具看不到任何信息。
（2）.销毁后自定义事件会失效，但原生DOM事件依然有效。
（3）.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。