Vue 源码解析：深入响应式原理(中)

Vue 源码解析：深入响应式原理（中）DirectiveVue 指令类型很多，限于篇幅，我们不会把所有指令的解析过程都介绍一遍，这里结合前面的例子只介绍v-text 指令的解析过程，其他指令的解析过程也大同小异。

前面我们提到了Vue 实例创建的生命周期，在给data 添加Observer 之后，有一个过程是调用pile 方法对模板进行编译。

compile 方法的源码定义如下：<!-源码目录：src/instance/internal/lifecycle.js-->Vue.prototype._compile = function (el) {var options = this.$options// transclude and init element// transclude can potentially replace original// so we need to keep reference; this step also injects// the template and caches the original attributes// on the container node and replacer node.var original = elel = transclude(el, options)this._initElement(el)// handle v-pre on root node (#2026)if (el.nodeType === 1 && getAttr(el, 'v-pre') !== null) {return}// root is always compiled per-instance, because// container attrs and props can be different every time. var contextOptions = this._context && this._context.$options var rootLinker = compileRoot(el, options, contextOptions) // resolve slot distributionresolveSlots(this, options._content)// compile and link the restvar contentLinkFnvar ctor = this.constructor// component compilation can be cached// as long as it's not using inline-templateif (options._linkerCachable) {contentLinkFn = ctor.linkerif (!contentLinkFn) {contentLinkFn = ctor.linker = compile(el, options)}}// link phase// make sure to link root with prop scope!var rootUnlinkFn = rootLinker(this, el, this._scope)var contentUnlinkFn = contentLinkFn? contentLinkFn(this, el): compile(el, options)(this, el)// register composite unlink function// to be called during instance destructionthis._unlinkFn = function () {rootUnlinkFn()// passing destroying: true to avoid searching and// splicing the directivescontentUnlinkFn(true)}// finally replace originalif (options.replace) {replace(original, el)}this._isCompiled = truethis._callHook('compiled')}我们可以通过下图来看一下这个方法编译的主要流程：这个过程通过el = transclude(el, option) 方法把template 编译成一段document fragment，拿到el 对象。

而指令解析部分就是通过compile(el, options) 方法实现的。

接下来我们看一下compile 方法的实现，它的源码定义如下：<!-源码目录：src/compiler/compile.js-->export function compile (el, options, partial) {// link function for the node itself.var nodeLinkFn = partial || !options._asComponent? compileNode(el, options): null// link function for the childNodesvar childLinkFn =!(nodeLinkFn && nodeLinkFn.terminal) &&!isScript(el) &&el.hasChildNodes()? compileNodeList(el.childNodes, options): null/*** A composite linker function to be called on a already* compiled piece of DOM, which instantiates all directive* instances.** @param {Vue} vm* @param {Element|DocumentFragment} el* @param {Vue} [host] - host vm of transcluded content* @param {Object} [scope] - v-for scope* @param {Fragment} [frag] - link context fragment* @return {Function|undefined}*/return function compositeLinkFn (vm, el, host, scope, frag) {// cache childNodes before linking parent, fix #657var childNodes = toArray(el.childNodes)// linkvar dirs = linkAndCapture(function compositeLinkCapturer () { if (nodeLinkFn) nodeLinkFn(vm, el, host, scope, frag)if (childLinkFn) childLinkFn(vm, childNodes, host, scope, frag) }, vm)return makeUnlinkFn(vm, dirs)}}compile 方法主要通过compileNode(el, options) 方法完成节点的解析，如果节点拥有子节点，则调用compileNodeList(el.childNodes, options) 方法完成子节点的解析。

compileNodeList 方法其实就是遍历子节点，递归调用compileNode 方法。

因为DOM 元素本身就是树结构，这种递归方法也就是常见的树的深度遍历方法，这样就可以完成整个DOM 树节点的解析。

接下来我们看一下compileNode 方法的实现，它的源码定义如下：<!-源码目录：src/compiler/compile.js-->function compileNode (node, options) {var type = node.nodeTypeif (type === 1 && !isScript(node)) {return compileElement(node, options)} else if (type === 3 && node.data.trim()) {return compileTextNode(node, options)} else {return null}}compileNode 方法对节点的nodeType 做判断，如果是一个非script 普通的元素（div、p等）；则调用compileElement(node, options) 方法解析；如果是一个非空的文本节点，则调用compileTextNode(node, options) 方法解析。

我们在前面的例子中解析的是非空文本节点count: {{times}}，这实际上是v-text 指令，它的解析是通过compileTextNode 方法实现的。

接下来我们看一下compileTextNode 方法，它的源码定义如下：<!-源码目录：src/compiler/compile.js-->function compileTextNode (node, options) {// skip marked text nodesif (node._skip) {return removeText}var tokens = parseText(node.wholeText)if (!tokens) {return null}// mark adjacent text nodes as skipped,// because we are using node.wholeText to compile // all adjacent text nodes together. This fixes// issues in IE where sometimes it splits up a single // text node into multiple ones.var next = node.nextSiblingwhile (next && next.nodeType === 3) {next._skip = truenext = next.nextSibling}var frag = document.createDocumentFragment() var el, tokenfor (var i = 0, l = tokens.length; i < l; i++) { token = tokens[i]el = token.tag? processTextToken(token, options): document.createTextNode(token.value)frag.appendChild(el)}return makeTextNodeLinkFn(tokens, frag, options)}compileTextNode 方法首先调用了parseText 方法对node.wholeText 做解析。