Los cálculos en Vue modifican las propiedades utilizadas

Mientras aprendía sobre las propiedades calculadas en Vue, me encontré con un problema.

Un problema que encontré al aprender las propiedades calculadas de Vue es si modificar el valor de una propiedad usada en una propiedad calculada provocará un bucle infinito debido a la velocidad de respuesta de Vue.

Cálculo Una propiedad puede Se puede considerar como una función getter que obtiene un nuevo valor, pero vue tiene una capa de almacenamiento en caché, por lo que solo se recalculan los cambios.

¿Ejemplo? :

Supongamos que tiene una propiedad llamada nombre, ahora necesita una propiedad calculada nuevoNombre, pero necesita cambiar el nombre a su valor inicial al obtener nuevoNombre, porque cada vez que el nombre cambia a un valor no anterior A La respuesta se activará cuando sea. En teoría, puede escribir un método de clic para cambiar el valor del nombre una vez. El proceso será nombre -- gt; una función captadora. gt; nuevoNombre --gt; nombre --gt; nuevoNombre --gt; nombre --gt; nuevoNombre.... Pero ese no es el caso

Primero, ¿cuál es el proceso?

Cambiar el valor del nombre desencadenará una respuesta, la respuesta llamará a la función desencadenante y la función desencadenante eventualmente llamará al despachador del efecto de respuesta en newName, que se puede encontrar en ComputedRefImpl.is triggerRefValue (esto); también Es decir, llamará a la función computedRefGetValue, que ejecutará la función getter capturada por ReactiveEffect y establecerá el efecto en el ReactiveEffect activo, que también es la función newName escrita externamente. newName activará un nuevo disparador asignando un nuevo valor al nombre.

Cabe señalar que la clave del disparador es el nombre de la propiedad que se está modificando, que es nombre. vue usa mapeo para almacenar objetos ReactiveEffect con el nombre como clave

Volviendo al contenido anterior, activar un nuevo disparador en newName activará un nuevo disparador. De hecho, triggerEffects finalmente se ejecuta, todos los efectos secundarios se ejecutarán. Por supuesto, solo hay un efecto secundario en newName, que es el objeto ReactiveEffect almacenado con la clave de nombre, que también está activo en este momento. ReactiveEffect, según el valor de triggerEffects ! == activeEffect || objeto ReactiveEffect vigente. enableRecurse en triggerEffects, el programador programará solo si el efecto que se está ejecutando no es igual al efecto activo o se permite la recursividad, porque el efecto actual === activeEffect, por lo que el programador que no ejecutará newName no ejecutará newName, porque el efecto actual === activeEffect

Resultado: Vue maneja internamente la posibilidad de bucles infinitos, que pueden provenir de versiones anteriores, y ahora eslint genera efectos secundarios inesperados en la propiedad calculada "newName".