关于vue.js: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标签了。
留神：这个钩子函数在整个生命周期中只会调用一次。

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

9.小花一直的成长，新叶一直代替旧叶（死循环），期待开花的那天（期待数据的变动）
诞生了 — 钩子函数：beforeUpdate

10.数据产生扭转，从新渲染页面的构造和内容，并依据更改内容晓得那局部内容

10.到了开花的这天（数据产生扭转），通过传粉笼罩（从新渲染页面的构造和内容）雌蕊取得信息素判断传得粉，从而判断是否后果（更改内容晓得那局部内容）
诞生了 — 钩子函数：updated 依据新批改的数据从新渲染完页面后调用。能够获取到新数据，能够获取到新的DOM。

11.期待vm.$destroy办法调用

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

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

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

13.Vue实例销毁