[Vue] vue的生命周期

是什么？ 

生命周期就是每一个vue实例从创建到销毁的过程。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

①生命周期又名：生命周期回调函数、生命周期钩子、生命周期函数。

②生命周期函数的名字不可更改，但函数的具体内容可以根据需求编写。

③生命周期函数中的this指向是vm 或 组件实例对象。

vue生命周期流程图：

1.初始化阶段：       

①new Vue() – Vue实例化(组件也是一个小的Vue实例)

②Init Events & Lifecycle – 初始化事件和生命周期函数

③beforeCreate – 生命周期钩子函数被执行

④Init injections&reactivity – Vue内部添加data和methods等

⑤created – 生命周期钩子函数被执行, 实例创建

⑥接下来是编译模板阶段：Has el option?

⑦ 是否有el选项 – 检查要挂到哪里

        没有. 调用$mount(el)方法

        有, 继续检查template选项 Has template option?

                有，将Template模板转换成render函数

                没有，直接将获取到的el编译成Template模板，再转换为render函数

【此阶段只执行一次】

2.挂载阶段：

①beforeMount – 生命周期钩子函数被执行

②Create  vm… – 把虚拟DOM和渲染的数据一并挂到真实DOM上

③真实DOM挂载完毕

④mounted – 生命周期钩子函数被执行

【此阶段只执行一次】

3.更新阶段：

①当data里数据改变, 更新DOM之前,触发beforeUpdate函数

②beforeUpdate – 生命周期钩子函数被执行（数据是新的页面是旧的）

③Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

④updated – 生命周期钩子函数被执行

⑤当有data数据改变 – 重复这个循环

【此阶段可以重复执行】

4.销毁阶段：

①当$destroy()被调用 – 比如组件DOM被移除(例v-if)

②beforeDestroy – 生命周期钩子函数被执行

③拆卸数据监视器、子组件和事件侦听器

④实例销毁后, 最后触发一个钩子函数

⑤destroyed – 生命周期钩子函数被执行

【该阶段的beforeDestroy与destroyed 生命周期钩子函数必须被主动调用 】

【调用方法：vue实例.$destroy()】