Содержание цикла

1. Article 1
2. Article 2

В Composition API рекомендованный способ объявлять реактивное состояние это использование функции ref()

import {ref} from ‘vue’
const count = ref(0)

Использование этой функции создает объект count со свойством value, в котором будет храниться значение. Я подключил данный функционал к тестовому приложению из прошлого поста следующим образом. В main.js

import {createApp, ref} from ‘vue’
const app = createApp({
 setup() {
  const count = ref(0)
  return {
   const
  }
 }
})

В index.html

<div @click=»count++»>{{ count }}</div>

@click означает обработку события клик. Когда мы используем объект, созданный функцией ref(), то не нужно получать доступ к его значению через .value. Объект парсится автоматически, поэтому будет достаточно использовать сам объект.

Также для более сложной логики предусмотрена возможность работать с объектами ref в функциях

Если в нашем приложении мы используем подход SFC, то мы можем объявить ref в компоненте при помощи

<script setup>
 /* здесь объявление ref */
</script>

Почему рефы?

Удивляет зачем использовать рефы, а не обычные переменные. Чтобы это объяснить нужно немного погрузиться в реактивность. Когда мы используем ref в шаблонах, Vue автоматически фиксирует изменения и обновляет DOM соответственно. Когда компонент отображается первый раз, Vue начинает отслеживать каждый ref. Позже, когда ref изменяется, это запускает переотображение компонента. Это невозможно сделать с обычными переменными. Свойство .value дает Vue возможность определять, когда мы использ ref или изменяем его. Еще один повод использовать рефы- это возможность передавать их в функции и использовать их последнее значение.

Глубокая реактивность

Ref может содержать любые значения включая вложенные объекты, массивы и т.д. Ref делает значения глубоко реактивными. Это означает, что мы отслеживаем изменения объекта на любом его уровне, даже на вложенных. Но если у нас нет необходимости следить за большими объектами с большой вложенностью, то для этих целей есть shallow ref. Shallow ref отслеживает только свойство .value. Эта тема добалена в TODO list и будет разобрана в дальнейших статьях.

Тайминги обновления DOM

Когда мы изменяем реактивное состояние DOM изменяется автоматически. Но нужно отметить, что изменения не применяются синхронно. Вместо этого, Vue буфферизирует их до “следующего такта” в цикле обновления, чтобы гарантировать, что каждый компонент будет обновлен только один раз, независимо сколько изменений мы сделали. Чтобы подождать пока изменения DOM будут завершены, мы можем использовать nextTick()

reactive()

Другой способ использовать реактивность – это применить reactive(). В отличие от ref, который оборачивает входящее значение в специальный объект, reactive() делает сам объект реактивным

import {reactive} from ‘vue’
const state = reactive({count: 0});

Использование в шаблоне

<div>{{ state.count }}</div>

reactive() также конвертирует объект со всеми вложениями. Также как у ref есть API для отмены конвертации всех вложений shallowReactive()

Важно отметить, что возвращаемый объект из reactive(), это прокси исходного объекта. Эти два объекта не равны между собой. Только прокси реактивный, поэтому изменения оригинального объекта не будут запускать обновления. Поэтому лучшая практика использовать только проксированные версии состояний.

Ограничения reactive()

reactive() API имеет несколько ограничений

1. Типы значений. Работает только с объектами, не работает с простыми типами
2. Не может заменять полностью объект. Мы не можем просто заменить полностью реактивный объект, потому что связь с первым объектом потеряется
3. Не деструктуризируется. Когда мы передаем свойства объекта, например, в функцию, мы потеряем связь с реактивностью.

Чтобы обойти эти ограничения рекомендуют использовать ref().