如何實現(xiàn)vue2.x數(shù)組劫持-創(chuàng)新互聯(lián)

小編這次要給大家分享的是如何實現(xiàn)vue2.x數(shù)組劫持，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

成都創(chuàng)新互聯(lián)始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達(dá)10余年累計超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的網(wǎng)絡(luò)營銷推廣解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都加固等企業(yè)，備受客戶贊美。

接上篇Vue2.x 對象劫持，繼續(xù)來寫數(shù)組劫持

實現(xiàn)原理：
1 重新定義原生數(shù)組方法push unshift shift pop splice sort reverse 因為這些方法可以修改原數(shù)組。
2 拿到原生數(shù)組方法 Object.create(Array.prototype)
3 AOP攔截,再執(zhí)行重寫數(shù)組方法前，先執(zhí)行原生數(shù)組方法

核心監(jiān)聽Observer代碼

// 把data中的數(shù)據(jù) 都使用Object.defineProperty重新定義 es5
// Object.defineProperty 不能兼容ie8 及以下 vue2 無法兼容ie8版本
import {arrayMethods} from './array.js'
import {
  isObject,def
} from '../util/index'
// 后續(xù)我可以知道它是不是一個已經(jīng)觀察了的數(shù)據(jù) __ob__
class Observer{
  constructor(value){ // 僅僅是初始化的操作
    // vue如果數(shù)據(jù)的層次過多 需要遞歸的去解析對象中的屬性，依次增加set和get方法
    // value.__ob__ = this; // 我給每一個監(jiān)控過的對象都增加一個__ob__屬性
    def(value,'__ob__',this);
    if(Array.isArray(value)){
      // 如果是數(shù)組的話并不會對索引進(jìn)行觀測 因為會導(dǎo)致性能問題
      // 前端開發(fā)中很少很少 去操作索引 push shift unshift 
      value.__proto__ = arrayMethods;
      // 如果數(shù)組里放的是對象我再監(jiān)控
      this.observerArray(value);
    }else{
       // 對數(shù)組監(jiān)控
      this.walk(value); // 對對象進(jìn)行觀測
    }
  }
  observerArray(value){ // [{}]
    for(let i = 0; i < value.length;i++){
      observe(value[i]);
    }
  }
  walk(data){
    let keys = Object.keys(data); // [name,age,address]
    // 如果這個data 不可配置 直接reurn
    keys.forEach((key)=>{
      defineReactive(data,key,data[key]);
    });
  }
}
function defineReactive(data,key,value){

  observe(value); // 遞歸實現(xiàn)深度檢測
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ // 獲取值的時候做一些操作
      return value;
    },
    set(newValue){ // 也可以做一些操作
      console.log('更新數(shù)據(jù)')
      if(newValue === value) return;
      observe(newValue); // 繼續(xù)劫持用戶設(shè)置的值，因為有可能用戶設(shè)置的值是一個對象
      value = newValue;
    }
  });
}

export function observe(data) {
  let isObj = isObject(data);
  if (!isObj) {
    return
  }
  return new Observer(data); // 用來觀測數(shù)據(jù)
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：如何實現(xiàn)vue2.x數(shù)組劫持-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article40/eegho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)頁設(shè)計公司、App開發(fā)、關(guān)鍵詞優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容