Caligrafia vue (1) uma matriz de sequestro

1. Nós reescrever um arquivo 

criando array.js

2. obter uma matriz de todos os métodos 

deixar oldArrayProtoMethods = Array.prototype;

3. Criar um novo método Object.create () 

Criando Object.create método () um novo objeto, usando os objetos existentes para fornecer o objeto recém-criado de __proto__

A nova cópia do objeto a ser encontrado pelo método antigo 

exportação deixar arrayMethod = Object.create (oldArrayProtoMethods);

 

4. O método de comunicação 7 

 

 

deixar métodos = [
   ' impulso ' ,
   ' pop ' ,
   ' unshift ' ,
   ' mudança ' ,
   ' tipo ' ,
   ' tala ' ,
   ' reverse ' 
]

 

6. O método de adição a sua operação matriz reescrita  

methods.forEach (Método => { 
  o console.log (Método) 
  arrayMethod [Método] = função (... args) { 
    let R & lt = oldArrayProtoMethods [Método] .Aplique ( o presente , args) 
    o console.log ( ' dados de chamada atualizadas método ' ) 
  } 
})

método Iterate para obter a matriz original de maneiras de mudar esse ponto para apontar para arrayMethod

7. Estes métodos protótipo conjunto de montagem

IF (Array.isArray (Dados)) {
       // Apenas um item de cada matriz também necessita de interceptar o método de matriz de observar 
      o console.log ( ' conjunto de monitores ' ) 
      data._proto = arrayMethod 
    }

8. Teste

index.js

importação Vue de  ' ../source/src/index ' ; 
vamos vm = new Vue ({ 
  el: ' #app ' , 
  de dados () { 
    return { 
      msg: ' Olá ' , 
      escola: { 
        name: ' zf ' , 
        idade: 10 
      }, 
      arr: [ 1 , 2 , 3 ] 
    } 
  }, 
  calculado: { 

  }, 
  relógio: { 

  } 
})
vm.arr.push ( 1111 ) 
console.log (vm.arr)   // Olá

9. Resultados do Teste

 

 

 

10.push para a matriz poderia ser um alvo que deve opor dentro da matriz de itens que escutas

Primeiro limpar apenas empurrar fatia unshift tem uma variedade de novos recursos por isso temos de ouvir esses métodos 

deixar inserido;
    interruptor (chave) {
       caso  ' impulso ' :
       caso  ' unshift ' : 
        inserido = args
         quebrar ;

       caso 'tala':

      // 获取新增的 
        inserido = args.slice ( 2 )
         quebrar ;
      padrão :
         quebrar ; 
    } 
    Se (inserido) observerArray (inserido)

11. travessia monitorar loop através da matriz, a fim de adicionar itens à nova matriz cada observação

função de exportação observerArray (inserido) {
   para (deixar i = 0 ; i <inserted.length; i ++ ) { 
    observar (inserido [i]) 
  } 
}

12. Cada entrada na observer.js observação matriz

    // Cada matriz de entrada observação 
      observerArray (dados)

13. Teste

index.js

importação Vue de  ' ../source/src/index ' ; 
vamos vm = new Vue ({ 
  el: ' #app ' , 
  de dados () { 
    return { 
      msg: ' Olá ' , 
      escola: { 
        name: ' zf ' , 
        idade: 10 
      }, 
      arr: [ 1 , 2 , 3 ] 
    } 
  }, 
  calculado: { 

  }, 
  relógio: { 

  }
})
vm.arr.push ({a:1 }) 
console.log (vm.arr [ 3 ] .a)   // Olá

14. resultados de teste 

 

código Cloud: https://gitee.com/guangzhou110/handwritten_vue/tree/master/vue%20%E6%95%B0%E7%BB%84%E5%8A%AB%E6%8C%81