跟着源码学习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中。