¿Cómo evita vue el renderizado repetido?
En el artículo anterior, hablamos sobre el principio del enlace bidireccional de vue. Cada objeto observador está vinculado a una identificación única cuando las propiedades de los accesorios del componente. y se producen objetos de datos. Cuando se produce el cambio, se activará el método de actualización del objeto observador.
El atributo diferido es para evitar llamar repetidamente al método de actualización debido a cambios en las propiedades de (props y). data) objetos utilizados en las propiedades calculadas
De forma predeterminada, la sincronización del objeto observador es falsa y se llama al método queueWatcher
Este método se utiliza para determinar si un objeto observador. ya existe en la cola de trabajos actual. Si el objeto no está en la cola y la cola aún no ha comenzado la ejecución, agréguelo a la cola.
Si no hay ningún objeto observador en la cola de trabajo, pero la cola ha comenzado la ejecución, si la posición de inserción es menor o igual a la posición del observador que se está ejecutando actualmente, se insertará después del actual observador ejecutor. Si la posición de inserción es mayor que la posición del warcher que se está ejecutando actualmente, compare la identificación del observador detrás del índice de la posición de ejecución con la identificación del observador insertado
nextTick es un método de ejecución asincrónico, encapsulado por vue, diseñado para diferentes navegadores. diseñado para admitir la funcionalidad asincrónica nativa de js. El método setTimeout
Debido a que es un método asincrónico, FlushSchedulerQueue en la cola de tareas se ejecutará solo después de que el método se ejecute en el hilo principal.
Echemos un vistazo. las siguientes columnas:
Probamos el atributo de nombre tres veces, pero solo activó una actualización una vez. Analicemos el motivo:
Cuando el atributo de nombre se cambia por primera vez, la cola inserta todos los objetos de monitor bajo el objeto Dep en el atributo de nombre. Dado que la función del hilo principal no se ejecuta, FlushSchedulerQueue. El método todavía está Mientras esperaba
el segundo cambio del atributo de nombre, la cola no insertó el objeto Dep en el atributo de nombre. Todos los monitores bajo el objeto Dep en el atributo de nombre no se insertan en la cola. En este momento, el método flushSchedulerQueue todavía está esperando
Cuando el atributo de nombre cambia por tercera vez, todos los monitores bajo el objeto Dep. en el atributo de nombre no se insertan en la cola, la función del hilo principal finaliza y se vuelve a llamar. Utilice el método flushSchedulerQueue para actualizar la vista en la cola de tareas