Vue的生命周期和监听函数(钩子函数)

程序员蛇皮

已于 2024-07-18 16:46:35 修改

阅读量148

点赞数 7

文章标签： vue.js javascript 前端

于 2024-07-18 15:25:34 首次发布

本文链接：https://blog.csdn.net/2301_77647448/article/details/140523548

版权

基本说明

1. Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载

DOM 、渲染 - 更新 - 渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期

2. 钩子函数 ( 监听函数 ): Vue 实例在完整的生命周期过程中 ( 比如设置数据监听、编译模

板、将实例挂载到 DOM 、在数据变化时更新 DOM 等 ), 也会运行叫做生命周期钩子的函

数

3. 钩子函数的作用 就是在某个阶段 , 给程序员一个做某些处理的机会

Vue 实例的生命周期示意 图(官方示意图加注释后如下）

下面我们来编写一段代码来证明vue的生命周期过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的生命周期和监听函数</title>
</head>
<body>
<div id="app">
    <span id="num">{{num}}</span>
    <button @click="num++">赞！</button>
    <h2>{{name}}，有{{num}}次点赞</h2>
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", data: {//数据池
            name: "kristina", num: 0
        },
        methods: {
            show() {
                return this.name;
            }, add() {
                this.num++;
            }
        },
        beforeCreate() {//生命周期函数-创建 vue 实例前
            console.log("=============beforeCreate==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[no]",
                this.name, " ", this.num);
            // console.log("自定义方法是否加载/使用?[no]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 是 否 被 渲 染 ?[no]", document.getElementById("num").innerText);
        },
        created() {//生命周期函数-创建 vue 实例
            console.log("=============created==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[yes]",
                this.name, " ", this.num);
            console.log("自定义方法是否加载/使用?[yes]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 是 否 被 渲 染 ?[no]", document.getElementById("num").innerText);
            //可以发出 Ajax
            //接收返回的数据
            //再次去更新 data 数据池的数据
            //编译内存模板结构
        },
        beforeMount() {//生命周期函数-挂载前
            console.log("=============beforeMount==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[yes]",
                this.name, " ", this.num);
            console.log("自定义方法是否加载/使用?[yes]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 是 否 被 渲 染 ?[no]", document.getElementById("num").innerText);
        },
        mounted() {//生命周期函数-挂载后
            console.log("=============mounted==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[yes]",
                this.name, " ", this.num);
            console.log("自定义方法是否加载/使用?[yes]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 是 否 被 渲 染 ?[yes]", document.getElementById("num").innerText);
        },
        beforeUpdate() {//生命周期函数-数据池数据更新前
            console.log("=============beforeUpdate==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[yes]",
                this.name, " ", this.num);
            console.log("自定义方法是否加载/使用?[yes]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 数 据 是 否 被 更 新 ?[no]", document.getElementById("num").innerText);
            //验证数据==>修正
            // if(this.num < 10 ) {
            // this.num = 8;
            // }
        },
        updated() {//生命周期函数-数据池数据更新后
            console.log("=============updated==========");
            console.log(" 数 据 模 型 / 数 据 池 的 数 据 是 否 加 载 / 使 用 ?[yes]",
                this.name, " ", this.num);
            console.log("自定义方法是否加载/使用?[yes]", this.show());
            console.log(" 用 户 页 面 dom 是 否 加 载 / 使 用 ?[yes]", document.getElementById("num"));
            console.log(" 用 户 页 面 dom 数 据 是 否 被 更 新 ?[yes]", document.getElementById("num").innerText);
        }
    })
</script>
</body>
</html>

当运行该页面时，

可以看到beforeCreate()，created()，beforeMount()，mounted()方法被调用，印证了图中的步骤，那为何beforeUpdate()和update()函数没被调用呢？因为用户页面的dom数据没有被修改，当点击“赞！”按钮时，会触发上面代码的vue对象方法池中的num加1，也就是点赞次数会增加，数据被改动，就会调用beforeUpdate()方法，数据池(data)的数据就会更新，但是还没被渲染到页面上，随后会调用update()方法，将新的数据池(data)数据渲染到dom页面上，结果如下