Vue生命周期：挂载阶段，更新阶段，销毁阶段

Vue生命周期三大阶段 概述

第一个大阶段 ： 挂载阶段 (进入页面阶段)
第二个大阶段 ： 更新阶段 (数据发生变化)
第三个大阶段 ： 销毁阶段 (页面关闭)

第一个大阶段 ： 挂载阶段 (4个钩子)

第 1 个小阶段 ： 数据初始化 ==> msg ： 测试信息

• beforeCreate()
• 数据响应式之前调用
• 特点 ： 无法获取到数据和事件

---

• created() (★★★★★) 【created：重在操作数据，mounted：中在操作DOM。】
• 数据响应式之后调用
• 特点 ： 可以获取数据和事件
  场景 ：
  1.发送 ajax
  2.操作 data
  3.操作本地数据 (操作数据)

第 2 个小阶段 ： 找模板

{{ msg }}
询问 有没有 el配置项 ==> 有 => 继续下一步
==> 没有 => vm.$mount('#app') => 继续下一步
询问 有没有 template 配置项 ==> 没有 => el 的 outerHTML 作为模板进行编译 【浏览器不认识v-xxx、@等，vue要编译成浏览器认识的标记。】
==> 有 => 将 template 的值进行编译
目的 ： 找模板
结论 ： template优先级 > el

第 3 个小阶段 ： DOM 渲染 ==>

测试信息
beforeMount()
DOM 渲染之前调用
特点 ：

mounted() (★★★★)
DOM 渲染之后调用
特点 ：
测试信息
场景 ：
1.发送 ajax
2.操作 DOM

第二个大阶段 ： 更新阶段 (2个钩子)
beforeUpdate()
数据更新之前
测试信息

updated()
数据更新之后
测试信息123

第三个大阶段 ： 销毁卸载阶段 (2个钩子)
beforeDestroy()
销毁之前
可以 清除开发人员自己添加的定时器等

destroyed()
销毁之后

控制台中，使用$destroy()模拟销毁阶段。

http://www.manongjc.com/detail/15-fkkvimdchdxpeto.html