Vue生命周期

 

 

 

<div id="app">
    <h3 id="h3">{{msg}}</h3>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            msg: 'ok'
        },
        methods: {
            show() {
                console.log('执行了show方法')
            }
        },

        // ----------------------------------初始化挂载过程（只进行一次）---------------------------------------

        // 实例的基本事件和生命周期函数被初始化了，但是实例没有完全初始化
        beforeCreate(){
            // 此时data数据和method没有完成初始化，不可调用
            //console.log(this.msg) // undefined
            //this.show()//报错
        },

        // ----------------------
        // beforeCreate和created，继续初始化实例，初始化出data数据和method
        // ----------------------

        // 实例完成初始化
        created(){
            // 此时data数据和method都已初始化，可以调用
            // 若要操作data和method，最早在此函数中可进行
            console.log(this.msg) // ok
            this.show() // 执行了show方法
        },

        // ----------------------
        /* created与beforeMount之间，编译el指向的标签或者template模板,
        将（数据data与模板）结合，在（内存中）生成虚拟dom
        此刻dom还在内存中，未更新到真实dom树中*/
        // ----------------------

        // 不要在beforeMount之前去操作dom，因为编译出的dom还未渲染更新
        beforeMount(){
            // 内存中dom并未更新到页面去，是无法获取更新后的dom，获取的是页面上的（模板）<h3 id="h3">{{msg}}</h3>
            // 所以打印如下，还是{{msg}}
            console.log(document.getElementsByTagName("h3").innerText) // {{msg}}
        },

        // ----------------------
        // beforeMount与mounted之间，将内存中编译好的模板，替换掉el所指向的模板，页面渲染完成
        // ----------------------

        // 挂载dom
        mounted(){
            // 虚拟内存的dom已挂载，此刻可以获取真正由Vue编译好的dom
            console.log(document.getElementById("h3").innerText) // ok
        },


        // ----------------------------------更新过程(进行多次，只要数据修改就进行)---------------------------------------

        // 当data数据被修改后，beforeUpdate先调用，但此时并未结合更改的数据生成新的虚拟dom，
        // 更没有被挂载，页面中的数据还是之前的
        beforeUpdate(){
            // 数据是最新的
            console.log(this.msg) // no
            // 页面未更新，还是ok
            console.log(document.getElementById("h3").innerText) //ok
        },

        // ----------------------
        // beforeUpdate和Update之间，生成新的虚拟dom,patch并挂载到页面中
        // ----------------------

        // 此时新的虚拟dom已挂载，内存data数据与页面就同步了
        updated(){
　　　　　　　　// 真实dom页面数据与data一致
            console.log(this.msg) // no
            console.log(document.getElementById("h3").innerText) // on
        },

        // ----------------------------------卸载过程（进行一次）---------------------------------------
        // 调用vm.destroy(),先调用beforeDestroy
        beforeDestroy(){

        },

        // vm实例完全卸载，真实dom的页面还在，但是vm任何数据方法都已不能调用
        Destroyed(){

        }

        // 总结,created最早可以获取data，
        // method; mounted最早可以获取dom,
        // beforeUpdate时data更新，虚拟和真实dom未更新
        // updated,真实dom已更新，数据保持同步
    })