Vue中实例对象的生命周期详解及细节应用

晴 微风 温度 12-26°C

在JS中我们想要使用Vue框架进行开发则必须要先实例化出一个Vue对象,那么今天我们就来讲讲
这个实例化对象的生命周期 以及 它的钩子函数

首先我们看下 生命周期图
https://cn.vuejs.org/images/lifecycle.png
以及 我个人学习总结的 执行顺序 与 执行条件判断规则

• 1. new Vue();
• 2. beforeCreate(){} 该函数在vue对象初始化前执行
• 3. created(){} 该函数在vue对象初始化之后执行,一般应用于 ajax 请求
• 4. 判断 el 是否有值
• 4.5 vm.$mount("#app") 如果 4 不成立 则 判断当前vm是否挂载节点
• 5. 判断 template 是否有值,如果该条属性 有值 则会 覆盖 4 之前的节点绑定; 如果没有值
     (如果 4 && 5 && vm.mount$("#app") 没有挂载任何节点元素时 都不成立 则 不再执行以下内容)
• 6. beforeMount(){}
• 7. mounted(){} 将vm对象 挂载好对应的节点
• 8. beforeUpdate(){} 数据更新前
• 9. update(){} 数据更新之后
     (8,9 应当注意当数据改变时 将会进行判断，修改前数据 与 修改后的数据 如果没有触发虚拟Dom的更新 则不再触发)
• 10. beforeDestory() 即将摧毁
• 11. destoryed(){} 销毁
      (当触发vm.$destroy()时 触发 10,11钩子函数,结果就是清除他与其他实例的链接，解绑>它的全部指令以及事件监听器)

下边是实例子代码区域

                <div id="app">{{a}}</div>
                <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
                <script type="text/javascript">
        let vm = new Vue({
            // el:"#app",
            data:{
                a:1
            },
            //钩子函数（回掉函数）
            //1.    实例化之前回掉的函数
            // 先执行
            beforeCreate(){
                // alert(1);
                //调试代码
                // debugger;
            },
            //2.    实例化之后回掉的函数
            created(){
                // debugger;
      //*           //console.log(div.innerHTML);// 我的输出不出来
            },
            //3.    el判断
            // el:"#app",

            //5.    
            beforeMount(){
                // alert(2);
                alert(666);
            },
            // 6.   挂载好了，可以操作dom元素
            mounted(){
                alert(888);
                // console.log(div.innerHTML);//报错
            },
            // 7.   数据更新之前
            beforeUpdate(){
                alert("数据更新前");
            },
            // 8.   数据更新之后
            updated(){
                alert("数据更新后");
            },
            // 9.   摧毁销毁
            beforeDestroy(){
                alert("即将销毁");
            },
            // 10.  
            destroyed(){
                alert("销毁结束");
            }
            //4.    创建模板
            // template:"<p>a</p>"
        });
            //3.5   用$mount来绑定节点对象
        vm.$mount("#app");
        vm.$destroy();
    </script>