¿Cuándo puedo empezar a aprender Vue?

Ruta de aprendizaje: H5 + CSS3 ---> ES6 ---> Red ---> Biblioteca de terceros ---> Ingeniería ---> Vue

Es imposible aprender vue sin pasar por el presagio anterior, incluso si lo aprendes, tienes que volver atrás y recuperar los puntos de conocimiento.

Mostrar vista

Análisis del código fuente de Vue, en el mundo interior del autor.

Crear una instancia de Vue

let vm = new Vue();

objeto de configuración, datos

let vm = new Vue({
	/* 配置对象 */
	el: '.container',
	data: {
		title: '陶冬手机',
	},
});

Vue nos dice que la interfaz y los datos están separados, y solo debemos prestar atención a dos cosas en el desarrollo, una es cómo se ven los datos de la interfaz y la otra es cómo se genera la interfaz en función de los datos y los datos. determina cómo se ve la interfaz

datos sensibles

Rango bajo: el cambio de datos activará la actualización automática de la interfaz

Alto rango: ?

Si la visualización de datos se ejecuta llamando a una determinada función y se cambian los datos, ¿cómo se puede sincronizar la interfaz?

La interfaz se puede actualizar llamando a la función que depende de estos datos, pero cada vez que se cambian los datos, se debe llamar manualmente para actualizar la interfaz, lo cual es demasiado problemático.

Por lo tanto, ¿se pueden cambiar los datos para que puedan llamar automáticamente a las funciones dependientes para completar la actualización de la interfaz, logrando así la unificación de los datos y la interfaz?

¿Cómo lograrlo?

Secuestro de datos de Object.defineProperty()

Asigne el valor del atributo a la variable intermedia y devuelva la variable intermedia en la función get

Reasigne el valor en la función establecida, deje que el parámetro = variable intermedia y llame a la función dependiente

No es universal, por lo que es necesario observar todas las propiedades del objeto.

Observar observa todas las propiedades del objeto.

Itere a través de cada propiedad y use el secuestro Object.defineProperty() para cada propiedad

Llamar automáticamente a funciones que dependen de este atributo

función de conjunto combinada con la función de obtención

No sabemos qué funciones dependen de esta propiedad, ¿qué debemos hacer?

Primero comprenda, ¿a qué se refiere la dependencia aquí?

Significa que una función usa este atributo durante la operación y, más precisamente, una función usa este método get durante la operación.

obtener función, recopilación de dependencias, registrar: qué función me está utilizando

El conjunto solo sabe reasignar y no sabe qué función está usando este atributo, pero lo sabe.

establecer función, enviar actualización, ejecutar: ejecutar mi función

Ideas centrales:

En la función get, cree una matriz para cada atributo

En la función establecida, recorra y llame a cada función

Al atravesar y llamar a cada función, no es necesario llamar a la misma función dos veces

Garantice la unicidad de la función en la matriz, así que use set para deduplicar la matriz compuesta de funciones, o use include para juzgar

método establecido

incluye practica

Procesando abc, qué función está llamando

Antes de llamar, asigne los nombres de las funciones en ejecución a variables globales, llame a la función y asigne la variable a nulo

enlace de datos bidireccional de entrada

En conclusión, la esencia de la capacidad de respuesta de los datos es ejecutar automáticamente funciones relacionadas cuando los datos cambian.