👩💻 effectScope - способ управлениями эффектами группируя их. effectScope — это функция, введенная в Vue.js 3, которая позволяет создавать область (scope) для управления побочными эффектами (effects), такими как watch и computed. Это полезно для группировки и управления несколькими эффектами вместе, особенно когда нужно очистить или остановить их выполнение.
Основные моменты:
1 Группировка эффектов: effectScope позволяет объединить несколько реактивных эффектов в одну область. Это упрощает управление ими, например, остановку всех эффектов одновременно.
2 Очистка ресурсов: Когда область эффектов больше не нужна, можно вызвать метод stop() на объекте effectScope, чтобы остановить все эффекты внутри этой области и освободить ресурсы.
3 Вложенные области: effectScope поддерживает вложенные области, что позволяет создавать иерархии областей для более сложных сценариев.
Пример использования:
`import { effectScope, reactive, watch } from 'vue';
function createCounter() { const scope = effectScope(); // Создаем область эффектов
scope.run(() => { const state = reactive({ count: 0 });
// Следим за изменением count
watch(() => state.count, (newValue) => {
console.log(Counter value: ${newValue});
});
// Функция для увеличения счетчика const increment = () => { state.count++; };
// Функция для остановки всех эффектов const stop = () => { scope.stop(); };
return { state, increment, stop }; }); }
const counter = createCounter(); counter.increment(); // Counter value: 1 counter.increment(); // Counter value: 2
// Останавливаем все эффекты counter.stop();
Так же пример с использованием Composition Api `import { effectScope, reactive, watch, computed } from 'vue';
function useCounter() { const scope = effectScope(); // Создаем область эффектов
const state = reactive({ count: 0 });
const doubleCount = computed(() => state.count * 2);
scope.run(() => {
watch(() => state.count, (newValue) => {
console.log(Count changed to ${newValue});
});
watch(() => doubleCount.value, (newValue) => {
console.log(Double count changed to ${newValue});
});
});
const increment = () => { state.count++; };
const stop = () => { scope.stop(); };
return { state, doubleCount, increment, stop }; }
export default { setup() { const { state, doubleCount, increment, stop } = useCounter();
return { state, doubleCount, increment, stop }; }, };``
