vue 2.x 배열 납치 원리 의 실현

전편Vue2.x 대상 납치을 이 어 여러 조 의 납 치 를 계속 쓰 겠 습 니 다.
실현 원리:
1.원생 배열 방법 push unshift shift pop splice sort reverse 를 다시 정의 합 니 다.이 방법 들 은 원 배열 을 수정 할 수 있 기 때 문 입 니 다.
2.네 이 티 브 배열 방법 Object.create(Array.prototype)
3 AOP 차단,다시 쓰기 배열 방법 을 실행 하기 전에 네 이 티 브 배열 방법 을 실행 합 니 다.
핵심 감청 Observer 코드

//  data        Object.defineProperty     es5
// Object.defineProperty     ie8     vue2     ie8  
import {arrayMethods} from './array.js'
import {
  isObject,def
} from '../util/index'
//                       __ob__
class Observer{
  constructor(value){ //          
    // vue                        ，    set get  
    // value.__ob__ = this; //                 __ob__  
    def(value,'__ob__',this);
    if(Array.isArray(value)){
      //                            
      //                 push shift unshift 
      value.__proto__ = arrayMethods;
      //               
      this.observerArray(value);
    }else{
       //      
      this.walk(value); //        
    }
  }
  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); //         
  Object.defineProperty(data,key,{
    configurable:true,
    enumerable:false,
    get(){ //            
      return value;
    },
    set(newValue){ //         
      console.log('    ')
      if(newValue === value) return;
      observe(newValue); //           ，                
      value = newValue;
    }
  });
}

export function observe(data) {
  let isObj = isObject(data);
  if (!isObj) {
    return
  }
  return new Observer(data); //       
}

네 이 티 브 배열 재 작성 방법

//             7  push shift unshift pop reverse sort splice            
// slice()


let oldArrayMethods = Array.prototype;
// value.__proto__ = arrayMethods         ，      ，       ，            
// arrayMethods.__proto__ = oldArrayMethods
export const arrayMethods = Object.create(oldArrayMethods); 

const methods = [
  'push',
  'shift',
  'unshift',
  'pop',
  'sort',
  'splice',
  'reverse'
]
methods.forEach(method=>{
  arrayMethods[method] = function (...args) { 
    const result = oldArrayMethods[method].apply(this,args); //          
    // push unshift              
    let inserted; //          
    let ob = this.__ob__;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice': // 3        splice            arr.splice(0,1,{name:1})
        inserted = args.slice(2)
      default:
        break;
    }
    if(inserted) ob.observerArray(inserted); //          


    return result;
  }
})

도구 방법 정 의 는 다음 과 같 습 니 다.

/**
 * 
 * @param {*} data          
 */
export function isObject(data) {
  return typeof data === 'object' && data !== null;
}
export function def(data,key,value){
  Object.defineProperty(data,key,{
    enumerable:false,
    configurable:false,
    value
  })
}

vue 2.x 배열 의 납치 원리 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 2.x 배열 의 납치 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!