日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 

  
  
 
  
  
    
 
  
  
         
  
  
          {{ todo.text }} 
  
  
        
 
  
  
    
 
  
  

 
 

  
  
var vm = new Vue({ 
  
  
    el: '#mountNode', 
  
  
        data: { 
  
  
           todos: [ 
  
  
               { text: 'Learn JavaScript' }, 
  
  
               { text: 'Learn Vue.js' }, 
  
  
               { text: 'Build Something Awesome' } 
  
  
           ] 
  
  
        } 
  
  
    })  
 
 

這篇文章將要一起分析：

• observe array
• terminal directive
• v-for指令過程

recap

這里先用幾張圖片回顧和整理下上一篇Vue.js源碼(1)：Hello World的背后的內(nèi)容，這將對本篇的compile，link和bind過程的理解有幫助：

copmile階段：主要是得到指令的descriptor 

link階段：實例化指令，替換DOM

 bind階段：調(diào)用指令的bind函數(shù)，創(chuàng)建watcher

 用一張圖表示即為：

 observe array

初始化中的merge options，proxy過程和Hello World的過程基本一樣，所以這里直接從observe開始分析。

 
 

  
  
// file path: src/observer/index.js 
  
  
var ob = new Observer(value) // value = data = {todos: [{message: 'Learn JavaScript'}, ...]}  
 
 

 
 

  
  
// file path: src/observer/index.js 
  
  
export function Observer (value) { 
  
  
  this.value = value 
  
  
  this.dep = new Dep() 
  
  
  def(value, '__ob__', this) 
  
  
  if (isArray(value)) {     // 數(shù)組分支 
  
  
    var augment = hasProto 
  
  
      ? protoAugment 
  
  
      : copyAugment         // 選擇增強方法 
  
  
    augment(value, arrayMethods, arrayKeys)     // 增強數(shù)組 
  
  
    this.observeArray(value) 
  
  
  } else {                  // plain object分支 
  
  
    this.walk(value) 
  
  
  } 
  
  
}  
 
 

增強數(shù)組

增強(augment)數(shù)組，即對數(shù)組進(jìn)行擴(kuò)展，使其能detect change。這里面有兩個內(nèi)容，一個是攔截數(shù)組的mutation methods(導(dǎo)致數(shù)組本身發(fā)生變化的方法)，一個是提供兩個便利的方法$set和$remove。

攔截有兩個方法，如果瀏覽器實現(xiàn)__proto__那么就使用protoAugment，否則就使用copyAugment。

 
 

  
  
// file path: src/util/evn.js 
  
  
export const hasProto = '__proto__' in {} 
  
  
 
  
  
// file path: src/observer/index.js 
  
  
// 截取原型鏈 
  
  
function protoAugment (target, src) { 
  
  
  target.__proto__ = src 
  
  
} 
  
  
 
  
  
// file path: src/observer/index.js 
  
  
// 定義屬性 
  
  
function copyAugment (target, src, keys) { 
  
  
  for (var i = 0, l = keys.length; i < l; i++) { 
  
  
    var key = keys[i] 
  
  
    def(target, key, src[key]) 
  
  
  } 
  
  
}  
 
 

為了更直觀，請看下面的示意圖：

增強之前：

 通過原型鏈攔截： 

 通過定義屬性攔截： 

 在攔截器arrayMethods里面，就是對這些mutation methods進(jìn)行包裝：

1. 調(diào)用原生的Array.prototype中的方法
2. 檢查是否有新的值被插入(主要是push, unshift和splice方法)
3. 如果有新值插入，observe它們
4. ***就是notify change：調(diào)用observer的dep.notify()

代碼如下： 

 
 

  
  
// file path: src/observer/array.js 
  
  
;[ 
  
  
  'push', 
  
  
  'pop', 
  
  
  'shift', 
  
  
  'unshift', 
  
  
  'splice', 
  
  
  'sort', 
  
  
  'reverse' 
  
  
] 
  
  
.forEach(function (method) { 
  
  
  // cache original method 
  
  
  var original = arrayProto[method] 
  
  
  def(arrayMethods, method, function mutator () { 
  
  
    // avoid leaking arguments: 
  
  
    // http://jsperf.com/closure-with-arguments 
  
  
    var i = arguments.length 
  
  
    var args = new Array(i) 
  
  
    while (i--) { 
  
  
      args[i] = arguments[i] 
  
  
    } 
  
  
    var result = original.apply(this, args) 
  
  
    var ob = this.__ob__ 
  
  
    var inserted 
  
  
    switch (method) { 
  
  
      case 'push': 
  
  
        inserted = args 
  
  
        break 
  
  
      case 'unshift': 
  
  
        inserted = args 
  
  
        break 
  
  
      case 'splice': 
  
  
        inserted = args.slice(2) 
  
  
        break 
  
  
    } 
  
  
    if (inserted) ob.observeArray(inserted) 
  
  
    // notify change 
  
  
    ob.dep.notify() 
  
  
    return result 
  
  
  }) 
  
  
})  
 
 

observeArray()

知道上一篇的observe()，這里的observeArray()就很簡單了，即對數(shù)組對象都o(jì)bserve一遍，為各自對象生成Observer實例。 

 
 

  
  
// file path: src/observer/index.js 
  
  
Observer.prototype.observeArray = function (items) { 
  
  
  for (var i = 0, l = items.length; i < l; i++) { 
  
  
    observe(items[i]) 
  
  
  } 
  
  
}  
 
 

compile

在介紹v-for的compile之前，有必要回顧一下compile過程：compile是一個遞歸遍歷DOM tree的過程，這個過程對每個node進(jìn)行指令類型，指令參數(shù)，表達(dá)式，過濾器等的解析。

遞歸過程大致如下：

1. compile當(dāng)前node
2. 如果當(dāng)前node沒有terminal directive，則遍歷child node，分別對其compile node
3. 如果當(dāng)前node有terminal directive，則跳過其child node

這里有個terminal directive的概念，這個概念在Element Directive中提到過：

A big difference from normal directives is that element directives are terminal, which means once Vue encounters an element directive, it will completely skip that element

實際上自帶的directive中也有兩個terminal的directive，v-for和v-if(v-else)。

terminal directive

在源碼中找到：

terminal directive will have a terminal link function, which build a node link function for a terminal directive. A terminal link function terminates the current compilation recursion and handles compilation of the subtree in the directive.

也就是上面遞歸過程中描述的，有terminal directive的node在compile時，會跳過其child node的compile過程。而這些child node將由這個directive單獨compile(partial compile)。

以圖為例，紅色節(jié)點有terminal directive，compile時(綠線)將其子節(jié)點跳過： 

 為什么是v-for和v-if?因為它們會帶來節(jié)點的增加或者刪除。

Compile的中間產(chǎn)物是directive的descriptor，也可能會創(chuàng)建directive來管理的document fragment。這些產(chǎn)物是在link階段時需要用來實例化directive的。從racap中的圖可以清楚的看到，compile過程產(chǎn)出了和link過程怎么使用的它們。那么現(xiàn)在看看v-for的情況：

compile之后，只得到了v-for的descriptor，link時將用它實例化v-for指令。 

 
 

  
  
descriptor = { 
  
  
    name: 'for', 
  
  
    attrName: 'v-for', 
  
  
    expression: 'todo in todos', 
  
  
    raw: 'todo in todos', 
  
  
    def: vForDefinition 
  
  
}  
 
 

link

Hello World中，link會實例化指令，并將其與compile階段創(chuàng)建好的fragment(TextNode)進(jìn)行綁定。但是本文例子中，可以看到compile過程沒有創(chuàng)建fragment。這里的link過程只實例化指令，其他過程將發(fā)生在v-for指令內(nèi)部。

bind

主要的list rendering的魔法都在v-for里面，這里有FragmentFactory，partial compile還有diff算法(diff算法會在單獨的文章介紹)。

在v-for的bind()里面，做了三件事：

1. 重新賦值expression，找出alias："todo in todos"里面，todo是alias，todos才是真正的需要監(jiān)聽的表達(dá)式
2. 移除
3. {{todo.text}}
元素，替換上start和end錨點(anchor)。錨點用來幫助插入最終的li節(jié)點
4. 創(chuàng)建FragmentFactory：factory會compile被移除的li節(jié)點，得到并緩存linker，后面會用linker創(chuàng)建Fragment 

 
 

  
  
// file path: /src/directives/public/for.js 
  
  
bind () { 
  
  
    // 找出alias，賦值expression = "todos" 
  
  
    var inMatch = this.expression.match(/(.*) (?:in|of) (.*)/) 
  
  
    if (inMatch) { 
  
  
      var itMatch = inMatch[1].match(/\((.*),(.*)\)/) 
  
  
      if (itMatch) { 
  
  
        this.iterator = itMatch[1].trim() 
  
  
        this.alias = itMatch[2].trim() 
  
  
      } else { 
  
  
        this.alias = inMatch[1].trim() 
  
  
      } 
  
  
      this.expression = inMatch[2] 
  
  
    } 
  
  
     
  
  
    ... 
  
  
     
  
  
    // 創(chuàng)建錨點，移除LI元素 
  
  
    this.start = createAnchor('v-for-start') 
  
  
    this.end = createAnchor('v-for-end') 
  
  
    replace(this.el, this.end) 
  
  
    before(this.start, this.end) 
  
  
 
  
  
    ... 
  
  
 
  
  
    // 創(chuàng)建FragmentFactory 
  
  
    this.factory = new FragmentFactory(this.vm, this.el) 
  
  
  } 
 
 

Fragment & FragmentFactory

這里的Fragment，指的不是DocumentFragment，而是Vue內(nèi)部實現(xiàn)的一個類，源碼注釋解釋為：

Abstraction for a partially-compiled fragment. Can optionally compile content with a child scope.

FragmentFactory會compile

在Fragment中調(diào)用linker時，就是link和bind

scope

為什么在v-for指令里面可以通過別名(alias)todo訪問循環(huán)變量?為什么有$index和$key這樣的特殊變量?因為使用了child scope。

還記得Hello World中watcher是怎么識別simplePath的嗎? 

 
 

  
  
var getter = new Function('scope', 'return scope.message;') 
 
 

在這里，說白了就是訪問scope對象的todo，$index或者$key屬性。在v-for指令里，會擴(kuò)展其父作用域，本例中父作用域?qū)ο缶褪莢m本身。在調(diào)用factory創(chuàng)建每一個fragment時，都會以下面方式創(chuàng)建合適的child scope給其使用： 

 
 

  
  
// file path: /src/directives/public/for.js 
  
  
create (value, alias, index, key) { 
  
  
    // index是遍歷數(shù)組時的下標(biāo) 
  
  
    // value是對應(yīng)下標(biāo)的數(shù)組元素 
  
  
    // alias = 'todo' 
  
  
    // key是遍歷對象時的屬性名稱 
  
  
    ... 
  
  
    var parentScope = this._scope || this.vm 
  
  
    var scope = Object.create(parentScope) // 以parent scope為原型鏈創(chuàng)建child scope 
  
  
    ... 
  
  
    withoutConversion(() => { 
  
  
      defineReactive(scope, alias, value) // 添加alias到child scope 
  
  
    }) 
  
  
    defineReactive(scope, '$index', index) // 添加$index到child scope 
  
  
    ... 
  
  
    var frag = this.factory.create(host, scope, this._frag) 
  
  
    ... 
  
  
  }  
 
 

detect change

到這里，基本上“初探”了一下List Rendering的過程，里面有很多概念沒有深入，打算放在后面結(jié)合其他使用這些概念的地方一起在分析，應(yīng)該能體會到其巧妙的設(shè)計。

***舉兩個例子，回顧上面的內(nèi)容

例一： 

 
 

  
  
vm.todos[0].text = 'Learn JAVASCRIPT'; 
 
 

改變的是數(shù)組元素中text屬性，由于factory創(chuàng)建的fragment的v-text指令observe todo.text，因此這里直接由v-text指令更新對應(yīng)li元素的TextNode內(nèi)容。

例二： 

 
 

  
  
vm.todos.push({text: 'Learn Vue Source Code'}); 
 
 

增加了數(shù)組元素，v-for指令的watcher通知其做update，diff算法判斷新增了一個元素，于是創(chuàng)建scope，factory克隆template，創(chuàng)建新的fragment，append在#end-anchor的前面，fragment中的v-text指令observe新增元素的text屬性，將值更新到TextNode上。

更多數(shù)組操作放在diff算法中再看。

到這里，應(yīng)該對官網(wǎng)上的這句話有更深的理解了：

Instead of a Virtual DOM, Vue.js uses the actual DOM as the template and keeps references to actual nodes for data bindings.