前言
工作之初使用的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源码分析](github.com/liutao/vue2…
4. 结束destroy
任何事物有始必有终，vue当然也不例外。在vue中destroy用来结束他的生命周期，当离开当前组件时会自动触发destroy，当然我们也可以手动触发。
手动销毁vue需要注意：destroy会完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。也就是说他不会删除页面的DOM元素。
