El principio de cómo vue vincula datos a componentes
El principio de vincular datos a componentes en Vue es el siguiente:
1 Al crear una instancia del constructor de Vue, se ejecutará el método init de Vue, que ejecuta principalmente tres partes: Inicializar el entorno. variables, procesar datos de componentes Vue y analizar componentes montados. Estas tres partes constituyen todo el proceso de ejecución de Vue.
2.Vue implementa el patrón observador-consumidor (suscriptor) para implementar vistas basadas en datos. Supervise los cambios de datos configurando los métodos de establecimiento/obtención de las propiedades del objeto. El método de establecimiento de cada propiedad es un observador. Cuando la propiedad cambia, el observador enviará un mensaje al suscriptor, lo que impulsará la actualización de la vista.
3. El observador de suscriptores de Vue se encuentra en?/src/watchr.js? Los parámetros más importantes para construir un observador son expOrFn y cb. cb es la devolución de llamada que el suscriptor debe ejecutar después de recibir el mensaje. En términos generales, esta devolución de llamada es el método de actualización de la instrucción de vista para lograr la actualización de la vista. necesario Sí, la devolución de llamada de suscripción también puede ser una función pura que no tiene nada que ver con nada. Es importante que los suscriptores sepan a qué se suscriben. Los observadores obtienen indirectamente las propiedades del objeto de suscripción analizando el método getter de expOrFn.
4. Implementación de enlace de datos bidireccional de Vue
El enlace y la sincronización de datos y vistas se reflejan en última instancia en el proceso de lectura y escritura de datos, es decir, en el conjunto de datos. , la función get se compone de la definición Object.defineProperty(). En la implementación simplificada, solo mantuve algunas funciones básicas:
function defineReactive(obj, key, value) {
var dep = new Dep()
Object.defineProperty(obj, clave, {
enumerable: verdadero,
configurable: verdadero,
get: función reactivaGetter() {
if (Dep.target) {
dep.depend()
}
valor de retorno
},
set: function reactiveSetter(newVal) {
if (value === newVal) {
return
} else {
valor = newVal
dep.notify()
}
}
})
}
Al leer datos, si hay un observador (supongo que el observador de los datos, que será responsable de enviar los nuevos datos obtenidos a la vista), entonces vincule el observador a la vista actual. La determinación de datos (dep.depend(), dep asocia los datos actuales con todas las dependencias del observador) es un proceso de verificación y registro de dependencias. Al asignar valores a los datos, se notifica a todos los observadores (con dep.notify()) si los datos cambian. De esta manera, incluso si cambiamos los datos manualmente, el marco puede sincronizar automáticamente los datos en la vista.