Vue watchEffect(): дозвольте Vue автоматично відстежувати залежності
Використовуйте watchEffect(), коли побічна дія напряму читає всі потрібні реактивні значення. watch() залишайте для випадків, де джерело зміни потрібно контролювати явно.
Іноді побічна дія просто залежить від кількох реактивних значень, які вона сама читає. У такому випадку не обов'язково окремо перелічувати всі джерела у watch().
watchEffect() автоматично відстежує реактивні залежності, використані під час його виконання.
Замість окремого списку залежностей
watch( [title, appName], ([newTitle, newAppName]) => { document.title = `${newTitle} - ${newAppName}`; }, { immediate: true, },);watchEffect(() => { document.title = `${title.value} - ${appName.value}`;});У цьому випадку залежності вже видно всередині самої дії: вона читає title.value і appName.value. Vue може відстежити їх автоматично.
Якщо будь-яке з цих значень зміниться, watchEffect() виконається знову. Він також запускається одразу під час створення, тому окремий immediate: true не потрібний.
Коли watch() кращий
watch( search, (newSearch, oldSearch) => { if (newSearch !== oldSearch) { loadResults(newSearch); } },);watch() краще підходить, коли потрібно явно визначити джерело спостереження, отримати нове і попереднє значення або не запускати callback одразу.
watchEffect() натомість зручний тоді, коли залежності природно випливають із самої побічної дії.
Будьте уважні з async callback
watchEffect(async () => { const id = userId.value; const response = await loadUser(id); profile.value = response;});watchEffect() автоматично відстежує реактивні значення, прочитані під час синхронної частини виконання. Для асинхронної функції залежності, прочитані лише після першого await, можуть не стати залежностями цього ефекту.
Тому важливі реактивні значення краще прочитати до першого await.
Використовуйте watchEffect(), коли залежності очевидні з самої дії і Vue може визначити їх автоматично. Використовуйте watch(), коли вам потрібний явний контроль над тим, за чим саме спостерігати.
