De escritura a mano Vue (1) una matriz de secuestro

1. Volvemos a escribir un archivo 

La creación de array.js

2. obtener una matriz de todos los métodos 

dejar que oldArrayProtoMethods = Array.prototype;

3. Crear un nuevo método Object.create () 

La creación de Object.create método () de un objeto nuevo, usando los objetos existentes para proporcionar el objeto recién creado de __proto__

La nueva copia del objeto a ser encontrado por el método antiguo 

exportación dejó arrayMethod = Object.create (oldArrayProtoMethods);

 

4. El método de la Declaración 7 

 

 

dejar métodos = [
   ' empuje ' ,
   ' pop ' ,
   ' unshift ' ,
   ' cambio ' ,
   ' tipo ' ,
   ' empalme ' ,
   ' revertir ' 
]

 

6. El método de adición de su funcionamiento array reescritura  

methods.forEach (Método => { 
  el console.log (Método) 
  arrayMethod [Método] = función (... args) { 
    Let R ^ = oldArrayProtoMethods [Método] .apply ( el este , args) 
    la console.log ( ' datos de llamadas actualiza método ' ) 
  } 
})

Iterar método para obtener la matriz original de maneras de cambiar este punto a punto a arrayMethod

7. Estos métodos prototipos gama montar

IF (Array.isArray (Data)) {
       // Sólo un elemento de cada matriz también es necesario para interceptar el método de matriz de observar 
      la console.log ( ' monitor de matriz ' ) 
      data._proto = arrayMethod 
    }

8. Prueba

index.js

Vue importación de  ' ../source/src/index ' ; 
dejar que vm = nueva Vue ({ 
  EL: ' #app ' , 
  los datos () { 
    retorno { 
      msg: ' hola ' , 
      la escuela: { 
        nombre: ' ZF ' , 
        edad: 10 
      }, 
      arr: [ 1 , 2 , 3 ] 
    } 
  }, 
  calculado: { 

  }, 
  reloj: { 

  }  
})
vm.arr.push ( 1111 ) 
console.log (vm.arr)   // hola

9. Resultados de la prueba

 

 

 

10.Push en la matriz podría ser un objetivo que debemos objeto dentro de la matriz de elementos que escuchas

En primer lugar claros solo empujar rebanada unshift tiene una serie de nuevas características por lo que tenemos que escuchar en estos métodos 

vamos insertada;
    interruptor (clave) {
       caso  ' empuje ' :
       caso  ' unshift ' : 
        insertado = args
         rompen ;

       caso 'de empalme':

      // 获取新增的 
        insertado = args.slice ( 2 )
         romper ;
      por defecto :
         romper ; 
    } 
    Si (insertada) observerArray (insertada)

11. traversal bucle de monitor a través de la matriz con el fin de añadir elementos a la nueva matriz cada observación

función de exportación observerArray (insertada) {
   para (dejó que i = 0 ; i <inserted.length; i ++ ) { 
    observo (insertado [i]) 
  } 
}

12. Cada entrada en la observer.js de observación array

    // Cada matriz de entrada observación 
      observerArray (datos)

13. Prueba

index.js

Vue importación de  ' ../source/src/index ' ; 
dejar que vm = nueva Vue ({ 
  EL: ' #app ' , 
  los datos () { 
    retorno { 
      msg: ' hola ' , 
      la escuela: { 
        nombre: ' ZF ' , 
        edad: 10 
      }, 
      arr: [ 1 , 2 , 3 ] 
    } 
  }, 
  calculado: { 

  }, 
  reloj: { 

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

Resultados de la prueba 14. 

 

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