vue的生命周期

1、Vue生命周期的8个阶段

Vue实例从创建到销毁的过程，就是生命周期。
简单来说， 从开始创建–》初始化数据–》编译模板–》挂载Dom–》渲染–》更新–》销毁等一系列过程，称之为Vue 的生命周期。

详细叙述Vue生命周期 ------ 面试参考回答：

• Vue实例、组件通过 new Vue() 创建出来之后，然后就会执行 beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据 和真实的dom，一般不做操作；

• 然后执行 created 函数，这个时候已经可以使用到数据，一般可以在这里做初始数据的获取；

• 然后执行 beforeMount 钩子函数，在这个过程中，编译模板，创建虚拟 dom，调用 render函数，渲染出真实 dom，此时还没有挂载到html页面上;

• 然后执行mounted 钩子函数，此过程，真实dom已经被挂载到页面上了，页面已经渲染完成，事件也都已经挂载好了，可以在这里操作 真实 dom 等事情；

• 当组件或实例的数据更改之后，会立即执行 beforeUpdate，然后 Vue 的虚拟 dom 机制会 重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染，当更新完成后，执行 updated，数据已经更改完成，dom 也重新 render 完成，可以操作 更新后的虚拟 dom。

• 当退出当前页面的时候，立即执行 beforeDestroy，一般在这里做一些善后工 作，例如**清除计时器、清除非指令绑定的事件、组件的数据绑定、监听等，**最后，执行 destroyed，当然，在这里做善后工作也可以。

• 另外还有 keep-alive 独有的生命周期，分别为 activated 和deactivated。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数

• 1、beforeCreate（创建前） 一切未开始，不能访问到 data、computed、watch、methods 上的方法和数据

• 2、created（创建后） 完成了对数据的观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

• 3、beforeMount（载入前） 完成了编译模板，并生成了真实的dom，但还没有挂载html到页面上

• 4、mounted（载入后） 完成了把dom挂载到页面上，此过程中可以进行ajax交互。

• 5、beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。

• 6、updated（更新后） 调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

• 7、beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

• 8、destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。

2、每个周期具体适用于哪些场景

1）beforeCreate：可以在这加loading事件，在加载实例时触发。
2）created：初始化完成时的事件写在这里，如在这里结束loading，异步请求也适合在这里调用。
3）mounted：挂载元素，获取到dom节点。
4）updated：如果对数据统一处理，在这里写上相应的函数。
5）beforeDestroy：清空定时器等。

3、常见问题

• 第一次页面加载会触发哪几个钩子？
  第一次页面加载会触发下beforeCreate, created, beforeMount, mounted

• DOM 渲染在哪个周期中就已经完成？
  mounted

4、vue的template模板的编译

模板编译指的是模板将编译成render函数的过程，

render函数的作用是每次执行时，会根据新模版生成新的vnode。

编译的过程是：模板作为输入 -> 模板编译 阶段->生成 渲染函数

• 解析器：使用大量的正则表达式对 template 字符串进行解析，将标签、指令、属性等转化为抽象语法树 AST
• 优化器：遍历 AST，找到其中的一些静态节点并进行标记，方便在进行 diff 比较时，直接跳过这一些静态节点，从而提升diff效率
• 代码生成器：将AST转换成代码字符串。将代码字符串放入render函数中
• 执行render函数：返回vnode
• 将vnode转化为真实的DOM节点
  

5、vue 初始化页面闪动问题

使用 vue 开发时，在 vue 初始化之前，由于我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是还
是有必要让解决这个问题的。

首先：在 css 里加上以下代码：

[v-cloak] {
	display:none;
}

如 果 没 有 彻 底 解 决 问 题 ， 则 在 根 元 素 加 上
style="display:none;" :style={display: 'block'}"

参考链接 ：https://blog.csdn.net/chenzhizhuo/article/details/101291652
参考链接：https://blog.csdn.net/aSuncat/article/details/88978775