vue使用总结（3）生命周期篇

工作之初使用的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源码分析

4. 结束destroy
任何事物有始必有终，vue当然也不例外。在vue中destroy用来结束他的生命周期，当离开当前组件时会自动触发destroy，当然我们也可以手动触发。
手动出需要注意：destroy会完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。也就是说他不会删除页面的DOM元素。