Изучите реактивность с помощью ссылок и реактивность с помощью примеров.
В этой статье мы узнаем о реактивности с помощью API-интерфейса композиции в Vue.
Composition-API поставляется вместе с Vue 3 и устраняет некоторые ограничения api параметров в более ранних версиях Vue.
Если вы использовали Vue, то, несомненно, вы использовали option-API для создания компонентов приложения.
API-интерфейс композиции позволяет нам создавать приложения Vue с простым и поддерживаемым кодом. Чтобы обеспечить реактивность в пользовательском интерфейсе компонента и состояниях, Composition-API позволяет нам использовать два метода.
Мы можем гарантировать реактивность либо с помощью ссылки (ref), либо с помощью реактивности. Это два основных метода, которые мы можем использовать для обеспечения реактивности между пользовательским интерфейсом компонентов и состояниями.
Если вы не знакомы с API-интерфейсом композиции, ознакомьтесь с этой статьей. Это поможет вам быстро начать работу с API-интерфейсом композиции.
Реакция на ссылки
При использовании API параметров состояния внутри функции данных всегда являются реактивными. Это означает, что любое изменение состояния также будет обновляться в пользовательском интерфейсе компонентов, и это не то же самое для нас в API-интерфейсе композиции.
Чтобы гарантировать это, нам нужно задействовать refs, чтобы гарантировать эту реактивность.
Возьмем, к примеру, это небольшое приложение, которое отображает мое имя и возраст.
<template>
<div>
<h2>My name is {{ state.name }} aged {{ state.age }} years</h2>
<button type=”submit” @click=”changeName”>change Name</button>
</div>
</template>
<script>
export default {
name: “App”,
setup() {
const state = {
name: “John”,
age: 23,
};
function changeName() {
state.name = “Philip”;
}
return { state, changeName };
},
};
</script>
Существует прослушиватель событий, и к нему прикреплена функция changeName, которая обновит наше имя в состоянии. Если мы нажмем кнопку, имя изменится в нашем состоянии, но это изменение не отразится в пользовательском интерфейсе компонентов. Именно тогда в игру вступают ссылки, которые можно использовать для обеспечения реактивности между состоянием и пользовательским интерфейсом компонентов.
Использование ссылок
Чтобы использовать ref, мы сначала должны импортировать его из vue, иначе он не будет определен в нашем экземпляре приложения.
<template>
<div>
<h2>My name is {{ state.name }} aged {{ state.age }} years</h2>
<button type=”submit” @click=”changeName”>change Name</button>
</div>
</template>
<script>
import { ref } from “vue”;
export default {
name: “App”,
setup() {
const state = ref({
name: “John”,
age: 23,
});
function changeName() {
state.value.name = “Philip”;
}
return { state, changeName };
},
};
</script>
Теперь, когда мы нажмем кнопку, мы заметим, что изменение отразится и на пользовательском интерфейсе нашего компонента.
При этом мы также можем добавить директивы, такие как v-model, и это обеспечит синхронизацию состояний и пользовательского интерфейса.
Также обратите внимание, что для доступа к значениям переменных, заключенных в ref, мы должны добавить параметр .value внутри функции настройки. в противном случае к компоненту не нужно добавлять .value.
Использование реактивного
Еще один способ обеспечить реактивность - это реактивность. Как и в случае с refs, чтобы использовать reactive, нам сначала нужно импортировать его из vue, чтобы сделать его доступным в нашем приложении.
Давайте проделаем то же самое, но на этот раз с использованием реактивного.
<template>
<div>
<h2>My name is {{ state.name }} aged {{ state.age }} years</h2>
<button type=”submit” @click=”changeName”>change Name</button>
</div>
</template>
<script>
import { reactive } from “vue”;
export default {
name: “App”,
setup() {
const state = reactive({
name: “John”,
age: 23,
});
function changeName() {
state.name = “Philip”;
}
return { state, changeName };
},
};
</script>
Из приведенного выше фрагмента кода видно, что при доступе к значениям свойств в реактивном режиме мы просто ссылаемся на свойства напрямую, и нам не нужно добавлять .value.
Заключение
В этой статье мы увидели, как использовать refs и reactive для реактивности во vue с помощью API-интерфейса композиции.
Спасибо, что дочитали до конца, если вы найдете эту статью полезной, не стесняйтесь поделиться ею.
Дополнительная информация:
