Vue学习笔记4：用reactive() 实现数据更新的实时视图显示-阿里云开发者社区

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

2024-09-29 6

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>