VUE学习：vue基础02——VUE生命周期函数

最新推荐文章于 2024-06-28 11:31:39 发布

北凉冬

最新推荐文章于 2024-06-28 11:31:39 发布

阅读量142

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/116949627

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础02——VUE生命周期函数

VUE学习：vue基础02——VUE生命周期函数

前言
VUE
- VUE生命周期函数

前言

本文学习vue基础的生命周期函数。

提示：以下是本篇文章正文内容，下面案例可供参考

VUE

VUE生命周期函数

vue生命周期：表示vue从创建到运行再到结束的这期间，发生的各种事件和状态统称为生命周期。

声明周期钩子和声明周期函数是相同的意思，只是叫法上不同。他们都包含声明周期函数的事件和处理。都是自动触发的。

声明周期实例

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <button type="button" v-on:click="change">按钮</button>
        <button type="button" @click="destory">销毁实例</button>
    </div>
</body>

<script>
    let info="sadasdasdasd";
    new Vue({
        el: "#app",
        data: {
            msg: "你好，世界",
            info
        },
        methods: {
            show(){
                console.log("我是vue实例methods中定义的函数");
            },
            change(){
                this.msg="你被我改变了";
            },
            destory:function(){
                this.$destory;
                this.$destory();
            }

        },
        beforeCreate: function () {
        },
        created(){
        },
        beforeMount(){
        },
        mounted(){
        },
        beforeUpdate(){
        },
        
        updated(){
        },
        activated(){
        },
        deactivated(){
        },
        beforeDestroy(){
        },
        destroyed(){
        }
    });
</script>

生命周期函数三大类

1.创建期间函数

beforeCreate：实例创建之前，此时此时只有el的值被挂载，data中和methods中绑定的数据和方法都不可用

beforeCreate: function () {
    console.log("beforeCreate函数：data中的值是：" + this.msg);
    console.log(this.show);
    console.log("beforeCreate函数执行完毕！");

},

created：实例化vue后自动调用，此时data和methods中绑定的数据和方法正常使用

created(){
    console.log("created函数：data的值是："+this.msg);
    console.log(this.show);
    console.log("created函数执行完毕！");

},

beforeMount：模板已经编译，组件已经加载，但是未渲染到页面

beforeMount(){
    console.log("beforeMount");
},

mounted：模板已经渲染到页面(该函数执行表示vue实例真正初始化完成)

mounted(){
    console.log("mounted");
},

2.运行期间函数

beforeUpdate：状态更新之前，此时data中的值已经更新，但是页面未重新渲染，页面上调用data的位置的值还未更新

beforeUpdate(){
    console.log("beforeUpdate函数：data中的值是："+this.msg);
    console.log(`页面中的值是${document.querySelector("h3").innerText}`);
}

updated：状态更新之后，此时data中的值已经更新，页面渲染完毕，此时data中的值和页面上显示的data的值相同。

updated(){
    console.log("updated函数，data中的值是："+this.msg);
    console.log(`页面中的值是${document.querySelector("h3").innerText}`);
},

组件的激活和停用

activated(){
    console.log("keep-alive组件激活时调用");
},
deactivated(){
    console.log("keep-alive组件被停用");
},

3.销毁期间函数

beforeDestroy：实例销毁之前，此时实例仍然可用。（执行销毁和彻底销毁之间的这个状态）。

beforeDestroy(){
    console.log("实例被销毁之前，此时实例正常可用");
    console.log(this.msg);
},

destroyed：实例销毁之后触发。

destroyed(){
    console.log("实例被调用后调用，此时所有绑定的事件和数据都会被移除");
}

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础02——VUE生命周期函数

提示：本文为VUE栏目：VUE学习：vue基础02——VUE生命周期函数VUE学习：vue基础02——VUE生命周期函数前言VUEVUE生命周期函数声明周期实例生命周期函数三大类1.创建期间函数2.运行期间函数组件的激活和停用3.销毁期间函数前言本文学习vue基础的生命周期函数。提示：以下是本篇文章正文内容，下面案例可供参考VUEVUE生命周期函数vue生命周期：表示vue从创建到运行再到结束的这期间，发生的各种事件和状态统称为生命周期。声明周期钩子和声明周期函数是相同的意思，只是叫法
复制链接

扫一扫

专栏目录