Vue的生命周期

最新推荐文章于 2024-05-07 10:41:48 发布

Kill206

最新推荐文章于 2024-05-07 10:41:48 发布

阅读量251

点赞数 1

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/weixin_68286174/article/details/126858894

版权

一、什么是Vue的生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。

二、Vue流程图

三、Vue生命周期的步骤

1、beforeCreate（创建前）

在创建前先进行实例初始化，初始化生命周期、事件，但数据代理还未开始。此时不能获得DOM节点，无法通过vm访问到data中的数据、methods中的方法。

2、created（创建后）

此时对象data已经存在，此时可以通过vm访问到data中的数据、methods中配置的方法。

3、beforeMount（挂载前）

created --> beforeMount阶段Vue开始进行模板解析，在内存中生成虚拟DOM，页面还不能显示解析好的内容；当处在beforeMount（挂载前）时，此时页面呈现的时未经Vue编译的DOM结构，所有对DOM的操作最终都不会奏效。

4、mounted（挂载后）

该阶段页面呈现的是经过Vue编译的DOM，此时对DOM的操作均有效。至此初始化过程结束，一般在此时进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。

5、beforeUpdate（更新前）

当 data 变化时，会触发beforeUpdate方法，此时数据是新的，但页面是旧的，即：页面尚未和数据保持。

beforeUpdate（更新前）-->updated（更新后）期间会根据新数据生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model——>View的更新。

6、updated（更新后）

当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。

7、beforeDestory（销毁前）

vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁工作，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。组件销毁之前调用，在这一步，实例仍然完全可用。

8、destoryed（销毁后）

在实例销毁之后调用，调用后，所有的事件监听器均会被移除，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用。

四、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="root">
    <!--    <h2>当前n的值是：<span v-text="n"></span></h2>-->
    <!--    <button @click="add">点我n++</button>-->
    <!--    <button @click="bye">点击销毁vm</button>-->
</div>

<script src="./js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    let vm = new Vue({
        el: '#root',
        template: `
          <div>
          <h2>当前n的值是：<span v-text="n"></span></h2>
          <button @click="add">点我n++</button>
          <button @click="bye">点击销毁vm</button>
          </div>`,
        data() {
            return {
                n: 1
            }
        }, methods: {
            add() {
                console.log("执行了Add函数");
                this.n++;
            },
            bye() {
                console.log("执行了销毁函数");
                this.$destroy();
            }
        }, watch: {
            n() {
                console.log("n变了");
            }
        },
        beforeCreate() {
            console.log("beforeCreate");
            // console.log(this.n);
        },
        created() {
            console.log("created");
            // console.log(this.n);
        }, 
        beforeMount() {
            console.log("beforeMount");
        },
        mounted(){
            console.log("mounted");
        },
        beforeUpdate(){
            console.log("beforeUpdate");
        },
        updated(){
            console.log("updated");
        },
        beforeDestroy(){
            console.log("beforeDestroy");
        },
        destroyed(){
            console.log("destroyed");
        }
    });
</script>
</body>
</html>

结果：

1、首次加载