VUE生命周期

</!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="utf-8">
    <title></title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
        
    </style>
</head>
<body>
    <!-- 
        Vue生命周期
        生命周期1：创建阶段
        1.new Vue()：执行代码var vm=new Vue({})，表示创建一个Vue对象(实例)
        2.init(Event&Lifecycle)：执行完以上代码后步入udoa对象初始化的前期阶段，表示通过以上代码我们创建了Vuejs对象，此时，再新建的对象身上，巨鳖了一些生命周期相关的函数（生命周期的钩子函数）和默认的时间，但是其他的相关的组件还没有被创建（data、methods、filter 等等都没有被创建出来）。
            执行 Init（Events&Lifecycle）之后，钩子函数都被创建出来，马上调用生命周期函数beforeCreate，在该函数执行的时候，我们最常使用的组件 data 和methods 等，都还没有被创建出来
        3.Init(injections&reactivity):
        该阶段是对象初始化的后期阶段。执行Init(injections&reactivity)的方式是调用生命周期函数 created。在该函数中，data 和 methods 都已经被初始化好了
            也就是说，如果要使用 methods 中的方法，或者是操作 data 中的数据，最早可以在 created 方法中来进行操作
        4.Init 对象初始化阶段执行完毕后，通过对元素以及模板进行判断，系统开始编辑模板，将 Vue 代码中的指令进行执行，然后在内存中生成一个编辑好的模板字符串，最终将该模板字符串渲染为内存中的DOM。
            但是此时集锦只是在内存中渲染好了模板，并没有将模板挂载到页面中去。该阶段执行完毕后，执行 beforeMount 方法
        5.Create vm：该阶段是将内存中编译好的模板，替换到浏览器的页面中。该阶段执行完毕后，执行 mounted 方法。只要执行完了 mounted方法，就表示整个 Vue对象已经初始化完毕了，此时正式脱离创建阶段进入到运行阶段。如果要通过某些插件操作页面上的 DOM 节点，最早是要在 mounted 中进行。
    
        生命周期 2：对象运行阶段
        6.Virtual DOM:
        该阶段会根据data中的最新数据，重新渲染出一份最新的DOM树，当最新的内存 DOM 树被更新了之后，会把最新的DOM树重新渲染到页面中去，这时候就完成了使用模型 Model 去渲染视图View 的过程
            该阶段的执行会使用到两个函数beforeUpdate和updated,这两个函数会根据 data 数据的变化，可重复的执行多次
            当beforeUpdate方法执行的时候，页面中的显示还是以前的数据，但是data中保存的是更新后的新数据，页面此时还没有和最新的数据保持同步。
            updated函数执行的时候，页面和data数据已经保持同步了，都是最新的数据了
        生命周期 3：对象销毁阶段
        7.Teardown（拆卸），该阶段为对象销毁的阶段，当对象实例运行完毕后，如果达到了对象销毁的条件，执行beforDestroy函数，该函数的执行正式标志着对象从运行阶段进入到了销毁的阶段。
            当beforDestroy函数执行的时候，对象身上所有的组件data、methods、filter、directive等组件都还处于可用状态（因为对象只是步入到了销毁的阶段，还没有销毁），该函数执行完毕后，对象正式销毁。
        8.Destroyed:该阶段为对象销毁后的阶段。该阶段会执行destroyed函数，当该函数执行的时候，对象已经被销毁了，里面的data、methods等相应的组件也不能使用了。
            以上生命周期中使用的所有的函数，就是Vuejs生命周期中最重要的钩子函数。
        Vuejs生命周期中的钩子函数函数解析
        beforeCreate、created
        beforeMount、mounted
        beforeUpdate、updated
        beforeDestroy、destroyed
-->
    <div id="app">
        <p id="msg">{{str1}}</p>

        请输入信息：<input type="text" v-model="str1">
    </div>


    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                str1:"aaa",
            },
            methods:{
                showInfo(){
                    alert(this.str1+"showInfo methods");
                }
            },
            //vuejs生命周期中第一个钩子函数，表示再实例在完全被创建之前，会执行该函数
            //注意：beforeCreate函数执行的时候，data和methods中的数据还没有被初始化出来
            beforeCreate(){
                //弹出结果是undifind,表示data中的函数没有被初始化
                // alert(this.str1);
                //结果：没有执行该函数，表示methods中的函数没有被初始化
                // this.showInfo();
            },
            //data和methods中的数据已经被初始化
            //注意：此时还没有编辑模板
            //如果需要使用data和methods中的方法，最早可以在created中使用
            created(){
                //弹出结果是aaa,表示data中的函数没有被初始化
                // alert(this.str1);
                //结果：执行了该函数，表示methods中的函数没有被初始化
                // this.showInfo();
            },
            //该函数的执行，表示模板已经再内存中编辑成功了，但是还没有将模板渲染到页面中
            beforeMount(){
                // var msg=document.getElementById("msg").innerHTML;
                //弹出结果是{{str1}}，页面还没有变成aaa
                // alert(msg);
            },
            //该函数表示内存中的模板。已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
            //mounted函数是Vuejs对象创建期间的最后一个生命周期函数，当我们执行完mounted方法之表示实例已经被完全创建好了
            mounted(){
                // var msg=document.getElementById("msg").innerHTML;
                //弹出的结果是aaa
                // alert(msg);
            },
            //以下测试对象运行中的两个函数
            //在更新数据前，执行beforeUpdate函数
            //执行改函数的时候页面中显示的还是上一次的旧数据，此时data中的数据是最新的，页面尚未和最新的data中的数据保持同步
            beforeUpdate(){
                // var msg=document.getElementById("msg").innerHTML;
                //页面从aaa修改为aaa1的时候，弹出的信息是aaa
                // alert(msg);
            },
            //执行该函数的时候，页面和data中的数据保持一致了
            updated(){
                var msg=document.getElementById("msg").innerHTML;
                //页面从aaa修改为aaa1的时候，弹出的信息是aaa1
                alert(msg);
            },
            //执行该函数说明对象处于准备销毁阶段，对象中的组件再此函数中是仍然可以使用的
            beforeDestroy(){

            },
            //执行该函数说明对象已经销毁完毕了，对象中的组件(data,methods)随着对象销毁也不能使用了
            destroyed(){

            }



        })
    </script>
</body>
</html>
相关推荐
