Resumen del principio de respuesta de Vue2
Cuando se crea una instancia de un componente vue, se itera profundamente a través de las propiedades de los datos (encontrando una matriz u objeto), agregando secuestro de datos para cada propiedad. El secuestro de datos consiste en agregar métodos get/set usando el método Object.defineProperty (de hecho en pro pu tei).
Durante este proceso se crea una instancia de una clase Dep.
1. Active el método depend de la instancia Dep en el interceptor get para realizar la recopilación de dependencias, que esencialmente agrega la instancia del observador que depende de esta propiedad al submatriz de la propiedad de la instancia Dep.
2. Activa el método de notificación de la instancia dep en el interceptor set y envía actualizaciones a todas las dependencias recopiladas (el método de actualización del observador)
Al crear una instancia del componente vue, creará una instancia de un observador de presentación, y el proceso de creación de instancias del observador de presentación hará dos cosas.
1. Cree vnode, donde podrá acceder a los atributos de datos, activar el método get y completar la recopilación de dependencias.
2. Active la creación de instancias del subcomponente y repita el proceso de secuestro de datos.
Este proceso es un recorrido profundo del árbol de componentes.
Al observar todo el proceso junto con el ciclo de vida del componente, el componente principal primero activará el gancho creado y el componente secundario activará posteriormente el gancho creado. Los ganchos creados del componente secundario se ejecutan primero y luego se ejecutan los ganchos creados del componente principal.
Memoria paso a paso
1. Descubra el principio de no actualizar la página
2. Descubra el principio de actualización de la vista de página
Implemente el principio de no actualizar la página
1.hash
2.history
3.abstract: admite todos los tiempos de ejecución de JavaScript, como Node Lado del servidor .js. Si no se encuentra ninguna API del navegador, el enrutador lo forzará automáticamente a entrar en este modo.
1.hash (modo hash), el símbolo # va seguido del comportamiento del navegador y la página no se actualizará (solicitando la URL) al cambiar (escuchando el evento hashChange)
2. En el modo historial, H5 agrega pushState, replaceState e incluso API, que pueden modificar los registros del historial sin actualizar el navegador.
El principio de actualización de vista
El principio es el principio de actualización de respuesta de vue de dom, m => v
m son los datos que están instalados en vue-router Al agregar el atributo _route al componente raíz de vue (componente raíz de vue), haga coincidir la ruta correspondiente.
Agregue el atributo _route durante el proceso de instalación de vue-router y actualice el valor del atributo _route después de hacer coincidir la ruta correspondiente, activando así el monitor de representación para el valor del atributo, que a su vez activa la actualización de dom.
La diferencia entre los dos modos
1. Cuando se implementa, el modo historial requiere que el servidor maneje todas las rutas posibles (por ejemplo, configurar el archivo de configuración nginx) para evitar 404. No se requiere el modo hash.
2. La representación de la URL es diferente.
La directiva v-model es azúcar sintáctica para v-bind:value y @input.
Puede admitir elementos de formulario locales así como componentes personalizados
En componentes personalizados, en realidad se ve así:
Pasa funciones de representación personalizadas Implementación, esto función cachea vnode
Vue se ejecuta de forma asincrónica al actualizar el DOM Una vez que se detecta un cambio en los datos, Vue abrirá una cola y almacenará en caché todos los cambios de datos que ocurran en el mismo bucle de eventos.
Si el mismo observador se activa varias veces, solo se enviará a la cola una vez. Los datos duplicados se eliminarán de la caché para evitar cálculos y operaciones DOM innecesarios.
$nextTick(cb) se usa para llamar nuevamente a la función de devolución de llamada pasada después de que se completa la actualización del DOM.