Interpretar el código fuente de enlace bidireccional de la instancia vue

Vue es un framework de JavaScript front-end progresivo puro que realiza operaciones de datos basadas en MVVM.

 

Primero, primero entendamos qué es MVVM.

El modo MVVM (Modelo — Vista — Modelo de vista) se divide en tres bloques:

1. Modelo: Datos del modelo, el objeto que contiene todos los datos de la instancia ----- datos, contiene lógica de negocios.

2. Ver: Ver, el diseño y la apariencia de toda la interfaz.

3. ViewModel: el modelo de vista, que actúa como el "embajador" de View and Model, une la vista y el modelo e implementa la lógica empresarial de View.

 

 

 

Segundo, el principio de enlace bidireccional de datos vue

Principio: principalmente a través del método Object.defineProperty () para el secuestro de datos y la cooperación con el modelo de suscripción de editor.

1. Object.defineProperty () ：

var vm = new Vue ({ 
    data: { 
        obj: {a: 1 } 
    }, 
    created () { 
        console.log ( this .obj); 
    } 
});

Puede ver que el atributo a tiene dos métodos get y set correspondientes. ¿Por qué hay dos métodos más? Porque vue implementa el secuestro de datos a través de Object.defineProperty (). Puede controlar algunas operaciones únicas de un atributo de objeto, como los derechos de lectura y escritura, si se puede enumerar, aquí estudiamos principalmente los dos atributos de descripción get y set correspondientes a él.

 

2. Secuestro de datos: cuando se instancia vue, atravesará todos los atributos y agregará métodos get y set a estos atributos para realizar el secuestro de datos (anular los métodos get y set de datos).

 

3. Modelo de suscripción del editor: https://www.jianshu.com/p/2ec316ca0f8b

 

 

 

3. Implementación específica:

　　Como se mencionó anteriormente, el enlace bidireccional se logra a través del secuestro de datos. Antes de realizar el secuestro de datos, debe controlar si los datos han cambiado (observador oyente) ; cuando escuche un cambio, debe decirle al suscriptor si necesita cambiarlo (suscriptor observador) , y cuándo hay Muchos suscriptores necesitan un administrador para administrar una gran cantidad de suscriptores (administrador de suscripción Dep) ; a continuación, necesitamos tener un analizador de comandos para escanear y analizar cada nodo (instrucciones de nodo de análisis como v-on) , Inicialícelos en un Subscriber Watcher, y vincule la función correspondiente (compilar analizador de instrucciones) , Watcher comparará los dos valores antes y después de los cambios, y luego determinará si se debe notificar a la vista para volver a renderizar.

Este diagrama debería ser más claro:

 

 

 

 Lo que hay que hacer:

1. Implemente un oyente, Observer, para secuestrar y monitorear todas las propiedades, y notifique a los suscriptores si hay un cambio.

2. Implemente un Watcher de suscriptor para recibir notificaciones de cambios en los atributos del oyente y ejecute las funciones correspondientes para actualizar la vista.

3. Implemente un administrador de suscriptores Dep, usado para administrar muchos suscriptores.

4. Implemente una compilación de analizador, que se utiliza para escanear y analizar las instrucciones relevantes de cada nodo, inicializar datos de plantilla y suscriptores.

Cuarto, primero conozca el método Object.defineProperty () para lograr el secuestro de datos (método de sobrescritura)

// Acceso normal a las propiedades de un objeto 
var Libro = { 
  nombre: 'vue guía autorizada' 
}; 
console.log (Book.name);   // vue guía autorizada

Si desea agregar directamente un número de título al título del libro mientras ejecuta console.log (book.name), ¿qué debe hacer? En otras palabras, qué escuchar el valor de propiedad del objeto Libro. En este momento, Object.defineProperty () es útil, el código es el siguiente:

let Book = {}; 
let name = '' ; 
Object.defineProperty (Book, 'name' , { 
    set (value) { 
        name = value; 
        console.log ( 'Has nombrado un nombre de libro:' + value); 
    } , 
    get () { 
        return '《' + name + '》' 
    } 
}); 
Book.name = 'vue authoritative guide' ; // Usted nombró el título de un libro: vue autoridad autorizada 
console.log (Book.name); / / "La guía definitiva para vue"

 // Continuará

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Referencia: https://www.jianshu.com/p/5fe2664ff5f7

Referencia: https://www.cnblogs.com/libin-1/p/6893712.html

Referencia: https://segmentfault.com/a/1190000014274840#comment-area