Vue 3中使用Refs和Reactive的反应性

在这篇文章中，我们将学习Vue中的composition API的反应性。

Composition-API与Vue 3捆绑在一起，它解决了Vue早期版本中选项api的一些局限性。

如果你一直在使用Vue，那么毫无疑问，你一直在使用option-API来创建应用组件。

composition API使我们能够以简单和可维护的代码创建Vue应用程序。为了确保组件的用户界面和状态的反应性，composition-API允许我们使用两种方法。

我们可以使用引用（ref）或使用Reactive来确保反应性。这是我们可以用来确保组件UI和状态之间反应性的两种主要方法。

如果你对composition-API不熟悉，请考虑看看这篇文章。它将使你开始加快使用composition-API的速度。

深入了解 Vue3 Composition API 通过示例深入了解 vue Composition API。

与 Refs 的反应性

当使用选项API时，数据函数中的状态总是具有反应性。这意味着状态的任何变化也会在组件的用户界面中被更新，但在composition 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"，将更新我们在状态中的名字。如果我们点击按钮，名字将在我们的状态中发生变化，但这个变化不会反映在组件的用户界面中。这时Refs就发挥作用了，可以用来确保状态和组件UI之间的反应性。

使用refs

要使用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，它将确保状态和UI同步。

另外，要注意的是，要访问用ref包装的变量的值，我们必须在setup函数中附加.value参数。否则，在组件上，我们就不必附加.value。

使用reactive

另一种我们可以确保反应性的方式是通过reactive。就像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>

如果你从上面的代码片段中看到，你可以看到在reactive中访问属性值时，我们只是直接引用属性，我们不必附加.value。

总结

在这篇文章中，我们已经看到了如何在vue中使用Refs和reactive来实现反应性，并使用了composition-API。

感谢你阅读到最后，如果你觉得这篇文章对你有帮助，请不要犹豫，把它分享出去。