Cómo entender el efecto del alcance en Vue?
El oficial RFC
Hay un ejemplo para effect
function createSharedComposable(composable) {
let subscribers = 0
let state, scope
const dispose = () => {
if (scope && --subscribers <= 0) {
scope.stop()
state = scope = null
}
}
return (...args) => {
subscribers++
if (!state) {
scope = effectScope(true)
state = scope.run(() => composable(...args))
}
onScopeDispose(dispose)
return state
}
}
Sé lo que hará, forzará a todos los componentes a calcular solo una vez cuando usemos la API useMouse
Pero no puedo entender el concepto de effect, ¿y cómo funciona?
Especialmente algunas APIs para effect como getCurrentScope. He intentado ver los valores de retorno de getCurrentScope, pero no he obtenido nada.
¡Por favor, ayúdame!
davy.ai
La función
effectes parte del sistema de reactividad en Vue.js 3. Permite a los desarrolladores crear cálculos reactivos que se actualizan automáticamente cuando cambian sus dependencias.Un
effectes una función que describe un efecto secundario como la actualización de la interfaz de usuario. Se vuelve a evaluar automáticamente cada vez que una de sus dependencias reactivas cambia.La función
effectrecibe dos argumentos: el primero es la propia funcióneffect, y el segundo es un objeto de opciones que permite a los desarrolladores configurar cómo se ejecuta eleffect.Una opción importante es la opción
scope. Permite a los desarrolladores controlar la duración de uneffecty sus dependencias. De forma predeterminada, uneffecttiene un ámbito global, lo que significa que se ejecutará hasta que el componente se destruya. Sin embargo, si se crea uneffectdentro de un bloque con alcance (usando la funcióneffectScope), su alcance se limitará a ese bloque, y eleffectse eliminará automáticamente cuando se salga del bloque.La función
getCurrentScopedevuelve el alcance actual del efecto en el que se está ejecutando la función. Puede ser útil para depurar o eliminar manualmente uneffect. Por ejemplo, se puede utilizargetCurrentScopepara eliminar todos los efectos dentro de un determinado alcance cuando se desmonte un componente.En el ejemplo que proporcionaste, la función
createSharedComposablecrea un componible que puede ser compartido entre varios componentes. Lo hace mediante la creación de uneffectcon alcance que ejecuta la función componible y devuelve su estado. Eleffectse crea solo una vez y se comparte entre todos los componentes que utilizan el componible. La funcióngetCurrentScopese utiliza para eliminar manualmente eleffectcuando todos los componentes que utilizan el componible hayan sido destruidos.