Vue学习笔记15：不用v-if指令解决数据更新后的页面刷新问题

0 前言

在 Vue学习笔记14：使用v-if指令解决数据更新后的页面刷新问题_PurpleEndurer@5lcto的技术博客_51CTO博客 中， 为了在数据更新后及时刷新页面显示，我们是增加了数据成员c，并利用了v-if指令。最后的小结中我们提到，数据成员c的值和保存用户输入信息的数组aRec的内容，或者元素数量（也就是数组长度），是同步更新的，那么我们是否可以不增加数据成员c，直接使用数组aRec的变化来作为v-if指令的判断条件呢？这次我们就来试试看。

1 第1次改造代码

我们以 Vue学习笔记14：使用v-if指令解决数据更新后的页面刷新问题_PurpleEndurer@5lcto的技术博客_51CTO博客 中的最终代码

<script setup>

import { ref } from 'vue'

var spanMsg = ref("")

var aRec = new Array();

var c = ref(1);//用于v-if语句的判断条件

function onClick()
{
  c.value++;//更新c的值，从而让v-if指令及时生效
	aRec.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}

</script>

<template>

<p style="font-size:18pt; font-weight:bold;">
	引入v-if指令完善记录和显示用户输入的所有信息功能
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	  <input type="text" v-model="spanMsg"  placeholder="请输入信息" />　 
    <input type="button" value="确定" @click="onClick" />
</p>

 <div v-if="(c > 0)"  v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

</template>

为基础进行改造。

1.1 改写网页元素描述代码

1.1.1 改写技术说明代码

将第21-23行代码

<p style="font-size:18pt; font-weight:bold;">
	引入v-if指令完善记录和显示用户输入的所有信息功能
</p>

改为

<p style="font-size:18pt; font-weight:bold;">
	改造v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

1.1.2 改写v-if条件语句

将第34-36行代码

<div v-if="(c > 0)"  v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

改为

<div v-if="(aRec.length > 0)"  v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

主要是将 v-if="(c > 0)"   改为 v-if="(aRec.length > 0)"。

1.2  改写JavaScript脚本代码

由于我们不再使用数据成员c，所以我们要删除数据成员c的定义语句，即删除第9行语句：

var c = ref(1);//用于v-if语句的判断条件

1.3 第1次修改的最终代码

综合以上修改后的完整代码为【代码1.3】：

<script setup>

import { ref } from 'vue'

var spanMsg = ref("")

var aRec = new Array();

function onClick()
{
	aRec.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}

</script>

<template>

<p style="font-size:18pt; font-weight:bold;">
	改造v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	  <input type="text" v-model="spanMsg"  placeholder="请输入信息" />　 
    <input type="button" value="确定" @click="onClick" />
</p>

 <div v-if="(aRec.length > 0)"  v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

</template>

1.4 运行效果

很不幸，代码运行时又慢了一拍，当用户输入第n+1一次的信息后，才会显示之前的n次信息的问题又出现了。

2 分析原因

我们在onClick()函数中：

function onClick()
{
  c.value++;//更新c的值，从而让v-if指令及时生效
	aRec.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}

明明先后更新了数据成员 c 和 数组aRec 的值，为什么将 v-if="(c > 0)"   改为 v-if="(aRec.length > 0)"就出现问题呢？

对比 数据成员 c 和 数组aRec 的定义，数据成员 c 是使用ref()定义的，而数组aRec不是使用ref()定义的。

就是这个差别导致了问题吗？

我们测试看看。

3 第2次改造代码

需要改写的主要是JavaScript脚本代码。

3.1 改写 数组aRec 的定义

将

var aRec = new Array();

改为

var aRec = ref([]);

3.2 改写onClick()函数

因为数组aRec改用ref()来定义了，那么我们的操作它的语句要作相应修改。

在本例中主要是要将onClick()函数中的语句

aRec.push(spanMsg.value);//将用户输入的信息存储到数组末尾

改为

aRec.value.push(spanMsg.value);//将用户输入的信息存储到数组末尾

这是因为aRec的值存储在它的value属性里面。

在javaScript脚本中，我们要显示地指定value属性。

3.3 第2次修改的最终代码

综合以上修改后的完整代码为【代码2.3】：

<script setup>

import { ref } from 'vue'

var spanMsg = ref("");

var aRec = ref([]);

function onClick()
{
	aRec.value.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}

</script>

<template>

<p style="font-size:18pt; font-weight:bold;">
	改造v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	  <input type="text" v-model="spanMsg"  placeholder="请输入信息" />　 
    <input type="button" value="确定" @click="onClick" />
</p>

 <div v-if="(aRec.length > 0)"  v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

</template>

3.4 运行效果

这次代码运行正常，没有出现更新滞后的问题。

4 去掉v-if指令

我们之前增加v-if指令是为了解决网页未能及时更新的问题，现在我们已经改用ref()来定义数组aRec，那么是否还需要v-if指令呢？

我们来试试看。

首先，我们把代码

<div v-if="(aRec.length > 0)"  v-for="(v, i) in aRec">

改为

<div v-for="(v, i) in aRec">

也就是删除 v-if="(aRec.length > 0)" 。

然后，我们修改技术说明代码。

将

<p style="font-size:18pt; font-weight:bold;">
	改造v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

改为

<p style="font-size:18pt; font-weight:bold;">
	不用v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

最终代码为【代码4】：

<script setup>

import { ref } from 'vue'

var spanMsg = ref("");

var aRec = ref([]);

function onClick()
{
	aRec.value.push(spanMsg.value);//将用户输入的信息存储到数组末尾
}

</script>

<template>

<p style="font-size:18pt; font-weight:bold;">
	不用v-if指令条件优化记录和显示用户输入的所有信息功能
</p>

<p style="margin-left:20%; color:purple; font-weight:bold;">
	by PurpleEndurer
</p>

<p>请输入信息：
	  <input type="text" v-model="spanMsg"  placeholder="请输入信息" />　 
    <input type="button" value="确定" @click="onClick" />
</p>

 <div v-for="(v, i) in aRec">
   <p>第{{ i+1 }}次输入：{{ v }}</p>
</div>

</template>

运行效果如下：

可见，即使没有v-if指令，网页内容也能在数据更新时及时刷新。

5 小结

今天，我们通过修改数组aRec的定义方式，不用v-if指令，也能实现数据更新时网页内容也能及时更新。

所以，在Vue中，我们要注意数据成员变量的定义方法，充分使用和发挥ref()的特性。

6 改进和拓展

有时用户输入的信息是相同的，我们是否可以对用户输入的信息做进一步的统计和分析呢？

比如，当用户新输入的信息与之前输入过的信息相同时，我们是否可以统计并输出这个信息重复的次数呢？