0 前言

Vue学习笔记12:分别用纯JavaScript和Vue记录和显示用户输入的所有信息(上)_PurpleEndurer@5lcto的技术博客_51CTO博客 中,我们用Vue来记录和显示用户输入的所有信息的功能,遇到了一个问题,就是代码运行时却慢了一拍,当用户输入第n+1一次的信息后,才会显示之前的n次信息。

换而言之,就是页面信息更新不够及时,如何解决这个问题呢?

1 思路

我们回过头来看 Vue学习笔记12:分别用纯JavaScript和Vue记录和显示用户输入的所有信息(上)_PurpleEndurer@5lcto的技术博客_51CTO博客 中 的最终代码【代码2.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;">
	使用Vue记录和显示用户输入的所有信息  
</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>

从逻辑上来说,当用户输入信息并点击“确定”按钮后,信息会保存到数组aRec中,aRec的值发生了变化。

由于aRec不是用ref定义的,所以第31行-33行的v-for 指令未能在aRec的值发生变化时及时响应。

那么最明显、最直接的解决方法就是把aRec改为使用ref定义,这个方法我们留到后面再来这现。

现在我们先尝试使用v-if指令来实现。

因为v-if指令需要进行条件判断,如果符合条件,就要进行渲染。这其实也是一种驱动网页进行局部刷新的方法。

2 改进

我们以1 思路中的原代码为基础进行修改。

2.1 改写网页元素描述代码

2.1.1 改写技术说明代码

因为现在我们将使用v-if指令来解决问题,所以我们将

<p style="font-size:18pt; font-weight:bold;">
	使用Vue记录和显示用户输入的所有信息  
</p>

改为

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

2.1.2 增加v-if指令

我们将把v-if指令增加到第31行的代码:

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

中,那么v-if指令所需要的判断条件如何设定呢?

我们将引入一个数据成员c,只要c的值 大于 0,即 c > 0,就执行渲染,达到刷新页面的效果。

即将:

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

改为:

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

2.2 改写JavaScript脚本代码

2.2.1 增加数据成员c

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

因为v-if指令的判断条件是 c > 0,所以c的初始值最好为大于0的正整数,比如1。

2.2.2 修改onClick()函数

为了让v-if指令及时生效,我们需要及时更新数据成员c的值。

为此,我们在onClick()函数中增中一行可更新数据成员c的值的代码,最简单的就是:c.value++。

即将:

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

改为:

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

这样,用户每次点击确定按钮时,不仅用户输入的信息会存储到数组aRec中,数据成员c的值的也会更新。

这里有两个个细节要注意:

第1个,就是我们更新c的值的语句用的是 c.value++ 而不是 c++。

这是因为c是使用ref()定义的数据成员对象,它的值存储在c的value属性里面。

那么回过头来看网页元素描述代码:

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

这里我们使用的是 c > 0,而不是 c.value > 0,这是因为Vue在HTML标签代码中会帮我们自动解包出c的值。

第2个,只要c的初始值大于或等于0,那么语句c.value++ 也可以放到  语句 aRec.push(spanMsg.value) 的后面,这不会影响最终的代码执行效果。

2.3 最终代码

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

2.4 代码运行效果

Vue学习笔记14:使用v-if指令解决数据更新后的页面刷新问题_JavaScript


3 小结

为了让网及时显示用户输入信息的记录,我们引入了v-if指令。

为了让v-if指令及时生效,我们增加了数据成员c,并且让它的值也及时更新。

那么,数据成员c的值和保存用户输入信息的数组aRec的内容,或者元素数量(也就是数组长度),是同步更新的,那么我们是否可以不增加数据成员c,直接使用数组aRec的变化来作为v-if指令的判断条件呢?

下回揭晓答案。