跟着源码学习VUE之上手

跟着源码学习VUE之上手

流程

这边的代码流程不细讲。网上有人讲的很细了。想细致了解的推荐阅读
VUE2.1.7源码学习
这里面已经讲解的很细致了。
须要注意的是 我看的 2.5.17版本中有些变更
在 init.js 中 initRender方法放到了initState前面执行。

这边的讲解也有点问题。具体问题看下面

梳理

这边的流程咱们能够分为两大部分

准备构造函数Vue.

构造函数Vue是个很简单的函数

// instance/index.js
function Vue (options) {
  // ... 省略环境判断代码
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

它自己(ownProperty)不具有任何属性和方法。

构建好以后经过五个Mixin在Vue原型链上添加一系列方法。而这些方法Vue的实例是公用的。

由于构造函数自己也是对象，能够给这个对象定义属性。所以在initGlobalAPI中给Vue添加了全局API。

经常使用的Vue.use, Vue.extend均可以在这边找到。

实例化对象

构造函数准备好以后就实例化对象。就像上面说的，Vue自己很简单。

function Vue (options) {
  // ... 省略环境判断代码
  this._init(options)
}

当咱们 new Vue()时，也是经历了这几步

1. Object.create()。 建立一个新的plainObject.
2. 关联原型链。
3. 指定上下文。即this为第一步实例化出来的空对象。
4. 执行构造函数。

能够看到，其实第三步时咱们就已经拿到了实例对象（即大名鼎鼎的this）。
第四步，执行构造函数其实就是执行this._init。这边的_init是准备构造函数时经过initMixin添加到原型链上的。所以能够直接拿到。

最重要的加载流程

其实对于咱们使用Vue来讲，最关心的也仍是这边。这边代码主要在instance/init.js中。其实我感受这边也能够分红两部分。

在$mount以前都是给实例化对象添加属性和方法。而后执行$mount方法。
这也是我说上面的说法不对的地方。

对于initRender来讲。她并没说构建DOM，虚拟DOM也没有。只是给this添加了render时会用到的方法。

好比最主要的creatElement等。所以哪怕created不能操做DOM与initRender位置无关。
最后执行mount才会真正生成虚拟DOM。obsever date.计算computed等一系列操做。

挂载

接着咱们大概看一下挂载操做都作了什么。
你可能会很奇怪，上面列出来的方法里并无$Mount。这是由于上面列的是从runtime/index.js里导出的Vue。而真正是用的Vue函数式通过entry-runtime-with-compiler.js包装过的。这里就定义了原型链上的$mount方法。

这段代码其实就是作了一件事，若是看看有没有render方法，若是没有，则根据template生成对应的render方法，并保存在options中。