DZone>Web Dev Zone>Vue 3使用Reactive()和Ref()的Reactivity组成API
Vue 3使用Reactive()和Ref()的反应性组成API
了解如何在Vue 3中使用反应性，并通过使用反应性和反射函数的组合API方法。
通过
CORE -
5月。05, 22 - Web Dev Zone -教程
喜欢 (4)
评论
保存
鸣叫
3.43K浏览次数
加入DZone社区，获得完整的会员体验。
反应性是构建VueJS应用程序的一个关键支柱。虽然使用Options API的VueJS Reactivity相当强大，但越来越多的开发者开始使用Composition API来构建他们的Vue应用。值得庆幸的是，使用Composition API的Vue 3 Reactivity同样强大。
Vue 3 Reactivity with Composition API是由reactive() 和ref() 函数驱动的。这些函数将组件模型数据转化为反应性，这样Vue就能够跟踪变化。然而，reactive() 和ref() 都有其特定的使用场景。重要的是要知道在哪个特定场景下应该使用哪个函数。
Vue 3 Options API和Composition API有不同的语法来管理反应性变量，但反应性的概念是一样的。
在这篇文章中，我们将看看Vue 3 Composition API 中单文件组件 或SFC的反应性。
Vue 3reactive() 函数
VueJS中的reactive() 函数有助于创建一块反应性的状态。
Vue.js组件
import { reactive} from 'vue'
// reactive state
const state = reactive({
currentCounterStatus: '',
})
Vue能够跟踪反应式对象内任何属性的突变。在上面的例子中，如果currentCounterStatus 的值发生变化，VueJS会自动更新DOM。
我们可以通过使用模板语法在模板内使用反应式状态变量。
HTML
<template>
<h2>{{ state.currentCounterStatus }}</h2>
</template>
被动状态的值可以被更新，如下所示。
JavaScript
function increment() {
state.currentCounterStatus = 'Incremented'
}
我们可以使用任何点击处理程序来触发increment() 函数。
reactive() API有一些限制，如下。
- 我们只能使用
reactive()API来声明对象、数组或其他集合类型，如Map或Set。基本上，reactive()函数不能用于基数，如字符串、整数、布尔值等。在我看来，这是一个很大的缺点，限制了reactive()API的使用。 - 我们必须始终保持对被动对象的相同引用。换句话说，如果我们通过再次调用
reactive()函数来更新一个反应式对象的值，那么与第一个对象的反应性连接就会丢失。请看下面的例子。
JavaScript
import { reactive} from 'vue'
// reactive state
let state = reactive({
currentCounterStatus: '',
})
state = reactive({
currentCounterStatus: 'Incremented'
})
Vue 3 使用ref() 函数的反应性
Vue 3还提供了ref() 函数来声明一个反应性状态。基本上，ref() 函数解决了reactive() 函数的限制。主要是，ref() 可以持有任何类型的值，包括基元。
请看下面的例子。
Vue.js组件
<template>
<h1>{{ appName }}</h1>
<h2>Count is: {{ counter }}</h2>
</template>
基本上，ref() 接受输入参数并将其包裹在一个对象中。这个对象有一个值属性。换句话说，对于上面的例子，我们可以把appName 变量作为appName.value 。另外，计数器的值也可以作为counter.value 。
Vue 3模板中的参考解包
我们也可以从模板内的ref() 函数访问反应式变量。
请看下面的例子。
Vue.js组件
<template>
<h1>{{ appName }}</h1>
<h2>Count is: {{ counter }}</h2>
</template>
正如你所看到的，在这里我们不需要使用counter.value 或appName.value 。基本上，当我们在模板中访问Refs作为顶层属性时，VueJS会自动将其解包。因此，不需要使用.value 。
重要的一点是，Ref解包只对顶层属性有效。它对下面的例子不起作用。
JavaScript
const counterStatusObject = {
status: ref(''),
}
这是因为counterStatusObject.status 是一个Javascript对象。
Vue 3 反应式对象中的Ref解包
我们也可以添加一个Ref变量作为反应式对象的一个属性。见下文。
JavaScript
const appName = ref('Counter Application')
const appObject = reactive({
appName
})
console.log(appObject.appName)
在这种情况下，我们可以直接访问appName ，而不使用.value 。
Vue 3 反应性转换
你可能觉得使用.value 是不必要的麻烦。它降低了访问模板中的变量的简单性。
Vue 3提供了一个编译时转换，可以解决这个问题。我们现在可以使用$ref() 来声明一个反应式变量，并直接访问它，而不用.value 。
JavaScript
const appName = $ref('Counter Application')
const counter = $ref(0)
function increment() {
counter++
}
然而，请注意，这仍然是一个实验性的功能，很容易发生变化。
总结
在这篇文章中，我们介绍了使用Composition API的Vue 3 Reactivity。作为其中的一部分，我们看了Vue的reactive() 和ref() 函数，这些函数可以帮助我们声明反应性对象和变量。
如果你对这篇文章有任何评论或疑问，请随时在评论区提出。
API
经Saurabh Dashora许可发表于DZone。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
