vue学习笔记---2.vue.js生命周期

最新推荐文章于 2024-03-15 09:32:32 发布

多多Ms

最新推荐文章于 2024-03-15 09:32:32 发布

阅读量183

点赞数

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

本文链接：https://blog.csdn.net/qq_41667885/article/details/104708216

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

根据官方api生命周期的图示如下:
总共分为8个生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
update
beforeDestroy
destroyed

在这里插入图片描述

在这里插入图片描述
在实例中可具体解释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期</title>
</head>
<body>
    <div id="app">
        <p id="myp" v-text="msg"></p>
        <input type="button" value="click" @click="change">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        //这是vue生命周期的第一个函数,在执行这个方法的时候，vue实例还没有创建，所以此时拿不到data或者methods里面的信息
        beforeCreate:function(){
            console.log("-------beforeCreate")
			//此时实例还没创建,date拿不到以下方法会报错
            /*console.log(this.msg);
            this.show();*/
        },
        //这是vue生命周期的第二个函数，该方法是vue实例已经创建完毕，所以此时可以获取data或者methods中的信息
        created:function(){
            console.log("------created")
            console.log(this.msg);
            this.show();
        },
        //这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
        beforeMount:function(){
            console.log("-------beforeMount")
            console.log(document.getElementById("myp").innerText);
        },
        //这是生命周期的第四个函数，表示模板已经渲染到页面中了
        //当mounted方法执行完毕之后，则表示vue实例彻底创建好了(data、methods、页面模板已经到了页面)，此时vue实例就在内存中一动不动了
        mounted:function(){
            console.log("-------mounted")
            console.log(document.getElementById("myp").innerText);
        },
        //当data中的数据发生变化之后，在虚拟dom更新之前调用，此时不可以从页面获取更新之后的信息
        beforeUpdate:function(){
            console.log("-------beforeUpdate")
            console.log(document.getElementById("myp").innerText);
        },
        //当data中的数据发生变化之后，虚拟dom更新之后调用，此时可以从页面获取更新之后的信息了
        updated:function(){
            console.log("-------updated")
            console.log(document.getElementById("myp").innerText);
        },
        //vue实例销毁之前做的事情
        beforeDestroy:function(){

        },
        //vue实例销毁
        destroyed:function(){

        },
        data:{
            msg:"这是一段信息"
        },
        methods: {
            show: function () {
                console.log("show方法调用了")
            },
            change:function(){
                this.msg = "消息改变了"
            }
        },
        
    })
	//当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中,假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载
    vm.$mount("#app")
</script>


</html>