Vue学习笔记4：用reactive() 实现数据更新的实时视图显示

0 前言

Vue 的核心功能是声明式渲染，这让我们可以对 HTML 中的内容发生变化时进行响应式地自动更新。

响应式状态可以使用 Vue 的API ref()  或 reactive() 来声明。

在

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客

中我们已经使用了API ref()  来实现。

现在我们用reactive()来实现。

1 使用reactive() 来 实现

我们在

Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示_PurpleEndurer@5lcto的技术博客_51CTO博客

中 使用API ref()  实现的代码上基础上来进行修改，从而可以体会到这两个函数之间的差别。

1.1 修改<script setup></script> 之间的代码

使用API ref()  实现的代码中<script setup></script> 之间的代码如下：

<script>
 
import { ref } from 'vue'
// var spanMsg = ref('请您输入信息')
const spanMsg = ref("请您输入信息")
</script>

1.1.1 修改 import语句

将

import { ref } from 'vue'

改为

import { reactive } from 'vue'

之前我们要使用ref()，就在{}中间写 ref。

现在我们要使用reactive()，相应的要将{}中间的 ref 改为 reactive。

1.1.2 修改 const spanMsg 语句

将

const spanMsg = ref("请您输入信息")

改为

const spanMsg = reactive({value:"请您输入信息"})

这里做了两处修改：

1.要把赋值表达式中的函数名从ref改为reactive

2.在函数的参数表达式 前面增加了"value:"，指定这个参数是数据成员spanMsg的value属性。并且用{} 把整个参数表达式包括起来。

其实ref("请您输入信息") 是 ref({value:"请您输入信息"})的简写。

但reactive()不能使用这种简写。

把以上的修改综合起来，如下：

<script setup>
import { reactive } from 'vue'
const spanMsg = reactive(value:"请您输入信息")
</script>

1.2 修改 <input type="text" id="tbMsg" v-model="spanMsg" />

将

<input type="text" id="tbMsg" v-model="spanMsg" />

改为

<input type="text" id="tbMsg" v-model="spanMsg.value" />

因为我们上面使用reactive函数给数据成员spanMsg赋初值时已经指定了value属性，所以这里我们做双向绑定时也要指定value属性。如果不做这个修改，那么我们看到的文本框初始值就是 “[object Object]”：

并且我们在修改文本框的内容时，会收到出错信息：

Assignment to constant variable.

修改 <span style="color:purple">{{ spanMsg }}</span>

将

<span style="color:purple">{{ spanMsg }}</span>

改为

<span style="color:purple">{{ spanMsg.value }}</span>

因为我们上面使用reactive函数给数据成员spanMsg赋初值时已经指定了value属性，所以这里我们要显示的是数组成员 spanMsg的value属性。

如果不做修改，那么刚开始时我们看到的将是：

您输入的信息是： { "value": "请您输入信息" }

在我们在文本框输入文字后，看到的是：

综合以上修改，修改后的最终代码是：

<script setup>
import { reactive } from 'vue'
const spanMsg = reactive({value:"请您输入信息"})
</script>
<template>
<p style="font-size:18pt; font-weight:bold;">
  使用Vue API reactive()实现数据更新的实时视图显示  
</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
  by PurpleEndurer
</p>
<p>请输入信息：
  <input type="text" id="tbMsg" v-model="spanMsg.value" />
</p>
<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple">{{ spanMsg.value }}</span>
</p>
</template>

代码运行结果如下：

2 关于ref和reactive的比较

经过上面的修改，我们可以体会到：

reactive() 只适用于对象 (包括数组和内置类型，如 Map 和 Set)。由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样。

ref() 可以接受任何值类型。ref 会返回一个包裹对象，并在 .value 属性下暴露内部值。在模板中使用 ref() 时，ref() 会自动解包，所以我们不需要明确附加 .value。