Vue(2) Vue生命周期

生命周期

• Vue组件的生命周期可以分为四个阶段，create(创建)，mount(挂载)，update(更新)，destroy(销毁)

• 这四个阶段又可以对应八个钩子函数，beforeCreate/created,beforeMount/mounted,beforeUpdate/updated,beforeDestroy/destroyed

• 其大致过程如下：
  
  

• 1、实例通过new Vue()创建出来后会初始化事件和生命周期钩子，然后就执行beforeCreate(),这个时候只是一个空壳，是无法访问到data中的数据和methods中的方法，在这一阶段一般不做操作
  
  

• 2、实例创建完成之后，即执行created()钩子，此时通过实例是访问到data中的数据、methods中配置的方法。但是它还没有将虚拟DOM挂载到真实DOM上。在这一阶段可以更改数据，而不会触发updated()函数

• 如果我们的ajax请求不依赖于DOM，或者说不改变DOM的话，可以把ajax请求放在created里面。

• 而如果将ajax请求放在mounted()里面的话，由于那个时候DOM已经渲染出来了，有可能会导致页面抖动。而放在created里面请求，不仅请求快，而且还不会造成页面抖动
  
  

• 3、接下来会将组件对应的模板编译为虚拟DOM，然后放入render函数中准备进行渲染，这个时候执行beforeMount()钩子函数。这个时候虚拟DOM已经创建完成，但是还没有挂载到真实DOM上，因此在这一阶段我们所有对DOM的操作，最终都不会奏效，这个时候也可以在不触发其他钩子函数的情况下更改数据
  
  

• 4、挂载到真实DOM后，即执行mounted()钩子函数，在这一阶段我们可以对真实的DOM节点做一些操作，发送AJAX请求，开启定时器，绑定自定义事件等
  
  

• 5、当组件或实例的响应式数据更改之后，就会立刻执行beforeUpdate().这个时候数据式新的，但页面是旧的，也就是说数据和页面尚未保持同步
  
  

• 6、然后Vue会重新构建虚拟DOM，然后利用diff算法与上一次的虚拟DOM对比之后重新渲染。渲染完后，执行updated(),这个时候数据和页面保持同步。在这一阶段不建议进行数据操作，避免进入死循环
  
  

• 7、当调用$destroy()方法后，会立即执行beforeDestory(),一般在这里做一些善后操作，比如销毁定时器，解绑全局事件，销毁插件对象等

• 8、最后，做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true