简单认识Vue的生命周期

Vue的生命周期是什么？

Vue的生命周期指的是组件从创建到销毁的一系列的过程（数据监听、编译模板、将实例挂载到 DOM 、更新 DOM 等）。

通过Vue在生命周期各个阶段的钩子函数，可以很好的在Vue的各个生命阶段实现一些操作。

Vue的各个生命阶段是什么？

创建期间

• beforeCreate：
  • 该阶段初始化非响应式变量。data和methods仍未初始化，获取不了。
• created：
  • 该阶段常用于简单的ajax请求，页面的初始化。可以访问data和methods。但此时还没有挂载到页面中，访问不到$el属性。
• beforeMount：
  • 组件被挂载到页面之前，内存中渲染好了模板（会找到对应的template，并编译成render函数）
• mounted：
  • 常用于获取VNode信息和操作，ajax请求。在组件挂载到页面之后触发，将内存中编译好的模板转换到浏览器的页面中去。

运行期间

• beforeUpdate：
  • 在响应式数据更新时触发，发生在虚拟DOM重新渲染并应用更新之前。页面中显示的数据还是旧的，data数据是最新的，即页面尚未和最新的数据保持同步。
• updated：
  • 页面和data数据已经保持同步了都是最新的。

销毁期间

• beforeDestory：
  • Vue进入销毁阶段，data、methods等仍处于可用状态还没真正执行销毁的过程
• destoryed：
  • 在实例销毁之后调用，Vue实例中的所有东西都会解除绑定，所有的事件监听器都会被移除，所有的子实例都会被销毁。（用keep-alive包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后会执行actived钩子函数）

  • keep-alive组件有什么作用？在组件切换的时候，保存一些组件的状态防止多次渲染。

一些面试题

1. Vue的生命周期？

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

2. 生命周期内created和mounted的区别？

区别在于视图中的HTML是否已经渲染出来，created无法直接去操作HTML的DOM节点，而mounted可以。

3. Ajax请求放在Vue哪个生命周期中？

created和mounted，created常用于简单的ajax请求

4. 组件中父beforeCreate和子beforeCreate执行顺序？

父beforeCreate先【具体执行顺序可看参考资料1ヾ(◍°∇°◍)ﾉﾞ】

参考资料

1. vue 生命周期深入
2. Vue 实例