Vue中实例对象的生命周期详解及细节应用
晴 微风 温度 12-26°C
在JS中我们想要使用Vue框架进行开发则必须要先实例化出一个Vue对象,那么今天我们就来讲讲
这个实例化对象的生命周期 以及 它的钩子函数
首先我们看下 生命周期图
https://cn.vuejs.org/images/lifecycle.png
以及 我个人学习总结的 执行顺序 与 执行条件判断规则
- new Vue();
- beforeCreate(){} 该函数在vue对象初始化前执行
- created(){} 该函数在vue对象初始化之后执行,一般应用于 ajax 请求
- 判断 el 是否有值
- 4.5 vm.$mount("#app") 如果 4 不成立 则 判断当前vm是否挂载节点
- 判断 template 是否有值,如果该条属性 有值 则会 覆盖 4 之前的节点绑定; 如果没有值
(如果 4 && 5 && vm.mount$("#app") 没有挂载任何节点元素时 都不成立 则 不再执行以下内容)
- beforeMount(){}
- mounted(){} 将vm对象 挂载好对应的节点
- beforeUpdate(){} 数据更新前
- update(){} 数据更新之后
(8,9 应当注意当数据改变时 将会进行判断，修改前数据 与 修改后的数据 如果没有触发虚拟Dom的更新 则不再触发)
- beforeDestory() 即将摧毁
- 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>
