Vue源码的初始化以及数据驱动逻辑

vue本身只解决了视图渲染的问题，其他问题都是依靠插件来解决的，vuex解决的是数据仓库的问题，vue-router解决的是路由问题。

 

从最新版的2.x版本分析，版本为2.6.12

Vue本身是一个构造函数，既然是构造构造函数遵从new 操作符的规则。继承原型链，执行构造函数逻辑。

因为这里不是要自己实现一个Vue，所以主要看构造函数执行了什么逻辑。从找到核心逻辑开始分析。

 

vue初始化做了什么事

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。建立数据和事件的依赖关系。

 

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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

　　

从状态data数据改变到dom节点更新，新的渲染流程

核心逻辑是data数据改变然后触发watcher，然后生成vnode，然后更新dom。

 

在setter触发时，会触发dep的notify，然后dep会遍历所有相关的Watcher，执行update，update是一个异步执行watcher的过程，实际执行的是watch的run方法。

run方法实际执行的是watcher的回调函数。这个回调函数用来更新dom节点的。

 

这个回调函数就是updateComponent方法。

这个方法的具体逻辑：调用Vue实例上的_render方法， 这个方法返回vnode，之后作为参数给_update方法，执行_update，_update的核心是__patch__，__patch__的核心是patch，也就是diff算法的核心方法。patch对比newvnode和oldvnode，通过对比的结果生成dom节点，最后更新必要的dom节点。更新的方法就是基本的dom操作方法：appendChild，createComment，createElement，createTextNode，insertBefore，removeChild等。