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