vue.js--生命周期函数

什么是生命周期

从vue实例创建,运行到销毁期间,总是伴随着各种各样的事件,这些事件统称为生命周期.

也叫做钩子函数等同于生命周期函数=生命周期事件

生命周期函数的分类
1.创建期间的生命周期函数(挂载)
1.beforeCreate
2.created
3.beforeMount
4.mounted
2.运行期的生命周期函数(更新)
1.deforeUpdate
2.updated
3.销毁期的生命周期函数
1.beforeDestroy
2.destroyed

Vue实例的产生过程

1.beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用.
2.created 在实例创建完成后被立即调用
3.beforeMount 在挂载开始之前被调用
4.mountedel 被新创建的vm.$el替换,并股挂载到实例上去之后调用该钩子
⑤beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前
⑥updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
​⑦beforeDestroy 实例销毁之前调用。
​⑧destroyed 实例销毁后调用。

小案例

 <div id="app">
        <h3 id="h3">{{msg}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('执行了show方法')
                }
            },
            beforeCreate() { //这是我们遇到第一个生命周期函数
                // console.log(this.msg);
                // this.show()
                //在beforeCreate生命周期函数执行的时候,data和methods中,数据还没有初始化
                //控制台不会输出
            },
            created() {
                // console.log(this.msg);
                // this.show()
                //如果要调用methods中的方法,或者操作data中的数据,最早在created中操作
            },
            beforeMount() { //这是遇到的第三个生命周期函数 ,表示模板已经在内存中编译完成,尚未渲染到页面中
                //     console.log(document.getElementById('h3').innerText)
            },
            mounted() { //这是遇到的第四个生命周期函数 表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面
                console.log(document.getElementById('h3').innerText)
                // 注意,mounted是实例创建期间后的最后一个生命周期函数,当执行完mounted就表示,实例已经被完全创建好了,
                //  此时如果没有其他操作的话,这个实例就静静的,躺在内存中.
            },
        });
    </script>