共计 1522 个字符，预计需要花费 4 分钟才能阅读完成。
Vue 生命周期详解
Vue 的生命周期，指的是 Vue 实列中创立产生到被销毁的整个过程所经验的状态
Vue 共有 11 个生命状态：8 个常见和 3 个后减少的
Vue 生命周期共有 8 个钩子函数，罕用的有 4 个
第一阶段：初始阶段
1. 创立 Vue 实列，此时只是创立还没有开始，生命处于胚芽状态
1. 生命处于胚芽状态
2. 初始化 Vue 实列及外部的很多事件，筹备中的胚芽的活性蛋白开始沉闷 (筹备工作)，生命周期就这样开始了
2. 筹备中的胚芽的活性蛋白开始沉闷 (筹备工作)，生命周期就这样开始了
诞生了 — 钩子函数 ：beforeCreate
3. 初始化，将 data 中的数据挂载到 Vue 实列上，并实现双向绑定（数据劫持），当初能够拜访到 Vue 外面的数据（Vue 有了数据）
3. 胚芽冲破细胞壁，通过缝隙（[Object.defineProperty]），开始发芽（数据）
诞生了 — 钩子函数 ：created, 这个阶段不操作元素和节点，仅仅操作数据，通常咱们会在这个阶段调用办法，发送申请，将申请回来的数据放到 data 定义的数据中。
4. 查看是否有 el
4. 嫩芽向上成长，查看此地的阳光（el）是否适合
5. 如果没有 el, 期待 Vue 实列调用 $mount 来传入 el 参数
5. 如果阳光不好，那就另寻他处（调用 $mount），但通常状况下不须要另寻他处（调用 $mount）
6. 有 el 判断是不是传递 template 参数
6. 嫩芽发现有了阳光，开始探测此地土地是否肥沃（template 参数），但通常土壤并不肥沃（template 参数）
7. 如果有 template 参数，将 template 参数编译成渲染函数，联合 html 和 js 创立整体构造，如果没有也不影响，将 el 参数的 outerhtml 编译成一个整体
7. 嫩芽通过探查做出了判断，如果肥沃（template 参数）致力排汇营养能抽出两片嫩芽（，联合 html 和 js 创立整体构造），如果一般能抽出一片嫩芽（将 el 参数的 outerHTML 编译成一个整体）
诞生了 — 钩子函数 ：beforeMount
8. 搭建好的构造，放在 Vue 实例的 $el 属性中，并用这个构造替换掉 el 参数
8. 新成长的叶子 替换掉旧的叶子 (替换掉 el 参数)，嫩芽成长为一朵小花
诞生了 — 钩子函数 ：mounted 挂载结束的时候调用，页面中的标签构造加载实现了。
此时，在这个阶段能够操作页面中的 DOM 标签了。
留神：这个钩子函数在整个生命周期中只会调用一次。
第二阶段：Vue 的更新阶段 – 两个小阶段循环执行
9. 在页面显示最终内容，这里造成一个死循环，期待数据的变动
9. 小花一直的成长，新叶一直代替旧叶（死循环），期待开花的那天（期待数据的变动）
诞生了 — 钩子函数 ：beforeUpdate
10. 数据产生扭转，从新渲染页面的构造和内容，并依据更改内容晓得那局部内容
10. 到了开花的这天（数据产生扭转），通过传粉笼罩（从新渲染页面的构造和内容）雌蕊取得信息素判断传得粉，从而判断是否后果（更改内容晓得那局部内容）
诞生了 — 钩子函数 ：updated 依据新批改的数据从新渲染完页面后调用。能够获取到新数据，能够获取到新的 DOM。
第三阶段：Vue 的销毁阶段
11. 期待 vm.$destroy 办法调用
11. 果子接完了，期待进入秋天（期待 vm.$destroy 办法调用）
诞生了 — 钩子函数 ：beforeDestroy 实例销毁之前调用。在这一步，实例依然齐全可用。
12. 调用后卸载 vue 中所有的监听：包含数据监听，页面构造监听、其余事件监听。。。
12. 进入秋天，叶子全副脱落，开始缓缓的凋零（卸载 vue 中所有的监听）
诞生了 — 钩子函数 ：destroyed Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
13.Vue 实例销毁