Vue數(shù)據(jù)劫持詳情介紹

更新時(shí)間：2022年08月15日 09:29:26 作者：夏日

這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助

前言

Vue會對我們在data中傳入的數(shù)據(jù)進(jìn)行攔截：

對象：遞歸的為對象的每個(gè)屬性都設(shè)置get/set方法
數(shù)組：修改數(shù)組的原型方法，對于會修改原數(shù)組的方法進(jìn)行了重寫

在用戶為data中的對象設(shè)置值、修改值以及調(diào)用修改原數(shù)組的方法時(shí)，都可以添加一些邏輯來進(jìn)行處理，實(shí)現(xiàn)數(shù)據(jù)更新頁面也同時(shí)更新。

Vue中的響應(yīng)式(reactive): 對對象屬性或數(shù)組方法進(jìn)行了攔截，在屬性或數(shù)組更新時(shí)可以同時(shí)自動地更新視圖。在代碼中被觀測過的數(shù)據(jù)具有響應(yīng)性

創(chuàng)建Vue實(shí)例

我們先讓代碼實(shí)現(xiàn)下面的功能：

<body>
<script>
  const vm = new Vue({
    el: '#app',
    data () {
      return {
        age: 18
      };
    }
  });
  // 會觸發(fā)age屬性對應(yīng)的set方法
  vm.age = 20;
  // 會觸發(fā)age屬性對應(yīng)的get方法
  console.log(vm.age);
</script>
</body>

在src/index.js中，定義Vue的構(gòu)造函數(shù)。用戶用到的Vue就是在這里導(dǎo)出的Vue:

import initMixin from './init';

function Vue (options) {
  this._init(options);
}

// 進(jìn)行原型方法擴(kuò)展
initMixin(Vue);
export default Vue;

在init中，會定義原型上的_init方法，并進(jìn)行狀態(tài)的初始化：

import initState from './state';

function initMixin (Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    // 將用戶傳入的選項(xiàng)放到vm.$options上，之后可以很方便的通過實(shí)例vm來訪問所有實(shí)例化時(shí)傳入的選項(xiàng)
    vm.$options = options;
    initState(vm);
  };
}
export default initMixin;

在_init方法中，所有的options被放到了vm.$options中，這不僅讓之后代碼中可以更方便的來獲取用戶傳入的配置項(xiàng)，也可以讓用戶通過這個(gè)api來獲取實(shí)例化時(shí)傳入的一些自定義選選項(xiàng)。比如在Vuex 和Vue-Router中，實(shí)例化時(shí)傳入的router和store屬性便可以通過$options獲取到。

除了設(shè)置vm.$options，_init中還執(zhí)行了initState方法。該方法中會判斷選項(xiàng)中傳入的屬性，來分別進(jìn)行props、methods、data、watch、computed 等配置項(xiàng)的初始化操作，這里我們主要處理data選項(xiàng)：

import { observe } from './observer';
import { proxy } from './shared/utils';

function initState (vm) {
  const options = vm.$options;
  if (options.props) {
    initProps(vm);
  }
  if (options.methods) {
    initMethods(vm);
  }
  if (options.data) {
    initData(vm);
  }
  if (options.computed) {
    initComputed(vm)
  }
  if (options.watch) {
    initWatch(vm)
  }
}

function initData (vm) {
  let data = vm.$options.data;
  vm._data = data = typeof data === 'function' ? data.call(vm) : data;
  // 對data中的數(shù)據(jù)進(jìn)行攔截
  observe(data);
  // 將data中的屬性代理到vm上
  for (const key in data) {
    if (data.hasOwnProperty(key)) {
      // 為vm代理所有data中的屬性，可以直接通過vm.xxx來進(jìn)行獲取
      proxy(vm, key, data);
    }
  }
}
export default initState;

在initData中進(jìn)行了如下操作：

data可能是對象或函數(shù)，這里將data統(tǒng)一處理為對象
觀測data中的數(shù)據(jù)，為所有對象屬性添加set/get方法，重寫數(shù)組的原型鏈方法
將data中的屬性代理到vm上，方便用戶直接通過實(shí)例vm來訪問對應(yīng)的值，而不是通過vm._data來訪問

新建src/observer/index.js，在這里書寫observe函數(shù)的邏輯：

function observe (data) {
  // 如果是對象，會遍歷對象中的每一個(gè)元素
  if (typeof data === 'object' && data !== null) {
    // 已經(jīng)觀測過的值不再處理
    if (data.__ob__) {
      return;
    }
    new Observer(data);
  }
}
export { observe };

observe函數(shù)中會過濾data中的數(shù)據(jù)，只對對象和數(shù)組進(jìn)行處理，真正的處理邏輯在Observer中：

/**
 * 為data中的所有對象設(shè)置`set/get`方法
 */
class Observer {
  constructor (value) {
    this.value = value;
    // 為data中的每一個(gè)對象和數(shù)組都添加__ob__屬性，方便直接可以通過data中的屬性來直接調(diào)用Observer實(shí)例上的屬性和方法
    defineProperty(this.value, '__ob__', this);
    // 這里會對數(shù)組和對象進(jìn)行單獨(dú)處理，因?yàn)闉閿?shù)組中的每一個(gè)索引都設(shè)置get/set方法性能消耗比較大
    if (Array.isArray(value)) {
      Object.setPrototypeOf(value, arrayProtoCopy);
      this.observeArray(value);
    } else {
      this.walk();
    }
  }

  walk () {
    for (const key in this.value) {
      if (this.value.hasOwnProperty(key)) {
        defineReactive(this.value, key);
      }
    }
  }

  observeArray (value) {
    for (let i = 0; i < value.length; i++) {
      observe(value[i]);
    }
  }
}

需要注意的是，__ob__屬性要設(shè)置為不可枚舉，否則之后在對象遍歷時(shí)可能會引發(fā)死循環(huán)

Observer類中會為對象和數(shù)組都添加__ob__屬性，之后便可以直接通過data中的對象和數(shù)組vm.value.__ob__來獲取到Observer實(shí)例。

當(dāng)傳入的value為數(shù)組時(shí)，由于觀測數(shù)組的每一個(gè)索引會耗費(fèi)比較大的性能，并且在實(shí)際使用中，我們可能只會操作數(shù)組的第一項(xiàng)和最后一項(xiàng)，即arr[0],arr[arr.length-1],很少會寫出arr[23] = xxx的代碼。

所以我們選擇對數(shù)組的方法進(jìn)行重寫，將數(shù)組的原型指向繼承Array.prototype新創(chuàng)建的對象arrayProtoCopy，對數(shù)組中的每一項(xiàng)繼續(xù)進(jìn)行觀測。

創(chuàng)建data中數(shù)組原型的邏輯在src/observer/array.js中：

// if (Array.isArray(value)) {
//    Object.setPrototypeOf(value, arrayProtoCopy);
//    this.observeArray();
// }
const arrayProto = Array.prototype;
export const arrayProtoCopy = Object.create(arrayProto);

const methods = ['push', 'pop', 'unshift', 'shift', 'splice', 'reverse', 'sort'];

methods.forEach(method => {
  arrayProtoCopy[method] = function (...args) {
    const result = arrayProto[method].apply(this, args);
    console.log('change array value');
    // data中的數(shù)組會調(diào)用這里定義的方法，this指向該數(shù)組
    const ob = this.__ob__;
    let inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice': // splice(index,deleteCount,item1,item2)
        inserted = args.slice(2);
        break;
    }
    if (inserted) {ob.observeArray(inserted);}
    return result;
  };
});

通過Object.create方法，可以創(chuàng)建一個(gè)原型為Array.prototype的新對象arrayProtoCopy。修改原數(shù)組的7個(gè)方法會設(shè)置為新對象的私有屬性，并且在執(zhí)行時(shí)會調(diào)用arrayProto 上對應(yīng)的方法。

在這樣處理之后，便可以在arrayProto中的方法執(zhí)行前后添加自己的邏輯，而除了這7個(gè)方法外的其它方法，會根據(jù)原型鏈，使用arrayProto上的對應(yīng)方法，并不會有任何額外的處理。

在修改原數(shù)組的方法中，添加了如下的額外邏輯：

const ob = this.__ob__;
let inserted;
switch (method) {
  case 'push':
  case 'unshift':
    inserted = args;
    break;
  case 'splice': // splice(index,deleteCount,item1,item2)
    inserted = args.slice(2);
    break;
}
if (inserted) {ob.observeArray(inserted);}

push、unshift、splice會為數(shù)組新增元素，對于新增的元素，也要對其進(jìn)行觀測。這里利用到了Observer中為數(shù)組添加的__ob__屬性，來直接調(diào)用ob.observeArray ,對數(shù)組中新增的元素繼續(xù)進(jìn)行觀測。

對于對象，要遍歷對象的每一個(gè)屬性，來為其添加set/get方法。如果對象的屬性依舊是對象，會對其進(jìn)行遞歸處理

function defineReactive (target, key) {
  let value = target[key];
  // 繼續(xù)對value進(jìn)行監(jiān)聽，如果value還是對象的話，會繼續(xù)new Observer，執(zhí)行defineProperty來為其設(shè)置get/set方法
  // 否則會在observe方法中什么都不做
  observe(value);
  Object.defineProperty(target, key, {
    get () {
      console.log('get value');
      return value;
    },
    set (newValue) {
      if (newValue !== value) {
        // 新加的元素也可能是對象，繼續(xù)為新加對象的屬性設(shè)置get/set方法
        observe(newValue);
        // 這樣寫會新將value指向一個(gè)新的值，而不會影響target[key]
        console.log('set value');
        value = newValue;
      }
    }
  });
}

class Observer {
  constructor (value) {
    // some code ...
    if (Array.isArray(value)) {
      // some code ...
    } else {
      this.walk();
    }
  }

  walk () {
    for (const key in this.value) {
      if (this.value.hasOwnProperty(key)) {
        defineReactive(this.value, key);
      }
    }
  }

  // some code ...  
}

數(shù)據(jù)觀測存在的問題

檢測變化的注意事項(xiàng)

我們先創(chuàng)建一個(gè)簡單的例子：

const mv = new Vue({
  data () {
    return {
      arr: [1, 2, 3],
      person: {
        name: 'zs',
        age: 20
      }
    }
  }
})

對于對象，我們只是攔截了它的取值和賦值操作，添加值和刪除值并不會進(jìn)行攔截：

vm.person.school = '北大'
delete vm.person.age

而對于數(shù)組，用索引修改值以及修改數(shù)組長度不會被觀測到：

vm.arr[0] = 0
vm.arr.length--

為了能處理上述的情況，Vue為用戶提供了$set和$delete方法：

$set: 為響應(yīng)式對象添加一個(gè)屬性，確保新屬性也是響應(yīng)式的，因此會觸發(fā)視圖更新
$delete: 刪除對象上的一個(gè)屬性。如果對象是響應(yīng)式的，確保刪除觸發(fā)視圖更新。

結(jié)語

通過實(shí)現(xiàn)Vue的數(shù)據(jù)劫持，將會對Vue的數(shù)據(jù)初始化和響應(yīng)式有更深的認(rèn)識。

在工作中，我們可能總是會疑惑，為什么我更新了值，但是頁面沒有發(fā)生變化？現(xiàn)在我們可以從源碼的角度進(jìn)行理解，從而更清楚的知道代碼中存在的問題以及如何解決和避免這些問題。

源代碼: 傳送門

到此這篇關(guān)于Vue數(shù)據(jù)劫持詳情介紹的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)劫持內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

Vue數(shù)據(jù)劫持詳情介紹

目錄

前言

創(chuàng)建Vue實(shí)例

數(shù)據(jù)觀測存在的問題

結(jié)語

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具