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

---

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钩子函数,结果就是清除他与其他实例的链接，解绑>它的全部指令以及事件监听器)

---

下边是实例子代码区域

                
{{a}}