Как работает реактивность во Vue — ref, reactive, computed, watch?
- Чем ref отличается от reactive?
Vue отслеживает, какие реактивные значения прочитал шаблон или вычисление, и при их изменении сам обновляет только зависимое. ref — обёртка для любого значения (в скрипте .value, в шаблоне без него), reactive — реактивный объект (нельзя переприсвоить целиком и деструктурировать без потери реактивности). computed — производное значение с кэшем, пересчитывается при изменении зависимостей. watch — побочный эффект при изменении (запрос, сохранение). В отличие от React, мутировать реактивное состояние можно — Vue это видит через Proxy.
- computed без побочных эффектов
- Деструктуризация reactive теряет реактивность — toRefs
- watchEffect сам собирает зависимости
Подробно
const items = ref([])
const total = computed(() => items.value.reduce((s, i) => s + i.price, 0))
watch(total, t => localStorage.setItem('total', t))
items.value.push({ price: 100 }) // total пересчитаетсяЧто хотят услышать
- Отслеживание зависимостей.
- ref и reactive.
- computed и watch.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Во Vue мутация реактивного массива не обновляет интерфейс, нужен новый массив
- ✓Vue отслеживает прочитанное и обновляет зависимое; ref — .value, computed — кэшируемое
- ✗computed пересчитывается на каждый рендер без кэша
- ✗Деструктуризация reactive сохраняет реактивность
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.