1. Cuando hacemos clic en el botón, si el miembro agregado dinámicamente a los datos son datos de respuesta, si no, cuál es su principio interno si el nuevo miembro se establece como datos de respuesta.
let vm = new Vue({
el: '#el'
data: {
o: 'object',
dog: {}
},
method: {
clickHandler () {
// 该 name 属性是否是响应式的
this.dog.name = 'Trump'
}
}
})
En primer lugar, el atributo de nombre no son datos sensibles.
1. Debido a que vue2.x utiliza internamente los métodos getter y setter de Object.defineProperty () para el monitoreo de datos, pero el nuevo nombre de propiedad no tiene métodos getter y setter, por lo que los datos no responden.
Si desea establecerlo en sensible, es más fácil
Método 1: Reserve una posición en boxes similar al siguiente código:
let vm = new Vue({
el: '#el'
data: {
o: 'object',
dog: {
name:''
}
},
method: {
clickHandler () {
// 该 name 属性是否是响应式的
this.dog.name = 'Trump'
}
}
})
Razón: la propiedad que ya existe en el momento de la inicialización será monitoreada por el método Object.defineProperty () en Vue, por lo que la propiedad tiene métodos getter y setter, por lo que los datos responden
Método 2: el
sitio web oficial de Vue da una solución a la idea. Llamar a Vue.set () puede realizar la respuesta de datos.
Método de llamada: Vue.set (objetivo, clave, valor)
- destino: la fuente de datos que se va a cambiar (puede ser un objeto o una matriz)
- clave: los datos específicos que se van a cambiar
- valor: el valor reasignado
let vm = new Vue({
el: '#app',
data: {
msg: 'object',
dog: {}
},
method: {
clickHandler() {
// 该 name 属性是否是响应式的
this.$set(this.data.dog, name, 'Trump')
}
}
})
2. Describa brevemente el proceso de ejecución del algoritmo Diff.
-
El proceso de diff consiste en llamar a una función llamada parche, comparar los nodos nuevos y antiguos y parchear el DOM real mientras se compara.
-
Cuando se utiliza el algoritmo diff para comparar nodos nuevos y antiguos, la comparación solo se realizará en el mismo nivel y no se comparará entre niveles.
-
Cuando los datos cambian, el método establecido llamará a Dep.notify para notificar a todos los suscriptores Watcher, y los suscriptores llamarán parche para parchear el DOM real
Descripción:
La función de parche recibe dos parámetros oldVnode y Vnode, que representan el nodo nuevo y el nodo antiguo anterior respectivamente. Esta función de parche compara si oldVnode y vnode son lo mismo, es decir, la función sameVnode (oldVnode, vnode). Según el resultado de retorno de esta función, se divide en los dos casos siguientes
- verdadero: ejecutar patchVnode
- falso: reemplace oldVnode con vnode
Que hace la función patchVnode
1. Encuentre el dom real correspondiente, llamado el
2. Determine si vnode y oldVnode apuntan al mismo objeto.
Si es así, regrese directamente (final).
3. Determine que tienen nodos de texto y no son iguales, luego establezca el nodo de texto de el en el nodo de texto de vnode.
4. Determine si oldVnode tiene nodos secundarios pero vnode no, luego elimine los nodos secundarios de el.
5. Juzgue que oldVnode no tiene nodos secundarios pero vnode sí, luego agregue los nodos secundarios de vnode a el después de darse cuenta
6. Juzgue que ambos tienen nodos secundarios, ejecute la función updateChildren para comparar los nodos secundarios.
Principio de implementación de los modos de enrutamiento de historial y hash comúnmente utilizados en vue-router
- hash: el modo de enrutamiento hash (ancla) en realidad hace uso de la ventana para monitorear el evento onhashchange, lo que significa que si el valor hash en su url (el valor detrás de #) cambia, el front-end puede monitorear y hacerlo Algunas respuestas (hacer algo), de modo que incluso si la interfaz no inicia una solicitud http, el bloque de código de la página correspondiente se puede encontrar y cargar a pedido
- El hash se puede leer a través de window.location.hash
- Modo de historial: utiliza eventos pushState || replaceState (+ servidor) y popState para monitorear los cambios de estado
-
pushState: el navegador no solicita datos del servidor y cambia directamente la dirección URL, que puede entenderse de manera similar como una versión disfrazada del hash; pero a diferencia del hash, el navegador registrará el historial de pushState, y usted puede usar la función de avance y retroceso del navegador
-
replaceState: a diferencia de pushState, replaceState solo modifica el historial correspondiente