最近公司没有任务做，开始了摸鱼，顺便看了一下vue2的源码，这次不是直接看代码，而是一个源码的教程，这个教程是概况了核心和总结了一下vue的主要核心。教程链接：ustbhuangyi.github.io/vue-analysi…

vue2的源码我整体上在这上面过了一遍，总结出以下几个核心：

数据驱动

所谓数据驱动就是通过改变数据改变视图，不在需要操作dom节点。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello 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)
}

  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }

new Vue 的时候，我们会传入一个对象，Vue构造函数接受一个option参数，并执行_init，_init我这里就不展开了，详情去文档看吧。大概的逻辑就是_init里面做了一些option属性的初始化，每一个函数都有相应的函数去初始化，最后通过$mount挂载到el上面。

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

然后看看$mount做了什么，其实是调用了mountComponent

  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

这是mountComponent中的代码片段，mountComponent的核心就是new了个Watcher实例，Watcher顾名思义就是监听者，但是他监听了什么呢，我这里暂时不做分析。Watcher 在这里起到两个作用，一个是初始化的时候会执行回调函数，另一个是当 vm 实例中的监测的数据发生变化的时候执行回调函数

  updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }

vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)

updateComponent这里执行vm._update,_update里面就会调用 vm.patch，vm.patch 就是通过一系列的算法对新旧节点进行更新。还有vm._render就是我们render函数底层的方法，在这里创建新的VNode。

最后我把渲染流程图放上来：

本人第一次在此平台发博客，请大佬们讨论留言，谢谢。

vue源码学习总结

数据驱动