Vue生命周期详解

Vue的生命周期，指的是Vue实列中创建产生到被销毁的整个过程所经历的状态

Vue共有11个生命状态：8个常见和3个后增加的

Vue生命周期共有8个钩子函数，常用的有4个

vue生命周期具体图示.png

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标签了。
注意：这个钩子函数在整个生命周期中只会调用一次。

9.在页面显示最终内容，这里形成一个死循环，等待数据的变化

9.小花不断的生长，新叶不断替代旧叶（死循环），等待开花的那天（等待数据的变化）
诞生了 — 钩子函数：beforeUpdate

10.数据发生改变，重新渲染页面的结构和内容，并根据更改内容知道那部分内容

10.到了开花的这天（数据发生改变），通过传粉覆盖（重新渲染页面的结构和内容）雌蕊获得信息素判断传得粉，从而判断是否结果（更改内容知道那部分内容）
诞生了 — 钩子函数：updated 根据新修改的数据重新渲染完页面后调用。可以获取到新数据，可以获取到新的DOM。

11.等待vm.$destroy方法调用

11.果子接完了，等待进入秋天（等待vm.$destroy方法调用）
诞生了 — 钩子函数：beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。

12.调用后卸载vue中所有的监听：包括数据监听，页面结构监听、其他事件监听。。。

12.进入秋天，叶子全部脱落，开始慢慢的凋零（卸载vue中所有的监听）
诞生了 — 钩子函数：destroyed Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

13.Vue实例销毁