vue实例生命周期 | 易学教程

一：生命周期。
1，从Vue实例的创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
2，生命周期钩子=生命周期函数=生命周期事件

二：主要的生命周期分类：

①创建期间的生命周期函数 ↓
beforeCreate：
实例刚在内存中就被创建出来，此时还没有实例化好data和methods属性。
created：
实例已经在内存中创建成功，此时data和methods已经创建成功，还没有开始编译模板。
beforeMount：
已经完成了模板编译，但是没有挂载到页面中。
mounted：
已经将编译好的模板，挂载到页面指定容器中。

②运行期间的生命周期函数 ↓
beforeUpdate：
状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，因为还没有开始重新渲染DOM节点。
updated：
实例更新完毕以后调用此函数，此时data中的状态值和界面上显示的数据，都已经完成了更新，界面渲染完成。
beforeDestroy：
实例销毁之前调用，在这一步，实例还是可以用的。
destroyed：
实例销毁后调用，调用后，Vue实例指示的所有东西就会被解绑定，所有的事件监听被移除，所有的子实例被销毁。
在这里插入图片描述
例子：

<body>
    <div id="app">
        <input type="button" value="修改msg" @click="msg='No'">
        <h4 id="you">{{msg}}</h4>
    </div>
</body>

<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
//创建实例
var vm=new Vue({
    el:"#app",
    data:{
        msg:'ok'
    },
    methods:{
        show(){
            console.log("执行了show方法")
        }
    },
    beforeCreate(){//这是第一个生命周期函数，表示实例被创建出来
        // console.log(this.msg)
        // this.show()
        //在beforeCreate中data和methods中的数据都还没有被初始化
    },
    created(){//这是第二个生命周期函数；data和methods已经被初始化好了
        console.log(this.msg)
        this.show()
    },
    beforeMount(){//这是第三个生命周期函数
        console.log(document.getElementById("you").innerText)
        // 在beforeMount执行的时候，页面中的元素没有被真正替换，只是之前的模板语法
    },
    mounted(){//这是第四个生命周期函数，内存中的模板已经挂载到页面中，渲染完成
        console.log(document.getElementById("you").innerText)
        // 是实例创建期间的最后一个生命周期函数，执行完mounted就说明vue实例已经创建好了
    },
    // 运行中的两个事件
    beforeUpdata(){//这时候表示页面还没有被更新，但是数据更新了
        console.log("界面上原来的内容："+document.getElementById("you").innerText)
        console.log("data中的msg数据是"+this.msg)
    },
    updataed(){//此时页面和数据已经同步
        console.log("界面上原来的内容："+document.getElementById("you").innerText)
        console.log("data中的msg数据是"+this.msg)
    }
})
</script>

来源：CSDN

作者：weixin_46301474

链接：https://blog.csdn.net/weixin_46301474/article/details/104755191

标签

vue

data