Vue学习笔记3：对比纯JavaScript和Vue实现数据更新的实时视图显示

0 前言

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

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

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

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

登录后复制

<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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.

1 纯JavaScript实现

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

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

 即将 

登录后复制

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

• 1.

修改为 

登录后复制

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

• 1.

我们增加了代码

οninput="showMsg(this.value)" 

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

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

登录后复制

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

• 1.
• 2.
• 3.
• 4.

完整的代码是：

登录后复制

<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.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.

代码运行的效果如下：

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.
• 2.
• 3.
• 4.

2. 对1.1中的 showMsg函数进行修改

登录后复制

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

• 1.
• 2.
• 3.
• 4.

作为监听器后，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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.

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

出现这个问题的原因是

第10行语句

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

位于第24行语句

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

前面。

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

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

登录后复制

<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>

<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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.

代码运行的效果如下：

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

• 1.

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

登录后复制

<script>
  
import { ref } from 'vue'

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

</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

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

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

从

登录后复制

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

• 1.

改为

登录后复制

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

• 1.

改动有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>

• 1.

改为

登录后复制

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

• 1.

有两处修改。

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

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

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

出现在 {{ }} 之间的不仅可以是数据成员名称，也可以是 表达式。可以是 vue 的语法特性，能够在 html 元素中插入组件属性。

2. 去掉了  id="spanMsg"

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

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

即：

登录后复制

<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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

在 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>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.

代码运行的效果如下：

你可以将HTML模板和JavaScript中的数据绑定在一起，使得数据的变化会自动修改视图，而视图的变化也会更新对应的数据。这对于构建动态和交互式的界面非常有用。纯JavaScript不提供这种数据绑定的能力，你需要手动编写代码来处理数据和视图之间的更新。