English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Configuración del entorno
Dirección del repositorio de github del proyecto
El proyecto involucra json-Simulación de solicitud GET del servidor, utilizó vue-router;
Acerca del ciclo de vida de Vue y vue-Detalles de la función de gancho de router
Ciclo de vida
1.Versión 0
1.Qué interfaces de ciclo de vida
init Creado beforeCompile Compilado Listo Conectado Desconectado beforeDestory destruido
2.Secuencia de ejecución
1. Sin keep-alive
Entrada:
init->create->beforeCompile->complied->attatched->ready
Salida:
beforeDestory->detachado->destruido;
2. con keep-alive
La primera vez
Entrada:
init->create->beforeCompile->complied->attatched->ready
Salida:
detachado；
Cada vez que
Entrada:
attatched
Salida:
detached
Funciones de gancho
3.¿Qué funciones de gancho hay?
data
activete
deactivate
canactivate
candeactivate
4.Secuencia de ejecución
Entrada:
canactivate->actiavte->date
Salida:
candeactivate->deactiavte
Ambos aparecen juntos
5.Para un componente A que tiene un subcomponente B, cuando el componente A realiza operaciones de entrada y salida, la secuencia de ejecución de los ciclos de vida y las funciones de gancho entre los componentes se refiere a lo siguiente:
Por ejemplo
A.vue
<div>
<B></B>
</div>
Nota: lo que hay entre paréntesis es el subcomponente anidado
1. Sin keep-alive：
Entrada:
1. canActivate;
2. init;
3. create;
4. beforeCompile;
5. (Subcomponente anidado: init, create, beforeCompile, compile);
6. compile;
7. activate;
8. data;
9. attached;
10. (Subcomponente attached);
11. (Subcomponente ready);
12. ready;
Salida:
13. canDeactivate;
14. deactivate;
15. beforeDestroy;
16. (Antes de destruir el subcomponente);
17. (Subcomponente destruido);
18. detachado;
19. (Subcomponente detachado);
20. destruido;
2. con keep-alive：
Entrada:
1. canActivate;
2. activate;
3. data;
4. attached;
5. (Subcomponente attached);
Salida:
6. canDeactivate;
7. deactivate;
8. detachado;
9. (Subcomponente detachado);
6.Orden de ejecución de las funciones activate y data del gancho
Reglas de resolución asincrónica de funciones de gancho:
1.Si el gancho devuelve una promesa, el momento en que el gancho se resolverá dependerá de cuándo se resuelva la promesa.
2.Si el gancho ni devuelve una promesa ni tiene ningún parámetro, el gancho se resolverá de manera síncrona.
3.Si el gancho no devuelve una promesa, pero tiene un parámetro (transition), el gancho esperará a que se llame uno de los siguientes: transition.next(), transition.abort() o transition.redirect() antes de resolver.
4. En los ganchos de validación de la clase, como canActivate, canDeactivate y el gancho global beforeEach, si el valor de retorno es un valor booleano (Boolean), también resolverá el gancho de manera síncrona.
7. ¿Qué asegura que la interfaz se haya actualizado completamente, es decir, que se haya montado?
ejecutar ciclo de vida attached indica que se ha montado
mecanismo de enlace bidireccional y renderización
1. la escucha y activación de datos (suscripción y publicación observer)
src/directory/observer:
1. array.js
2. dep.js;(implementando un objeto de suscripción y publicación)
3. index.js；（utilizando la API Object.defineProperty y diseñando un getter especial para esta propiedad)/después de establecer, y luego activar una función dentro del setter, para lograr el efecto de escucha);
A continuación, se muestra el código fuente de esta sección:
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
var value = getter ? getter.call(obj) : val
if (Dep.target) {
dep.depend()
if (childOb) {
childOb.dep.depend()
}
if (isArray(value)) {
for (var e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
}
}
}
return value
return val;
set: function reactiveSetter (newVal) {
var value = getter ? getter.call(obj) : val
if (newVal === value) {
return
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = observe(newVal)
dep.notify()
}
})
La simplificación del código de escucha y activación anterior es la siguiente:
function notidy(obj,key){
console.log(key+ha cambiado);
console.log(key+" now is: "+" ahora es: "}}
}
obj[key]);
function ToData(key,val){
var ob=this;
Object.defineProperty(ob,key,{
enumerable:true,
configurable:true,
get:function(){
return val;
},
set:function(newval){
if(newval==val){
}
return;
val=newval;
}
})
}
notidy(this,key);
en el directorio src en directive.js/en lifecycle.js. En la directiva se pueden ver una serie de propiedades analizadas, y la instanciación de la directiva se puede encontrar en utils
Este fragmento de código se encuentra en Directive.prototype._bind
var watcher = this._watcher = new Watcher(
this.vm,
this.expresión,
this._update, // callback
{
filtros: this.filters,
dosVías: this.twoWay,
profundo: this.deep,
preProcess: preProcess,
postProcess: postProcess,
alcance: this._scope
}
)
// v-El modelo con valor en línea inicial necesita sincronizarse de vuelta a
// El modelo en lugar de actualizar el DOM en la inicialización. Ellos
// establecer el gancho afterBind para indicar eso.
if (this.afterBind) {
this.afterBind()
} else if (this.update) {
this.update(watcher.value)
}
Directive.prototype.set = function (value) {
/* ignorar else en Istanbul */
if (this.twoWay) {
this._withLock(function () {
this._watcher.set(value)
})
} else if (process.env.NODE_ENV !== 'production') {
warn(
'Directive.set() solo se puede usar dentro de twoWay' +
'directives.'
)
}
}
src/directory/Watch.js:
Se puede encontrar el objeto watcher que realiza la suscripción a través del método addDep en el siguiente código
Watcher.prototype.addDep = function (dep) {
var id = dep.id
if (!this.newDepIds.has(id)) {
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
dep.addSub(this)
}
}
}
2. Todo lo dicho anteriormente sobre el enlace bidireccional, en realidad también es el mecanismo de renderización interno de VUE, se resume como sigue
1. Monitorea los datos a través de observer y proporciona la capacidad de suscribirse a los cambios de un ítem de datos
2. Transforma template en un fragmento de documento, luego解析 directive en él, obteniendo cada ítem de datos dependiente y el método de actualización del directive. Por ejemplo, v-Después de que se解析 "text="message"" (sólo se muestra como ejemplo, la lógica del programa real será más estricta y compleja): el ítem de datos dependiente this.$data.message, y el método de actualización de la vista correspondiente node.textContent = this.$data.message
3. Combinando ambas partes a través de watcher, es decir, suscribiendo la dependencia de datos del directive en el observer correspondiente de los datos, de modo que cuando los datos cambien, se activará el observer, desencadenando así el método de actualización de la vista correspondiente a la dependencia, y finalmente alcanzando el efecto de asociación original del template.
3¿Cómo mejoró .vue v-¿Por qué da error al renderizar for con datos idénticos?
Renderización de matrices
Sin usar track-El valor predeterminado del id interno de la renderización de la matriz de 'by' es el valor de la matriz value, lo que significa que si hay valores iguales en la matriz, el fragmento de fragmento obtenido a través de id es el mismo, y debido a que es una instancia idéntica, la operación insertBefore en el DOM no tendrá efecto.
<div>
<ul id='test'>
<li id="child1">child</li>1</li>
<li id="child">child2</li>
</ul>
</div>
<script>
_element1=document.getElementById('child1');
_element2=document.getElementById('child2');
document.getElementById('test').insertBefore(_element1,_element2);
</script>
El resultado de la renderización es child2En child1Antes
El uso de track-El propósito de by es personalizar este id interno, para que los elementos con el mismo valor en el array no seleccionen la misma instancia, para el uso de track-Hay ciertas diferencias entre by='$index' y otros valores de id únicos que distinguen, cada uno tiene sus ventajas.
El uso de $index permite que los datos invertidos no se muevan, mientras que el uso de otros ids en diferentes ordenes requiere operaciones de movimiento correspondientes.
Renderizado de objetos
Generalmente, los objetos utilizan claves como id de objetos internos de caché, a través de track-by también puede personalizar este id para mejorar el rendimiento.
vm.model = {
a: { id: 1, val: "model"1},
b: { id: 2, val: "model"2},
c: { id: 3, val: "model"2},
}
Actualización de la lista
vm.model = {
d: { id: 1, val: "model"1},
e: { id: 2, val: "model"2},
f: { id: 3, val: "model"2"}
}
Lo que se menciona anteriormente es el desglose detallado del tutorial desde el uso hasta la implementación del código fuente de vue que les presento el editor, espero que les sea útil. Si tienen alguna pregunta, déjenme un mensaje y el editor les responderá a tiempo. También agradezco mucho el apoyo de todos a la página web de呐喊教程！
Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado manualmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)