国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js源碼(2):初探List Rendering

shiyang6017 / 1197人閱讀

摘要:最后舉兩個例子,回顧上面的內容例一改變的是數(shù)組元素中屬性,由于創(chuàng)建的的指令,因此這里直接由指令更新對應元素的內容。

下面例子來自官網(wǎng),雖然看上去就比Hello World多了一個v-for,但是內部多了好多的處理過程。但是這就是框架,只給你留下最美妙的東西,讓生活變得簡單。

  • {{ 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的背后的內容,這將對本篇的compile,link和bind過程的理解有幫助:

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

link階段:實例化指令,替換DOM

bind階段:調用指令的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ù)組進行擴展,使其能detect change。這里面有兩個內容,一個是攔截數(shù)組的mutation methods(導致數(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進行包裝:

調用原生的Array.prototype中的方法

檢查是否有新的值被插入(主要是push, unshift和splice方法)

如果有新值插入,observe它們

最后就是notify change:調用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ù)組對象都observe一遍,為各自對象生成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進行指令類型,指令參數(shù),表達式,過濾器等的解析。

遞歸過程大致如下:

compile當前node

如果當前node沒有terminal directive,則遍歷child node,分別對其compile node

如果當前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的中間產物是directive的descriptor,也可能會創(chuàng)建directive來管理的document fragment。這些產物是在link階段時需要用來實例化directive的。從racap中的圖可以清楚的看到,compile過程產出了和link過程怎么使用的它們。那么現(xiàn)在看看v-for的情況:

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

v-for descriptor:

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)進行綁定。但是本文例子中,可以看到compile過程沒有創(chuàng)建fragment。這里的link過程只實例化指令,其他過程將發(fā)生在v-for指令內部。

bind

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

在v-for的bind()里面,做了三件事:

重新賦值expression,找出alias:"todo in todos"里面,todo是alias,todos才是真正的需要監(jiān)聽的表達式

移除

  • {{todo.text}}
  • 元素,替換上start和end錨點(anchor)。錨點用來幫助插入最終的li節(jié)點

    創(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內部實現(xiàn)的一個類,源碼注釋解釋為:

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

    FragmentFactory會compile

  • {{todo.text}}
  • ,并保存返回的linker。在v-for中,數(shù)組發(fā)生變化時,將創(chuàng)建scope,克隆template,即
  • {{todo.text}}
  • ,使用linker,實例化Fragment,然后掛在end錨點上。

    在Fragment中調用linker時,就是link和bind

  • {{todo.text}}
  • ,和Hello World中一樣,創(chuàng)建v-text實例,創(chuàng)建watcher。

    大圖鏈接

    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指令里,會擴展其父作用域,本例中父作用域對象就是vm本身。在調用factory創(chuàng)建每一個fragment時,都會以下面方式創(chuàng)建合適的child scope給其使用:

    // file path: /src/directives/public/for.js
    create (value, alias, index, key) {
        // index是遍歷數(shù)組時的下標
        // value是對應下標的數(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的過程,里面有很多概念沒有深入,打算放在后面結合其他使用這些概念的地方一起在分析,應該能體會到其巧妙的設計。

    最后舉兩個例子,回顧上面的內容

    例一:

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

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

    例二:

    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算法中再看。

    到這里,應該對官網(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.

    文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80413.html

    相關文章

    • 2017-09-27 前端日報

      摘要:前端日報精選是如何工作的內存管理如何處理個常見的內存泄漏譯中的面向對象原型原型鏈繼承源碼事件機制考拉升級經(jīng)驗掘金中文第期你知道編譯與解釋的區(qū)別嗎視頻在白鷺引擎中的實踐王澤變量自定義屬性使用指南眾成翻譯禁止手機虛擬鍵盤彈出做 2017-09-27 前端日報 精選 JavaScript是如何工作的:內存管理 + 如何處理4個常見的內存泄漏(譯) js中的面向對象、原型、原型鏈、繼承Vue....

      wangym 評論0 收藏0
    • vue初探-簡易留言板

      摘要:學完的基礎語法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉的基礎語法使用。 學完vue的基礎語法之后,練手一下,從最基本的留言板開刀吧。功能不多,主要為了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0 技術框架 1.vue.js 2.0 2.bootstrap 語法概述 這里只寫一點此例子用到的一些語法知識,詳細API請移步:vue 2.0 a...

      GHOST_349178 評論0 收藏0
    • Vue.js 官方示例初探(ES6 改寫)

      摘要:雙嘆號強制類型轉換為布爾值。官方示例代碼用注冊了全局組件,會把自動注冊為屬性,所以沒有手動寫屬性。如果對象是響應的,將觸發(fā)視圖更新。這是用來布爾值,又學了一招和分別代表單擊和雙擊事件綁定。 如果覺得有幫助,歡迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感謝作者 @尤小右 大大邊寫的超級帶感的 Vue.js 前端框架,贈送...

      Jason 評論0 收藏0
    • 使用 PHP 來做 Vue.js 的 SSR 服務端渲染

      摘要:對于客戶端應用來說,服務端渲染是一個熱門話題。在服務器預渲染初始應用狀態(tài)。重構這段腳本,使其可以在服務端運行。如果這些原因和你的情況吻合,那么使用進行服務端渲染將會是個不錯方案。我已經(jīng)發(fā)布兩個庫來支持的服務端渲染和專為應用打造的。 showImg(https://segmentfault.com/img/remote/1460000014155032);對于客戶端應用來說,服務端渲染是...

      李增田 評論0 收藏0
    • 初探Vue之環(huán)境搭建

      摘要:最近得閑,想總結總結最近在學習上的一些心得,畢竟作為新手多寫多練好處多多,話不多說,馬上開始前端工程化為開發(fā)帶來了很多便利,但實際是,環(huán)境的配置也要大費周章一番。 最近得閑,想總結總結最近在學習Vue上的一些心得,畢竟作為新手多寫多練好處多多,話不多說,馬上開始! 前端工程化為開發(fā)帶來了很多便利,但實際是,環(huán)境的配置也要大費周章一番。我用的是在Node環(huán)境下基于webpack來編譯打...

      hiYoHoo 評論0 收藏0

    發(fā)表評論

    0條評論

    shiyang6017

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <