【Vue】彻底搞懂条件&列表渲染-摩杜云开发者社区

hello，我是小索奇哈，精心制作的Vue系列持续发放，涵盖大量的经验和示例，由浅入深进行讲解。本章给大家讲解的是条件&列表渲染，前面的章节已经更新完毕，后面的章节持续输出，有任何问题都可以留言或私信哈，一起加油~

条件渲染

1. v-if

这个指令根据表达式的真假来决定是否渲染元素

例如:

<div v-if="show">
  只有在 show = true 时显示
</div>

2. v-else-if/v-else

v-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件

例如:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B 
</div>
<div v-else>
  都不是
</div>

3. 用key管理可复用元素

让Vue通过key值识别元素,提高渲染效率

例如:

<div v-if="loginType === 'username'" key="username">
  username
</div>
<div v-else key="email">
  email
</div>

4. v-show

基于CSS显示/隐藏元素,只是切换display

例如:

<div v-show="ok">
  在 ok=true 时显示
</div>

如果要频繁的更改，使用v-show会更好点，因为它仅是切换隐藏显示，效率更高

v-if 和 v-show 在条件渲染时的选择判断如下

当需要完全切换显示/隐藏元素时,如用户权限控制,使用 v-if它会直接操作 DOM,完全销毁或重新渲染元素
当只需要简单切换元素的显示/隐藏,如一些弹窗、提示,使用 v-show它只是切换 CSS 的 display属性,开销更小
当元素较简单,渲染开销小时,两者差异不大如果元素较复杂,v-show 会略快一些
如果需要频繁切换,使用 v-show;如果在运行时不大可能改变,使用 v-if

简单总结一下:

完全展示/隐藏用 v-if
简单切换显示/隐藏用 v-show
频繁切换用 v-show
运行时不变用 v-if

template上的v-if

template元素是一个不可见的包装器,它可以容纳多个元素,但是它本身不会渲染到DOM中

常见的应用场景就是和v-if指令结合使用:

把v-if加在<template>上,可以有条件地渲染<template>内部的多个元素
而不需要像v-if直接加在单个元素上那样,重复写很多重复的v-if条件判断
<template>可以包含任意类型的元素,非常方便地组织元素块
最终渲染结果不包含<template>元素,只包含其内部的元素

用户信息展示案例

<template v-if="user.loggedIn">

  <div>
    <!-- 用户信息 --> 
    <p>用户名:{{user.name}}</p>  
    <p>积分:{{user.points}}</p>
  </div>

  <div> 
    <!-- 用户菜单 -->
    <button>首页</button>
    <button>设置</button>
  </div>

</template>

<div v-else>
  <!-- 登录提示 -->
  <p>请登录后查看个人信息</p>
  <button>去登录</button>  
</div>

注意template只能和v-if使用，用v-show是不行的

列表渲染

v-for

用于基于数据多次渲染元素,通常用来渲染列表数据

<ul>
  <li v-for="item in list">
    {{ item }}
  </li>
</ul>

模板 v-for

和v-if一样,可以在<template>上使用v-for来渲染元素块

<template v-for="item in list">
  <div>{{item.name}}</div>
  <div>{{item.desc}}</div>
</template>

track-by

用来指定元素的唯一标识,提高渲染效率

<div v-for="item in list" :key="item.id"></div>

这里详解一下key

在Vue列表渲染时,就像一个todolist应用生成一长串的li元素当列表数据更新时,Vue需要知道具体哪个元素发生了变化,比如插入、删除、排序等

那么Vue如何识别每个元素的身份呢?这就是key的作用了

我们需要给每个元素添加一个独一无二的key值,来标识不同的元素:

<ul>
  <li v-for="item in list" :key="item.id">
    {{item.name}}
  </li>
</ul>

这里我们使用每个数据item的id作为keykey的要求是唯一的,比如item的id就很适合作为key

有了key,Vue就可以准确地知道哪个元素发生了变化,比如某个元素被删除了,Vue会找到对应key的元素并销毁

这样就实现了高效的列表渲染

所以简单来说,key的作用是作为元素的唯一标识,用于提高Vue列表渲染时的性能,底层会复用DOM节点需要注意key必须唯一,不要使用索引index作为key

注意

一定要写key！虽然说不写key也不报错，但不写可能导致以下内容

列表重新渲染时,会直接创建新元素,而不是移动原有元素这会带来页面闪烁
使用Transition过渡动画时,会无法正确获取元素状态
丧失Vue内部对列表元素的身份识别能力,导致其他问题

这里仅列出以下几点，在react中不写key直接就会报错

当我们不写key的话，vue会自动把index索引作为key（下面介绍index）

直接通过索引修改数组,如 vm.items[0] = {},是非响应式的。应使用 Vue.set(vm.items, 0, {}) 或 vm.items.splice() 来修改数组。

官网的介绍

【Vue】彻底搞懂条件&列表渲染_Vue

image-20230821000956765

索引

可以通过第二个参数获得索引值

<div v-for="(item, index) in list"></div>

上面的key也可以根据索引来定义

<div v-for="(item, index) in list"></div>

这里可能会有问题，能用index作为key吗？也可以，但是不推荐！

比如下面案例

<li v-for="(item, index) in list" :key="index">
  {{ item }}
</li>

使用 index 作为 key 存在以下问题:

列表重新排序时,元素的 key 会变化,导致状态混乱（比如新添加一个索引为0索引的小索奇，它就替代了初始索引为0的张三，与原来进行对比，发现张三被小索奇怼跑了，这不闹的吗？）
不能准确判断变化的原因是索引变还是数据变
删除元素时,产生的新索引不会跟踪到原元素

正确写法，还是建议绑定到item.id身上,使用每一项数据中稳定且唯一的标识作为 key！

注意以面试题形式存在

【Vue】彻底搞懂条件&列表渲染_数据_02

image-20230821002410628

拓展Diff算法

key是虚拟DOM对象的标识，当数据变化时，Vue就会根据新数据生成新的虚拟DOM

diff 算法是 Vue 和 React 等虚拟 DOM 框架实现高效 DOM 更新的关键算法它可以增量更新视图,避免重新渲染整个 DOM 树

diff算法的基本原理是:

将当前虚拟 DOM 和上一次虚拟 DOM 进行对比,找出变化的内容（没有变化的直接就复用了）
如果在旧虚拟节点中未找到与新虚拟节点相同的key，那么直接创建新的虚拟DOM，进行渲染，如果key同，那么就对比内容
不直接操作 DOM,而是将变化记录到一个JS 对象中
将这些变化一次性更新到实际的 DOM树上

简单示例

diff算法对比会发现,只需要将 B 换成 C 即可,无需重新渲染整个 UL这样避免了不必要的 DOM 操作

<!-- 上次虚拟DOM --> 
<ul>
  <li>A</li>
  <li>B</li>
</ul>

<!-- 当前虚拟DOM -->
<ul>
  <li>A</li>
  <li>C</li>  
</ul>

Vue 和 React 都使用类似的 diff 算法实现最小化更新实际 DOM 的目的,这带来非常高的性能优势

【Vue】彻底搞懂条件&列表渲染_数组_03

image-20230821005540298

数组更新检测

Vue包含一系列观察数组变异方法来响应式更新视图

像push、pop、splice等方法

列表过滤

用两组代码分别实现过滤效果

watch实现

new Vue({
    el:'#root',
    data:{
     keyWord:'',
     persons:[
      {id:'001',name:'马冬梅、',age:19,sex:'女'},
      {id:'002',name:'周冬雨',age:20,sex:'女'},
      {id:'003',name:'周杰伦',age:21,sex:'男'},
      {id:'004',name:'温兆伦',age:22,sex:'男'}
     ],
     //存放过滤后的新数组
     filPerons:[]
    },
    watch:{
     keyWord:{
      immediate:true,
      handler(val){
       this.filPerons = this.persons.filter((p)=>{
      // 返回一个布尔值
        return p.name.indexOf(val) !== -1
       })
      }
     }
    }
   })

computed实现

new Vue({
    el:'#root',
    data:{
     keyWord:'',
     persons:[
      {id:'001',name:'马冬梅',age:19,sex:'女'},
      {id:'002',name:'周冬雨',age:20,sex:'女'},
      {id:'003',name:'周杰伦',age:21,sex:'男'},
      {id:'004',name:'温兆伦',age:22,sex:'男'}
     ]
    },
    computed:{
     filPerons(){
     // 计算属性必备return 
      return this.persons.filter((p)=>{
      // 返回一个布尔值，计算属性没有newValue属性，但可以通过用户输入的值来拿
       return p.name.indexOf(this.keyWord) !== -1
      })
     }
    }
   })

初始时计算属性会默认调用get，当依赖的数据变化时，计算属性也会自动调用~从而实现过滤

当computed和watch都能实现时，优先考虑computed

拓展filter

filter方法的作用是:

它接收一个函数作为参数,这个函数会逐个处理数组中的每个元素
函数返回一个布尔值,true表示保留该元素,false表示过滤掉该元素
filter会返回一个新数组,包含执行函数返回true的元素
下面示例中的name代表callback函数的参数,表示当前正在遍历到的数组元素

const names = ['王美丽', '李小福', '张快乐', '赵细腻', '吉祥如意', '康健壮'];

const longNames = names.filter(name => name.length > 3);

const loudLongNames = longNames.map(name => name.toUpperCase()); 

console.log(loudLongNames);
// 输出:['李小福', '张快乐', '赵细腻', '吉祥如意']

这里我们过滤出了长度大于3个字的中文名字,然后把它们转换成大写，这里仅仅为了多用一个方法~

filter 最典型的用途就是过滤数组,接受判断条件并返回过滤后的新数组，

列表排序

案例：实现过滤+排序

<div id="root">
		<h2>人员列表</h2>
		<input type="text" placeholder="请输入名字" v-model="keyWord">
		<button @click="sortType = 2">年龄升序</button>
		<button @click="sortType = 1">年龄降序</button>
		<button @click="sortType = 0">原顺序</button>
		<ul>
			<li v-for="(p,index) of filPerons" :key="p.id">
				{{p.name}}-{{p.age}}-{{p.sex}}
				<input type="text">
			</li>
		</ul>
	</div>

	<script type="text/JS">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				keyWord:'',
				sortType:0, //0原顺序 1降序 2升序
				persons:[
					{id:'001',name:'马冬梅',age:30,sex:'女'},
					{id:'002',name:'周冬雨',age:31,sex:'女'},
					{id:'003',name:'周杰伦',age:18,sex:'男'},
					{id:'004',name:'温兆伦',age:19,sex:'男'}
				]
			},
			computed:{
				filPerons(){
					const arr = this.persons.filter((p)=>{
						return p.name.indexOf(this.keyWord) !== -1
					})
					//判断一下是否需要排序
					if(this.sortType){
						arr.sort((p1,p2)=>{
							return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
						})
					}
					return arr
				}
			}
		}) 

	</script>

【Vue】彻底搞懂条件&列表渲染_数据_04

image.png

拓展

Arrays.sort()

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// output: Array [1, 100000, 21, 30, 4]

如果提供了比较函数compareFn，所有非 undefined 的数组元素都会按照比较函数的返回值进行排序，所有的 undefined 元素都会被排序到数组的末尾，并且不调用 compareFn

【Vue】彻底搞懂条件&列表渲染_Vue_05

image-20230822221418048

简单案例

let arr = [66,99,88]
          arr.sort((a,b)=>{
           // 前-后就是升序，相反则降序
              return a-b
          })
  console.log(arr)
// [66, 88, 99]

如果对你有用，请点个免费的爱心叭~