Всем привет, сегодня хочу рассказать немного о реактивности в Vue 3. В вьюшке есть два типа создания реактивных переменных: 1. reactive объекты 2. ref ссылки 1-й тип создания реактивных переменных имеет особенность. Она заключается в том, что reactive не работает с примитивами. Он работает исключительно с объектами. Так же для того чтобы получить значение записанное в данный reactive не нужно использовать .value как при работе с ref ссылками. 2-й тип создания реактивных переменных может работать как с примитивами, так и с объектами. В случае если он сталкивается с объектом, он сначала преобразовывает его в reactive Вся реактивность в vue 3 основана на Proxy объектах. Что это означает?

const counter = ref(1);

Выше изображен пример создания реактивной переменной при помощи метода ref(). Proxy объект принимает объект. По этой причине при работе с методом ref, для получения значения используется .value. Это по сути ключ объекта, который создается под капотом и оборачивается в Proxy объект. Чтобы следить за изменениями переменных в Proxy есть два метода, get и set, которые сообщают Vue о том что с переменной были проведены работы. Исходя из этого vue может произвести ререндеринг или сообщить watch о том что значение было изменено.