vue使用总结-生命周期篇

工作之初使用的angularjs框架，从那时开始数据双向绑定的思想就深深的吸引了我。那是刚入门并没有深究angularjs实现双向绑定的原理。所以至今对angularjs也是一知半解。在工作半年左右接触了vue，开始使用它作为主要的开发框架。使用至今已有两年多了，期间也对其源码进行过研究。vue的各种理念也都比较了解。最近有空总结下自己对vue各个知识点的理解。

 vue生命周期示例图

上图描述了vue 的生命周期，下面我们根据此图来详细了解下vue从初始化到结束都做了些什么。

1. 创生created

 对vue熟悉的人都知道，vue是封装在vue的函数中的，

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)//初始化开始
}
复制代码

当我new vue时候，此时vue开始他的生命旅程。此时调用init函数，初始化vue的事件，props，methods，data，computed和watch **

2. 挂载mount

 数据初始结束后，如果可以找到el则开始挂载DOM元素。

 开始编译：此时判断是否有render函数，如果有就不做处理直接执行mount.call(this, el, hydrating)。如果没有render函数，则获取template，template可以是#id、模板字符串、dom元素，如果没有template，则获取el以及其子内容作为模板，然后开始编译模板，编译完成调用render函数生成DOM元素。现在我们可以看到页面显示的内容了。 

3. 更新update

页面绑定的数据修改后，更新dom结构，即vdom的diff算法。Vue和React在更新dom时，使用的算法相同，都是基于snabbdom。 update中最终要的一环便是数据patch，vue中调用patch方法来分析DOM元素的结构变化。下面简述下patch流程：

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
 ... let isInitialPatch = false const insertedVnodeQueue = []
 if (isUndef(oldVnode)) { 
     ... 
   } else {
      // oldValue不是VNode，而是真实的dom元素 const isRealElement = isDef(oldVnode.nodeType)
     if (!isRealElement && sameVnode(oldVnode, vnode)) {
     //判断两个vnode可不可以复用为一个节点 
     // patch existing root node patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly)
     //执行patchVnode方法 } else {
      // } 
     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch) return vnode.elm }
复制代码

  vue中的update是vue知识点中比较重要的知识，此生命周期中最重要的是diff算法。由于内容较多这里就不详述，有兴趣的小伙伴可以去了解下[vue源码分析](https://github.com/liutao/vue2.0-source/blob/master/patch%E2%80%94%E2%80%94diff.md) 

4. 结束destroy

任何事物有始必有终，vue当然也不例外。在vue中destroy用来结束他的生命周期，当离开当前组件时会自动触发destroy，当然我们也可以手动触发。 

手动销毁vue需要注意：destroy会完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。也就是说他不会删除页面的DOM元素。

转载于:https://juejin.im/post/5b9f15d9e51d450e827b1edb