亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

通過源碼分析Vue的雙向數(shù)據(jù)綁定詳解

 更新時間:2017年09月24日 14:47:16   作者:趙帥強  
使用vue也好有一段時間了,雖然對其雙向綁定原理也有了解個大概,但也沒好好探究下其原理實現(xiàn),下面這篇文章通過源碼主要分析了Vue的雙向數(shù)據(jù)綁定,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。

前言

雖然工作中一直使用Vue作為基礎(chǔ)庫,但是對于其實現(xiàn)機理僅限于道聽途說,這樣對長期的技術(shù)發(fā)展很不利。所以最近攻讀了其源碼的一部分,先把雙向數(shù)據(jù)綁定這一塊的內(nèi)容給整理一下,也算是一種學(xué)習(xí)的反芻。

本篇文章的Vue源碼版本為v2.2.0開發(fā)版。

Vue源碼的整體架構(gòu)無非是初始化Vue對象,掛載數(shù)據(jù)data/props等,在不同的時期觸發(fā)不同的事件鉤子,如created() / mounted() / update()等,后面專門整理各個模塊的文章。這里先講雙向數(shù)據(jù)綁定的部分,也是最主要的部分。

設(shè)計思想:觀察者模式

Vue的雙向數(shù)據(jù)綁定的設(shè)計思想為觀察者模式,為了方便,下文中將被觀察的對象稱為觀察者,將觀察者對象觸發(fā)更新的稱為訂閱者。主要涉及到的概念有:

1、Dep對象:Dependency依賴的簡寫,包含有三個主要屬性id, subs, target和四個主要函數(shù)addSub, removeSub, depend, notify,是觀察者的依賴集合,負(fù)責(zé)在數(shù)據(jù)發(fā)生改變時,使用notify()觸發(fā)保存在subs下的訂閱列表,依次更新數(shù)據(jù)和DOM。

  • id: 每個觀察者(依賴對象)的唯一標(biāo)識。
  • subs: 觀察者對象的訂閱者列表。
  • target: 全局唯一的訂閱者對象,因為只能同時計算和更新一個訂閱者的值。
  • addSub(): 使用`push()`方法添加一個訂閱者。
  • removeSub(): 使用`splice()`方法移除一個訂閱者。
  • depend(): 將自己添加到當(dāng)前訂閱者對象的依賴列表。
  • notify(): 在數(shù)據(jù)被更新時,會遍歷subs對象,觸發(fā)每一個訂閱者的更新。

2、Observer對象:即觀察者,包含兩個主要屬性value, dep。做法是使用getter/setter方法覆蓋默認(rèn)的取值和賦值操作,將對象封裝為響應(yīng)式對象,每一次調(diào)用時更新依賴列表,更新值時觸發(fā)訂閱者。綁定在對象的__ob__原型鏈屬性上。

  • value: 原始值。
  • dep: 依賴列表。

源碼實戰(zhàn)解析

有過Vue開發(fā)基礎(chǔ)的應(yīng)該都了解其怎么初始化一個Vue對象:

new Vue({
 el: '#container',
 data: {
  count: 100
 },
 ...
});

那么我們就從這個count說起,看它是怎么完成雙向數(shù)據(jù)綁定的。

下面的代碼片段中英文注釋為尤雨溪所寫,中文注釋為我所寫,英文注釋更能代表開發(fā)者的清晰思路。

首先從全局的初始化函數(shù)調(diào)用:initMixin(Vue$3); ,這里的Vue$3對象就是全局的Vue對象,在此之前已經(jīng)掛載了Vue的各種基本數(shù)據(jù)和函數(shù)。這個函數(shù)體就是初始化我們上面聲明Vue語句的過程化邏輯,取主體代碼來看:

// 這里的options就是上面聲明Vue對象的json對象
Vue.prototype._init = function (options) {
 ...
 var vm = this;
 ...
 initLifecycle(vm);
 initEvents(vm);
 initRender(vm);
 callHook(vm, 'beforeCreate');
 // 這里就是我們接下來要跟進的初始化Vue參數(shù)
 initState(vm);
 initInjections(vm);
 callHook(vm, 'created');
 ...
 };

這里主要完成了初始化事件、渲染、參數(shù)、注入等過程,并不斷調(diào)用事件鉤子的回調(diào)函數(shù)。下面來到如何初始化參數(shù):

function initState (vm) {
 vm._watchers = [];
 var opts = vm.$options;
 if (opts.props) { initProps(vm, opts.props); }
 if (opts.methods) { initMethods(vm, opts.methods); }
 // 我們的count在這里初始化
 if (opts.data) {
 initData(vm);
 } else {
 observe(vm._data = {}, true /* asRootData */);
 }
 if (opts.computed) { initComputed(vm, opts.computed); }
 if (opts.watch) { initWatch(vm, opts.watch); }
}

這里依次檢測參數(shù)中包含的props/methods/data/computed/watch并進入不同的函數(shù)進行初始化,這里我們只關(guān)心initData:

function initData (vm) {
 var data = vm.$options.data;
 data = vm._data = typeof data === 'function'
 ? data.call(vm)
 : data || {};
 if (!isPlainObject(data)) {
 data = {};
 }
 ...
 // observe data
 observe(data, true /* asRootData */);

可以看到Vue的data參數(shù)支持對象和回調(diào)函數(shù),但最終返回的一定是對象,否則使用空對象。接下來就是重頭戲了,我們?nèi)绾螌ata參數(shù)設(shè)置為響應(yīng)式的:

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
function observe (value, asRootData) {
 if (!isObject(value)) {
 return
 }
 var ob;
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
 ob = value.__ob__;
 } else if (
 /* 為了防止value不是單純的對象而是Regexp或者函數(shù)之類的,或者是vm實例再或者是不可擴展的 */
 observerState.shouldConvert &&
 !isServerRendering() &&
 (Array.isArray(value) || isPlainObject(value)) &&
 Object.isExtensible(value) &&
 !value._isVue
 ) {
 ob = new Observer(value);
 }
 if (asRootData && ob) {
 ob.vmCount++;
 }
 return ob
}

這里的英文注釋非常清晰,就是為了給該對象新建一個觀察者類,如果存在則返回已存在的(比如互相引用或依賴重復(fù)),可以看到這個觀察者列表放置在對象的__ob__屬性下。下面我們看下這個Observer觀察者類:

/**
 * Observer class that are attached to each observed
 * object. Once attached, the observer converts target
 * object's property keys into getter/setters that
 * collect dependencies and dispatches updates.
 */
var Observer = function Observer (value) {
 this.value = value;
 this.dep = new Dep();
 this.vmCount = 0;
 // def函數(shù)是defineProperty的簡單封裝
 def(value, '__ob__', this);
 if (Array.isArray(value)) {
 // 在es5及更低版本的js里,無法完美繼承數(shù)組,這里檢測并選取合適的函數(shù)
 // protoAugment函數(shù)使用原型鏈繼承,copyAugment函數(shù)使用原型鏈定義(即對每個數(shù)組defineProperty)
 var augment = hasProto
  ? protoAugment
  : copyAugment;
 augment(value, arrayMethods, arrayKeys);
 this.observeArray(value);
 } else {
 this.walk(value);
 }
};

在Observer類的注釋里也清楚的說明,它會被關(guān)聯(lián)到每一個被檢測的對象,使用getter/setter修改其默認(rèn)讀寫,用于收集依賴和發(fā)布更新。其中出現(xiàn)了三個我們需要關(guān)心的東西Dep類/observeArray/walk,我們先看observeArray的源碼:

/**
 * Observe a list of Array items.
 */
Observer.prototype.observeArray = function observeArray (items) {
 for (var i = 0, l = items.length; i < l; i++) {
 observe(items[i]);
 }
};

它不過是在Observer類和observe方法中間的一層遞歸,因為我們觀察的只能是對象,而不能是數(shù)字、字符串或者數(shù)組(數(shù)組的觀察比較特殊,事實上是重構(gòu)了方法來觸發(fā)更新,后面會講到)。那我們接下來看下Dep類是做什么用的:

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
var Dep = function Dep () {
 this.id = uid$1++;
 this.subs = [];
};

注釋里告訴我們Dep類是一個會被多個指令訂閱的可被觀察的對象,這里的指令就是我們在html代碼里書寫的東西,如:class={active: hasActive}{{ count }} {{ count * price }} ,而他們就會訂閱hasActive/count/price這些對象,而這些訂閱他們的對象就會被放置在Dep.subs列表中。每一次新建Dep對象,就會全局uid遞增,然后傳給該Dep對象,保證唯一性id。

我們接著看剛才的walk函數(shù)做了什么:

/**
 * Walk through each property and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 */
Observer.prototype.walk = function walk (obj) {
 var keys = Object.keys(obj);
 for (var i = 0; i < keys.length; i++) {
 defineReactive$$1(obj, keys[i], obj[keys[i]]);
 }
};

看來和名字一樣,它只是走了一遍,那我們來看下defineReactive$$1做了什么:

/**
 * Define a reactive property on an Object.
 */
function defineReactive$$1 (obj, key, val, customSetter) {
 var dep = new Dep();

 var property = Object.getOwnPropertyDescriptor(obj, key);
 if (property && property.configurable === false) {
 return
 }

 // cater for pre-defined getter/setters
 var getter = property && property.get;
 var setter = property && property.set;

 var childOb = observe(val);
 Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  var value = getter ? getter.call(obj) : val;
  if (Dep.target) {
  dep.depend();
  if (childOb) {
   childOb.dep.depend();
  }
  if (Array.isArray(value)) {
   dependArray(value);
  }
  }
  return value
 },
 set: function reactiveSetter (newVal) {
  var value = getter ? getter.call(obj) : val;
  // 臟檢查,排除了NaN !== NaN的影響
  if (newVal === value || (newVal !== newVal && value !== value)) {
  return
  }
  if (setter) {
  setter.call(obj, newVal);
  } else {
  val = newVal;
  }
  childOb = observe(newVal);
  dep.notify();
 }
 });
}

終于找到重頭戲了,這里真正使用了getter/setter代理了對象的默認(rèn)讀寫。我們首先新建一個Dep對象,利用閉包準(zhǔn)備收集依賴,然后我們使用observe觀察該對象,注意此時與上面相比少了一個asRootData = true的參數(shù)。

我們先來看取值的代理get,這里用到了Dep.target屬性和depend()方法,我們來看看它是做什么的:

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null;

Dep.prototype.depend = function depend () {
 if (Dep.target) {
 Dep.target.addDep(this);
 }
};

Dep.prototype.notify = function notify () {
 // stablize the subscriber list first
 var subs = this.subs.slice();
 for (var i = 0, l = subs.length; i < l; i++) {
 subs[i].update();
 }
};

注釋看的出來Dep.target是全局唯一的watcher對象,也就是當(dāng)前正在指令計算的訂閱者,它會在計算時賦值成一個watcher對象,計算完成后賦值為null。而depend是用于對該訂閱者添加依賴,告訴它你的值依賴于我,每次更新時應(yīng)該來找我。另外還有notify()的函數(shù),用于遍歷所有的依賴,通知他們更新數(shù)據(jù)。

這里多看一下addDep()的源碼:

/**
 * Add a dependency to this directive.
 */
Watcher.prototype.addDep = function addDep (dep) {
 var id = dep.id;
 if (!this.newDepIds.has(id)) {
 this.newDepIds.add(id);
 this.newDeps.push(dep);
 if (!this.depIds.has(id)) {
  // 使用push()方法添加一個訂閱者
  dep.addSub(this);
 }
 }
};

可以看到它有去重的機制,當(dāng)重復(fù)依賴時保證相同ID的依賴只有一個。訂閱者包含3個屬性newDepIds/newDeps/depIds分別存儲依賴信息,如果之前就有了這個依賴,那么反過來將該訂閱者加入到這個依賴關(guān)系中去。

接著看get方法中的dependArray()

/**
 * Collect dependencies on array elements when the array is touched, since
 * we cannot intercept array element access like property getters.
 */
function dependArray (value) {
 for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
 e = value[i];
 e && e.__ob__ && e.__ob__.dep.depend();
 if (Array.isArray(e)) {
  dependArray(e);
 }
 }
}

可以看到我們不能像對象一樣監(jiān)聽數(shù)組的變化,所以如果獲取一個數(shù)組的值,那么就需要將數(shù)組中所有的對象的觀察者列表都加入到依賴中去。

這樣get方法讀取值就代理完成了,接下來我們看set方法代理賦值的實現(xiàn),我們先獲取原始值,然后與新賦的值進行比較,也叫臟檢查,如果數(shù)據(jù)發(fā)生了改變,則對該數(shù)據(jù)進行重新建立觀察者,并通知所有的訂閱者更新。

接下來我們看下數(shù)組的更新檢測是如何實現(xiàn)的:

/*
 * not type checking this file because flow doesn't play well with
 * dynamically accessing methods on Array prototype
 */
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function (method) {
 // cache original method
 var original = arrayProto[method];
 def(arrayMethods, method, function mutator () {
 var arguments$1 = arguments;
 // avoid leaking arguments:
 // http://jsperf.com/closure-with-arguments
 var i = arguments.length;
 var args = new Array(i);
 while (i--) {
  args[i] = arguments$1[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
 });
});

看的出來我們模擬了一個數(shù)組對象,代理了push/pop/shift/unshift/splice/sort/reverse方法,用于檢測數(shù)組的變化,并通知所有訂閱者更新。如果有新建元素,會補充監(jiān)聽新對象。

這就是從代碼上解釋為什么Vue不支持?jǐn)?shù)組下標(biāo)修改和長度修改的原因,至于為什么這么設(shè)計,我后面會再次更新或再開篇文章,講一些通用的設(shè)計問題以及Js機制和缺陷。

總結(jié)

從上面的代碼中我們可以一步步由深到淺的看到Vue是如何設(shè)計出雙向數(shù)據(jù)綁定的,最主要的兩點:

  • 使用getter/setter代理值的讀取和賦值,使得我們可以控制數(shù)據(jù)的流向。
  • 使用觀察者模式設(shè)計,實現(xiàn)了指令和數(shù)據(jù)的依賴關(guān)系以及觸發(fā)更新。
  • 對于數(shù)組,代理會修改原數(shù)組對象的方法,并觸發(fā)更新。

明白了這些原理,其實你也可以實現(xiàn)一個簡單的數(shù)據(jù)綁定,造一個小輪子,當(dāng)然,Vue的強大之處不止于此,我們后面再來聊一聊它的組件和渲染,看它是怎么一步一步將我們從DOM對象的魔爪里拯救出來的。

好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。

參考資料

數(shù)據(jù)的響應(yīng)化:https://github.com/Ma63d/vue-...
Vue v2.2.0 源代碼文件
es6 Proxy: http://es6.ruanyifeng.com/#do...

相關(guān)文章

  • Vue常見錯誤Error?in?mounted?hook解決辦法

    Vue常見錯誤Error?in?mounted?hook解決辦法

    這篇文章主要給大家介紹了關(guān)于Vue常見錯誤Error?in?mounted?hook的解決辦法,出現(xiàn)這樣的問題,會發(fā)現(xiàn)跟聲明周期鉤子有關(guān)系,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-07-07
  • 使用VUE+iView+.Net Core上傳圖片的方法示例

    使用VUE+iView+.Net Core上傳圖片的方法示例

    這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • vue Render中slots的使用的實例代碼

    vue Render中slots的使用的實例代碼

    本篇文章主要介紹了vue Render中slots的使用的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-07-07
  • vite打包優(yōu)化CDN壓縮的分析實現(xiàn)

    vite打包優(yōu)化CDN壓縮的分析實現(xiàn)

    我們在日常的工作中肯定會遇到項目打包優(yōu)化等問題,本文主要介紹了vite打包優(yōu)化CDN壓縮的分析實現(xiàn),具有一定的參加價值,感興趣的可以了解一下
    2024-07-07
  • 解決vue頁面DOM操作不生效的問題

    解決vue頁面DOM操作不生效的問題

    下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue實現(xiàn)日歷備忘錄功能

    vue實現(xiàn)日歷備忘錄功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)日歷備忘錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • vue form表單使用resetFields函數(shù)出現(xiàn)的問題

    vue form表單使用resetFields函數(shù)出現(xiàn)的問題

    這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue計算屬性computed方法內(nèi)傳參方式

    vue計算屬性computed方法內(nèi)傳參方式

    這篇文章主要介紹了vue計算屬性computed方法內(nèi)傳參方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue和SpringBoot之間傳遞時間的方法實現(xiàn)

    Vue和SpringBoot之間傳遞時間的方法實現(xiàn)

    本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-07-07
  • vue移動端微信授權(quán)登錄插件封裝的實例

    vue移動端微信授權(quán)登錄插件封裝的實例

    今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論