- Регистрация
- 21 Янв 2023
- Сообщения
- 895
- Автор темы
- #1
Что такое реактивность ?
Реактивность в vue3, это способность автоматически отслеживать изменения данных и обновлять интерфейс без явных команд - Vue делает это с помощью специальных инструментов, таких как: ref | reactive
ref | reactive - в чем разница?
В Vue3 есть два основных способа создавать реактивные переменные
1) - Ref для примитивов и обьектов;
Реактивность в vue3, это способность автоматически отслеживать изменения данных и обновлять интерфейс без явных команд - Vue делает это с помощью специальных инструментов, таких как: ref | reactive
ref | reactive - в чем разница?
В Vue3 есть два основных способа создавать реактивные переменные
1) - Ref для примитивов и обьектов;
JavaScript:
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>ref - оборачивает значение в объект, и чтобы получить или изменить его, нужно использовать: .value
2) - reactive для обьектов;
2) - reactive для обьектов;
JavaScript:
<script setup>
import { reactive } from 'vue';
const user = reactive({
name: 'pikamonov',
age: 16
});
function updateAge() {
user.age++;
}
</script>reactive - создает прокси обьект, поэтому НЕ нужно использовать .value
Зачем это нужно?
Vue отслеживает изменения ref и reactive, обновляя интерфейс автоматически, это тупо удобнее, чем вручную обновлять DOM или работать с useState в React
Когда использовать ref, а когда reactive?
Если переменная - число, строка, булево, null, undefined то мы используем ref,
Если объект это или массив - то используем reactive,
Если нужно работать с ref внутри объекта - можно использовать ref, но тут понадобится toRefs()
Зачем это нужно?
Vue отслеживает изменения ref и reactive, обновляя интерфейс автоматически, это тупо удобнее, чем вручную обновлять DOM или работать с useState в React
Когда использовать ref, а когда reactive?
Если переменная - число, строка, булево, null, undefined то мы используем ref,
Если объект это или массив - то используем reactive,
Если нужно работать с ref внутри объекта - можно использовать ref, но тут понадобится toRefs()
он нужен для того, что бы при деструктуризации реактивного объекта reactive() не терялась его реактивность
JavaScript:
<script setup>
import { reactive, toRefs } from 'vue';
const state = reactive({
count: ref(0)
});
const { count } = toRefs(state);
</script>
короче, простыми словами;
ref = для примитивов, используем .value
reactive = для обьектов, без .value
ref - reactive - можно комбинировать, если это нужно
