Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示-阿里云开发者社区

0 前言

在页面中，要实现数据更新的视图实时显示，纯JavaScrip需要手动编写代码来处理数据和视图之间的更新。

而Vue提供了数据绑定的能力，使得数据和视图保持同步。

我们通过一个实例来体验两者的差别。

我们设计一个页面，在页面里提供一个文本框，用户可以在文本框输入内容，然后我们在文本框下方通过<span>把用户输入的内容显示出来。

纯JavaScript实现数据更新的实时视图显示

</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
  by PurpleEndurer
</p>
<p>请输入信息：
  <input type="text" id="tbMsg" value="请您输入信息" />
</p>
<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

1 纯JavaScript实现

为了在用户通过文本框输入内容后，迅速在文本框下方把用户输入的内容显示出来，我们需要监听用户在文本框输入事件，即oninput事件，在具体实现上，至少有两个方法。

1.1 修改文本框HTML代码监听oninput事件

即将

<input type="text" id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />

修改为

<input type="text"  id="tbMsg"  value="请您输入信息" oninput="showMsg(this.value)" />

我们增加了代码

oninput="showMsg(this.value)"

它的作用是指定发生input事件时执行函数showMsg函数，并且把文本框的值（this.value）作为函数的输入参数传递过去。

在showMsg函数中，我们把文本框的值更新显示在文本框的下方：

function showMsg(s)
{
  document.getElementById("spanMsg").innerText = s;
}

完整的代码是：

<script>
function showMsg(s)
{
  document.getElementById("spanMsg").innerText = s;
}
</script>
<p style="font-size:18pt; font-weight:bold;">
  纯JavaScript实现数据更新的实时视图显示  
</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
  by PurpleEndurer
</p>
<p>请输入信息：
  <input type="text"  id="tbMsg" value="请您输入信息" oninput="showMsg(this.value)" />
</p>
<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

代码运行的效果如下：

1.2 使用EventTarget.addEventListener() 方法将指定的监听器showMsg注册到文本框上

1.在<script></script>之间增加代码，给id为tbMsg的文本框注册监听器
//tbMsg = document.getElementById("tbMsg");
//tbMsg.addEventListener("input", showMsg);
document.getElementById("tbMsg").addEventListener("input", showMsg);

对1.1中的 showMsg函数进行修改

function showMsg(e)
{
  document.getElementById("spanMsg").innerText = e.target.value;
}

作为监听器后，showMsg函数仍会接收到一个参数，不过此参数与1.1中的不同，此时收到的参数就是它监听的对象，id为tbMsg的文本框。

收到的参数变了，showMsg函数体内的赋值语句也相应做了修改。

完整的代码如下：

<script>
function showMsg(e)
{
  document.getElementById("spanMsg").innerText = e.target.value;
}
// tbMsg = document.getElementById("tbMsg");
// tbMsg.addEventListener("input", showMsg);
document.getElementById("tbMsg").addEventListener("input", showMsg);
</script>
<p style="font-size:18pt; font-weight:bold;">
  纯JavaScript实现数据更新的实时视图显示  
</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
  by PurpleEndurer
</p>
<p>请输入信息：
  <input type="text" id="tbMsg" value="请您输入信息" />
</p>
<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>

但是代码运行时出现问题：

出现这个问题的原因是

第10行语句

document.getElementById("tbMsg").addEventListener("input", showMsg);

位于第24行语句

前面。

也就是说，在我们给id为tbMsg的文本框注册监听器时，id为tbMsg的文本框还没有描述和生成。

解决的办法就是把<script></script>代码段移动到HTMid为tbMsg的文本框的定义和生成语句后面，即：

纯JavaScript实现数据更新的实时视图显示

</p>
<p style="margin-left:20%; color:purple; font-weight:bold;">
  by PurpleEndurer
</p>
<p>请输入信息：
  <input type="text" id="tbMsg" value="请您输入信息" />
</p>
<p style="font-size:18pt; font-weight:bold;">
   您输入的信息是：
   <span style="color:purple" id="spanMsg">请您输入信息</span>
</p>
<script>
function showMsg(e)
{
  document.getElementById("spanMsg").innerText = e.target.value;
}
// tbMsg = document.getElementById("tbMsg");
// tbMsg.addEventListener("input", showMsg);
document.getElementById("tbMsg").addEventListener("input", showMsg);
</script>

代码运行的效果如下：

2 使用vue来实现

Vue 的核心功能是声明式渲染，通过扩展于标准 HTML 的模板语法，我们可以对 HTML 中的内容发生变化时进行响应式地自动更新。

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

2.1 使用 ref()

我们以1.1的代码为基础进行修改。

2.1.1 修改<script></script>的代码

1.将<script> 改为 <script setup>

起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用。Vue3.2 中只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。

如果不加上 setup的话，下面即使定义了数据成员spanMsg，并赋予了初始值'请您输入信息'，并且将id为tbMsg的文本框的值与数据成员 spanMsg的值做双向绑定，那么id为tbMsg的文本框不会显示初始值'请您输入信息'。

2.script标签中原有的代码都不需要了，增加了两行代码

1.import { ref } from 'vue'

这是 Vue.js 3 中的语法，用于声明一个响应式引用 (ref)。

响应式引用是一个能够在模板中自动更新的引用类型。

通过使用 ref 函数，可以将一个普通的数据类型转换成响应式引用类型，使其在模板中自动进行响应式更新。

简而言之，ref 提供了一种更直观和强大的方式来处理 Vue 组件中的状态。

2.const spanMsg = ref('请您输入信息')

或 var spanMsg = ref('请您输入信息')

定义数据成员spanMsg，其值是ref函数，ref函数有一个参数，参数初始值为'请您输入信息'。

如果spanMsg 前不使用 const 或 var 来定义的话，会收到出错信息：

spanMsg is not defined

脚本部分修改后的完整代码是：

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

2.1.2 将纯JavaScript实现数据更新的实时视图显示修改为使用Vue实现数据更新的实时视图显示

2.1.3 修改id为tbMsg的文本框描述语句

从

<input type="text" id="tbMsg" value="请您输入信息" />

改为

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

改动有2点：

1.增加了代码： v-model="spanMsg"

v-model是Vue扩展的数据双向绑定指令，它的全写是：v-model:value="spanMsg"，简写为： v-model="spanMsg"，它的作用是将id为tbMsg的文本框的值与数据成员 spanMsg的值做双向绑定。

2.去掉了value属性

value属性的作用是指定id为tbMsg的文本框的初始值，因为我们已经通过 v-model="spanMsg" 将文本框的值与数据成员 spanMsg 的值做了双向绑定，所以这里就不需要value属性了。

2.1.4 修改 <span style="color:purple" id="spanMsg">……语句

从

<span style="color:purple" id="spanMsg">请您输入信息</span>

改为

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

有两处修改。

将初始字符串“请您输入信息”改为“{{spanMsg }} ”

{{spanMsg }} 是 vue 的语法特性，能够在 html 元素中插入组件属性。

在前面我们已经为数据成员spanMsg指定了初始值。

出现在 {{ }} 之间的不仅可以是数据成员名称，也可以是表达式。

去掉了 id="spanMsg"

因为我们已经通过{{ spanMsg }} 来展示spanMsg的值的更新，不需要通过JavaScript代码通过id 来更新，所以我们把它去掉。其实去不去掉它，都不影响代码的运行结果。

2.1.5 增加<template></template>,把<script></script>外的代码纳入

即：

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

在 html中，template标签中的内容在页面中不会显示。这是因为template标签设置了display:none;属性，天生不可见。但是在后台查看页面DOM结构存在template标签。

在vue实例绑定的元素内部，temate标签的内容可以看到，但是查看后台的dom结构不存在template标签。

需要注意的是： vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。不过此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

做了以上修改后的完整代码如下：

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