面试重点：生命周期

目录

1.init Event & Lifecycle  

2.beforeCreate(生命周期)

3.init injections & reactivity

4.created(生命周期)

5.Has "el" option? 判断有没有 el 配置项

6. Has 'template' option? 判断有没有 template 配置项

7.beforeMount(生命周期)

8.Create vm.$el and replace 'el' with it 

9.mounted(生命周期)

10.当数据发生变化时

        10.1 beforeUpdate(生命周期)

        10.2 Virtual DOM re-render and patch（虚拟DOM重新渲染和修补）

        10.3 updated(生命周期)

11.当销毁当前实例对象时 when vm.$destroy() is called

        11.1 beforeDestroy(生命周期)

        11.2 Teardown watchers, child components and event listeners(移除所有的监视，子组件和事件监听)

        11.3 destroyed(生命周期)

12.生命周期图示：

---

1.init Event & Lifecycle  

        初始化：事件，生命周期，但数据代理还未开始

2.beforeCreate(生命周期)

        1.数据监测，数据代理创建之前

        2.此时：无法通过vm访问到data中的数据，methods中的方法

3.init injections & reactivity

        初始化：数据检测，数据代理

4.created(生命周期)

        1.数据检测，数据代理创建之后

        2.此时：可以通过vm访问到data中的数据，methods中的配置方法

5.Has "el" option? 判断有没有 el 配置项

        1.如果有 el 配置项：继续向下走

        2.如果没有 el 配置项：when vm.$mount(el) is called  翻译为：当 vm.$mount() 被调用时才继续向下走

6. Has 'template' option? 判断有没有 template 配置项

        1.如果有 template 配置项 ：Compile template into render function 翻译为：编译 template 模板到render 函数中

        2.如果没有 template 配置项： Compile template outerHTML as template 翻译为：

编译 el 外部 HTML 作为模板

        注意：outerHTML 表        示整个 el 区域都是模板，如果时innerHTML则表示 el 内部是模板

注意：5-6 整个流程是 Vue 开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容

7.beforeMount(生命周期)

        1.此时页面呈现的是未经Vue编译的DOM结构

        2.所有对 DOM 的操作，最终都不奏效

        注意：是最终都不奏效，当下还是奏效的，最终的结果是不奏效的

8.Create vm.$el and replace 'el' with it 

        将内存中的 虚拟DOM 转为 真实DOM 插入页面

9.mounted(生命周期)

        1.此时页面中呈现的是经过 Vue 编译的DOM

        2.对DOM 的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件，等初始化操作

10.当数据发生变化时

        10.1 beforeUpdate(生命周期)

                此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步

        10.2 Virtual DOM re-render and patch（虚拟DOM重新渲染和修补）

                根据新数据，生成新的虚拟DOM,随后与旧的虚拟 DOM 进行比较，最终完成页面更新，即：完成了Model => View 的更新

        10.3 updated(生命周期)

                此时：数据是新的，页面也是新的，即：页面和数据保持同步

11.当销毁当前实例对象时 when vm.$destroy() is called

                当 vm.$destruy() 被调用时就时销毁当前实例对象

        11.1 beforeDestroy(生命周期)

                此时：vm 中所有的：data, methods, 指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作

        11.2 Teardown watchers, child components and event listeners(移除所有的监视，子组件和事件监听)

        11.3 destroyed(生命周期)

                此时：整个 实例被销毁

12.生命周期图示：

 此图示摘自vue官方