谷粒商城35 - 前端基础 VUE-生命周期与钩子函数

生命周期

官方文档关于生命周期的介绍 https://cn.vuejs.org/v2/guide/instance.html 生命周期的完整图片: 在不同的生命周期中,会触发不同的钩子函数

生命周期与钩子函数的代码示例

使用如下的代码 ,进行生命周期id示例

    
        {{num}}
        赞！
        {{name}}，有{{num}}个人点赞
    

    
    
    
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("=========beforeCreate=============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模板未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("=========created=============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模板已加载：" + document.getElementById("num"));
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("=========beforeMount=============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("=========mounted=============");
                console.log("html模板已渲染：" + document.getElementById("num").innerText);
            },
            beforeUpdate() {
                console.log("=========beforeUpdate=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("=========updated=============");
                console.log("数据模型已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        });
    

页面刚加载时 , 控制台打印如下 , 代表在不同的生命周期, 触发了不同的函数 每次点击按钮, 控制台都会打印如下, 代表触发的钩子函数