因为vue指令很多，功能也很多，所以会有很多针对一些情况的特殊处理，这些逻辑如果不是对vue很熟悉的话一时间是看不懂的，所以我们只看一些基本逻辑。
compile
创建vue实例时当传递了参数el或者手动调用$mount方法即可启动模板编译过程，$mount方法里调用了_compile方法，简化之后其实调用的是compile(el, options)(this, el)，compile也简化后代码如下：
function compile (el, options, partial, transcluded) {
var nodeLinkFn = compileNode(el, options)
var childLinkFn = el.hasChildNodes()
? compileNodeList(el.childNodes, options)
: null
function compositeLinkFn (vm, el)
var childNodes = _.toArray(el.childNodes)
if (nodeLinkFn) nodeLinkFn(vm.$parent, el)
if (childLinkFn) childLinkFn(vm.$parent, childNodes)
}
return compositeLinkFn
}
该方法会根据实例的一些状态来判断处理某个部分使用哪个方法，因为代码极大的简化了所以不是很明显。
先来看compileNode方法，这个方法会会对普通节点和文本节点调用不同的方法，只看普通节点：
function compileElement (el, options) {
var linkFn, tag, component
// 检查是否是自定义元素，也就是子组件
if (!el.__vue__) {
tag = el.tagName.toLowerCase()
component =
tag.indexOf('-') > 0 &&
options.components[tag]
// 是自定义组件则给元素设置一个属性标志
if (component) {
el.setAttribute(config.prefix + 'component', tag)
}
}
// 如果是自定义组件或者元素有属性的话
if (component || el.hasAttributes()) {
// 检查 terminal 指令
linkFn = checkTerminalDirectives(el, options)
// 如果不是terminal，建立正常的链接功能
if (!linkFn) {
var dirs = collectDirectives(el, options)
linkFn = dirs.length
? makeNodeLinkFn(dirs)
: null
}
}
return linkFn
}
terminal 指令有三种：repeat、if、'component：
var terminalDirectives = [
'repeat',
'if',
'component'
]
function skip () {}
skip.terminal = true
function checkTerminalDirectives (el, options) {
// v-pre指令是用来告诉vue跳过编译该元素及其所有子元素
if (_.attr(el, 'pre') !== null) {
return skip
}
var value, dirName
for (var i = 0; i < 3; i++) {
dirName = terminalDirectives[i]
if (value = _.attr(el, dirName)) {
return makeTerminalNodeLinkFn(el, dirName, value, options)
}
}
}
顺便一提的是attr方法，这个方法其实是专门用来获取vue的自定义属性的，也就是v-开头的属性，为什么我们在模板里写的带v-前缀的属性在最终渲染的元素上没有呢，就是因为在这个方法里把它给移除了：
exports.attr = function (node, attr) {
attr = config.prefix + attr
var val = node.getAttribute(attr)
// 如果该自定义指令存在，则把它从元素上删除
if (val !== null) {
node.removeAttribute(attr)
}
return val
}
makeTerminalNodeLinkFn方法：
function makeTerminalNodeLinkFn (el, dirName, value, options) {
// 解析指令值
var descriptor = dirParser.parse(value)[0]
// 获取该指令的指令方法，vue内置了很多指令处理方法，都在/src/directives/文件夹下
var def = options.directives[dirName]
var fn = function terminalNodeLinkFn (vm, el, host) {
// 创建并把指令绑定到元素
vm._bindDir(dirName, el, descriptor, def, host)
}
fn.terminal = true
return fn
}
parse方法用来解析指令的值，请移步文章：vue0.11版本源码阅读系列四：详解指令值解析函数，比如指令值为click: a = a + 1 | uppercase，处理完最后会返回这样的信息：
{
arg: 'click',
expression: 'a = a + 1',
filters: [
{ name: 'uppercase', args: null }
]
}
_bindDir方法会创建一个指令实例：
exports._bindDir = function (name, node, desc, def, host) {
this._directives.push(
new Directive(name, node, this, desc, def, host)
)
}
所以linkFn以及nodeLinkFn就是这个_bindDir的包装函数。
对于非terminal指令，调用的是collectDirectives方法，这个方法会遍历元素的所有属性attributes，如果是v-前缀的vue指令会被定义为下列格式的对象：
{
name: dirName,// 去除了v-前缀的指令名
descriptors: dirParser.parse(attr.value),// 指令值解析后的数据
def: options.directives[dirName],// 该指令对应的处理方法
transcluded: transcluded
}
非vue指令的属性如果存在动态绑定，也会进行处理，在该版本vue里的动态绑定是使用双大括号插值的，和2.x的使用v-bind不一样。
如：<div class="{{error}}"></div>，所以会通过正则来匹配判断是否存在动态绑定，最终返回下列格式的数据：
{
def: options.directives.attr,
_link: allOneTime// 是否所有属性都是一次性差值
? function (vm, el) {// 一次性的话后续不需要更新
el.setAttribute(name, vm.$interpolate(value))
}
: function (vm, el) {// 非一次性的话如果依赖的响应数据变化了也需要改变
var value = textParser.tokensToExp(tokens, vm)
var desc = dirParser.parse(name + ':' + value)[0]
vm._bindDir('attr', el, desc, def)
}
}
collectDirectives方法最终会返回一个上面对象组成的数组，然后调用makeNodeLinkFn为每个指令创建一个绑定函数：
function makeNodeLinkFn (directives) {
return function nodeLinkFn (vm, el, host) {
var i = directives.length
var dir, j, k, target
while (i--) {
dir = directives[i]
if (dir._link) {
dir._link(vm, el)
} else {// v-前缀的指令
k = dir.descriptors.length
for (j = 0; j < k; j++) {
vm._bindDir(dir.name, el,
dir.descriptors[j], dir.def, host)
}
}
}
}
}
总结一下compileNode的作用就是遍历元素上的属性，分别给其创建一个指令绑定函数，这个指令函数后续调用时会创建一个Directive实例，这个类后续再看。
如果该元素存在子元素的话会调用compileNodeList方法，子元素又有子元素的话又会继续调用，其实就是递归所有子元素调用compileNode方法。
compile方法最后返回了compositeLinkFn方法，这个方法被立即执行了，这个方法里调用了刚才生成的nodeLinkFn和childLinkFn方法，执行结果就是会把所有的元素及子元素的指令进行绑定，也就是给元素上的某个属性或者说指令都创建了一个Directive实例。
Directive
指令这个类主要做的事是把DOM和数据绑定起来，实例化的时候会调用指令的bind方法，同时会实例化一个Watcher实例，后续数据更新的时候会调用指令的update方法。
function Directive (name, el, vm, descriptor, def, host) {
this.name = name
this.el = el
this.vm = vm
this.raw = descriptor.raw
this.expression = descriptor.expression
this.arg = descriptor.arg
this.filters = _.resolveFilters(vm, descriptor.filters)
this._host = host
this._locked = false
this._bound = false
this._bind(def)
}
构造函数定义一些属性以及调用了_bind方法，resolveFilters方法会把过滤器以getter和setter分别收集到一个数组里，便于后续循环调用：
exports.resolveFilters = function (vm, filters, target) {
var res = target || {}
filters.forEach(function (f) {
var def = vm.$options.filters[f.name]
if (!def) return
var args = f.args
var reader, writer
if (typeof def === 'function') {
reader = def
} else {
reader = def.read
writer = def.write
}
if (reader) {
if (!res.read) res.read = []
res.read.push(function (value) {
return args
? reader.apply(vm, [value].concat(args))
: reader.call(vm, value)
})
}
if (writer) {
if (!res.write) res.write = []
res.write.push(function (value, oldVal) {
return args
? writer.apply(vm, [value, oldVal].concat(args))
: writer.call(vm, value, oldVal)
})
}
})
return res
}
_bind方法：
p._bind = function (def) {
if (typeof def === 'function') {
this.update = def
} else {// 这个版本的vue指令有这几个钩子方法：bind、update、unbind
_.extend(this, def)
}
this._watcherExp = this.expression
// 如果该指令存在bind方法，此时进行调用
if (this.bind) {
this.bind()
}
if (this._watcherExp && this.update){
var dir = this
var update = this._update = function (val, oldVal) {
dir.update(val, oldVal)
}
// 使用原始表达式作为标识符，因为过滤器会让同一个arg变成不同的观察者
var watcher = this.vm._watchers[this.raw]
if (!watcher) {
// 该表达式未创建过watcher，则实例化一个
watcher = this.vm._watchers[this.raw] = new Watcher(
this.vm,
this._watcherExp,
update,
{
filters: this.filters
}
)
} else {// 存在则把更新函数添加进入
watcher.addCb(update)
}
this._watcher = watcher
if (this._initValue != null) {// 带初始值的情况，见于v-model的情况
watcher.set(this._initValue)
} else if (this.update) {// 其他的会调用update方法，所以bind方法调用后紧接着会调用update方法
this.update(watcher.value)
}
}
this._bound = true
}
到这里可以知道实例化Directive的时候会调用指令的bind钩子函数，一般是做一些初始化工作，然后会对该指令初始化一个Watcher实例，这个实例会用来做依赖收集，最后非v-model的情况会立即调用指令的update方法，watcher实例化的时候会计算表达式的值，所以此时得到的value就是最新的。
Watcher
Watcher实例用来解析表达式和收集依赖项，并在表达式的值变化时触发回调更新。第一篇里提到的$watch方法也是使用该类实现的。
function Watcher (vm, expression, cb, options) {
this.vm = vm
this.expression = expression
this.cbs = [cb]
this.id = ++uid
this.active = true
options = options || {}
this.deep = !!options.deep
this.user = !!options.user
this.deps = Object.create(null)
if (options.filters) {
this.readFilters = options.filters.read
this.writeFilters = options.filters.write
}
// 将表达式解析为getter/setter
var res = expParser.parse(expression, options.twoWay)
this.getter = res.get
this.setter = res.set
this.value = this.get()
}
构造函数的逻辑很简单，声明一些变量、将表达式解析为getter和setter的类型，比如：a.b解析后的get为：
function anonymous(o){
return o.a.b
}
set为：
function set(obj, val){
Path.se(obj, path, val)
}
简单的说就是生成两个函数，一个用来给实例this设置值，一个用来获取实例this上的值，具体的解析逻辑比较复杂，有机会再详细分析或者可自行阅读源码：/src/parsers/path.js。
最后调用了get方法：
p.get = function () {
this.beforeGet()
var vm = this.vm
var value
// 调用取值方法
value = this.getter.call(vm, vm)
// “触摸”每个属性，以便它们都作为依赖项进行跟踪，以便进行深入观察
if (this.deep) {
traverse(value)
}
// 应用过滤器函数
value = _.applyFilters(value, this.readFilters, vm)
this.afterGet()
return value
}
在调用取值函数前调用了beforeGet方法：
p.beforeGet = function () {
Observer.target = this
this.newDeps = {}
}
到这里我们知道了第二篇vue0.11版本源码阅读系列二：数据观察里提到的Observer.target是什么了，逻辑也可以串起来，vue在数据观察时对每个属性进行了拦截，在getter里会判断Observer.target是否存在，存在的话会把Observer.target对应的watcher实例收集到该属性的依赖对象实例dep里：
if (Observer.target) {
Observer.target.addDep(dep)
}
beforeGet后紧接着就调用了该表达式的取值函数，会触发对应属性的getter。
addDep方法：
p.addDep = function (dep) {
var id = dep.id
if (!this.newDeps[id]) {
this.newDeps[id] = dep
if (!this.deps[id]) {
this.deps[id] = dep
// 收集该watcher实例到该属性的依赖对象里
dep.addSub(this)
}
}
}
afterGet用来做一些复位和清理工作：
p.afterGet = function () {
Observer.target = null
for (var id in this.deps) {
if (!this.newDeps[id]) {// 删除本次依赖收集时已经不依赖的属性
this.deps[id].removeSub(this)
}
}
this.deps = this.newDeps
}
traverse方法用来深度遍历所有嵌套属性，这样已转换的所有嵌套属性都会作为依赖项进行收集，也就是该表达式的watcher会被该属性及其所有后代属性的dep对象收集，这样某个后代属性的值变了也会触发更新：
function traverse (obj) {
var key, val, i
for (key in obj) {
val = obj[key]// 就是这里，获取一下该属性即可触发getter，此时Observer.target属性还是该watcher
if (_.isArray(val)) {
i = val.length
while (i--) traverse(val[i])
} else if (_.isObject(val)) {
traverse(val)
}
}
}
如果某个属性的值后续发生变化根据第一篇我们知道在属性setter函数里会调用订阅者的update方法，这个订阅者就是Watcher实例，看一下这个方法：
p.update = function () {
if (!config.async || config.debug) {
this.run()
} else {
batcher.push(this)
}
}
正常情况下是走else分支的，batcher会以异步和批量的方式来更新，但是最后也调用了run方法，所以先来看一下这个方法：
p.run = function () {
if (this.active) {
// 获取表达式的最新值
var value = this.get()
if (
value !== this.value ||
Array.isArray(value) ||
this.deep
) {
var oldValue = this.value
this.value = value
var cbs = this.cbs
for (var i = 0, l = cbs.length; i < l; i++) {
cbs[i](value, oldValue)
// 某个回调删除了其他的回调的情况，目前属实不了解
var removed = l - cbs.length
if (removed) {
i -= removed
l -= removed
}
}
}
}
}
逻辑很简单，遍历调用该watcher实例所有指令的update方法，指令会完成页面的更新工作。
批量更新请移步文章vue0.11版本源码阅读系列五：批量更新是怎么做的。
到这里模板编译的过程就结束了，接下来以一个指令的视角来看一下具体过程。
以if指令来看一下全过程
模板如下：
<div id="app">
<div v-if="show">我出来了</div>
</div>
JavaScript代码如下：
window.vm = new Vue({
el: '#app',
data: {
show: false
}
})
在控制台输入window.vm.show = true这个div就会显示出来。
根据上面的分析，我们知道对于v-if这个指令最终肯定调用了_bindDir方法：
进入Directive后在_bind里调用了if指令的bind方法，该方法简化后如下：
{
bind: function () {
var el = this.el
if (!el.__vue__) {
// 创建了两个注释元素把我们要显示隐藏的div给替换了，效果见下图
this.start = document.createComment('v-if-start')
this.end = document.createComment('v-if-end')
_.replace(el, this.end)
_.before(this.start, this.end)
}
}
}
可以看到bind方法做的事情是用两个注释元素把这个元素从页面上给替换了。 bind方法之后就是给这个指令创建watcher：
接下来在watcher里给Observer.target赋值及进行取值操作，触发了show属性的getter：
依赖收集完后会调用if指令的update方法，看一下这个方法：
{
update: function (value) {
if (value) {
if (!this.unlink) {
var frag = templateParser.clone(this.template)
this.compile(frag)
}
} else {
this.teardown()
}
}
}
因为我们的初始值为false，所以走else分支调用了teardown方法：
{
teardown: function () {
if (!this.unlink) return
transition.blockRemove(this.start, this.end, this.vm)
this.unlink()
this.unlink = null
}
}
本次unlink其实并没有值，所以就直接返回了，但是假如有值的话，teardown方法首先使用会使用transition类来移除元素，然后解除该指令的绑定。
现在让我们在控制台输入window.vm.show = true，这会触发show的setter：
然后会调用show属性的dep 的notify方法，dep的订阅者里目前就只有if指令的watcher，所以会调用watcher的update方法，最终调用到if指令的update方法，此时的值为true，所以会走到if分支里，unlink也没有值，所以会调用compile方法：
{
compile: function (frag) {
var vm = this.vm
transition.blockAppend(frag, this.end, vm)
}
}
忽略了部分编译过程，可以看到使用看transition类来显示元素。这个过渡类我们将在vue0.11版本源码阅读系列六：过渡原理里详细了解。
总结
可以发现在这个早期版本里没有所谓的虚拟DOM，没有diff算法，模板编译就是遍历元素及元素上的属性，给每个属性创建一个指令实例，对同样的指令表达式创建一个watcher实例，指令实例提供update方法给watcher，watcher会触发表达式里所有被观察属性的getter，然后watcher就会被这些属性的依赖收集实例dep收集起来，当属性值变化时会触发setter，在setter里会遍历dep里所有的watcher，调用更新方法，也就是指令实例提供的update方法，也就是最终指令对象的update方法完成页面更新。
当然，这部分的代码还是比较复杂的，远没有本文所说的这么简单，各种递归调用，各种函数重载，反复调用，让人看的云里雾里，有兴趣的还请自行阅读。
