Vue 2 vs Vue 3:v-if 和 v-for 的差异

embedded/2024/12/22 22:32:48/

在 Vue 2 和 Vue 3 中,v-if 和 v-for 是用于条件渲染和列表渲染的两个常用指令。虽然两个版本中它们的基本用法一致,但在某些情况下有差异和注意事项。

同时,这也是比较常见的 Vue 面试题之一。

1. 基本用法

1、v-if 用于条件渲染,当条件为 true 时,元素才会被渲染。

<!-- Vue 2 和 Vue 3 中的用法一致 -->
<div v-if="isVisible">This is visible</div>

2、v-for 用于渲染列表,通过迭代数组或对象的每一项生成一组元素。

<!-- Vue 2 和 Vue 3 中的用法一致 -->
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

2. v-if 和 v-for 结合

在 Vue 2 和 Vue 3 ,如果在同一个元素上同时使用 v-if 和 v-for,它们的执行顺序是不同的。

- Vue 2,v-for 的优先级高于 v-if,这意味着即使某个列表项不满足 v-if 条件,它也仍然是先被 v-for 迭代,然后才根据 v-if 的条件决定是否渲染。

<!-- Vue 2 中的代码 -->
<template><ul><li v-for="item in items" v-if="item.isVisible" :key="item.id">{{ item.name }}</li></ul>
</template>
<script>
export default {data() {return {items: [{ id: 1, name: 'Item 1', isVisible: true },{ id: 2, name: 'Item 2', isVisible: false },{ id: 3, name: 'Item 3', isVisible: true },]};}
};
</script>

- Vue 3,v-if 的优先级高于 v-for,这意味着在迭代之前,首选会判断是否满足 v-if 的条件,如果条件为 false,则不会执行 v-for。

<!-- Vue 3 中的代码 -->
<template><ul><li v-if="shouldRender" v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template>
<script>
export default {data() {return {shouldRender: false, // 控制是否渲染整个列表items: [{ id: 1, name: 'Item 1', isVisible: true },{ id: 2, name: 'Item 2', isVisible: false },{ id: 3, name: 'Item 3', isVisible: true },]};}
};
</script>

Vue 3 认为 Vue 2 设计的优先级有问题,虽然不报错,但是不建议使用。因此在 Vue 3 中,直接设计 v-if 的优先级高于 v-for。(先执行 v-if,然后执行 v-for)

3. 改进

在 Vue 3 中,官方建议,避免在同一个元素上同时使用 v-if 和 v-for,而是将它们分开处理。不仅可以提升代码的可读性,还能避免潜在的逻辑错误。

1、Vue 2 使用计算属性分离逻辑

Vue 2 中,v-for 的优先级高于 v-if,导致每一次循环时判断,修改数据之后,也要重新循环所有项,会大大耗损效率。

<template><ul><!-- 只使用 v-for,因为计算属性已经过滤了不可见的项 --><li v-for="item in visibleItems" :key="item.id">{{ item.name }}</li></ul>
</template>
<script>
export default {data() {return {items: [{ id: 1, name: 'Item 1', isVisible: true },{ id: 2, name: 'Item 2', isVisible: false },{ id: 3, name: 'Item 3', isVisible: true },]};},computed: {// 计算属性:只返回 isVisible 为 true 的项visibleItems() {return this.items.filter(item => item.isVisible);}}
};
</script>

2、Vue 3 分离逻辑到外部容器

<template><!-- 将 v-if 移动到外部容器 --><div v-if="shouldRender"><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
export default {data() {return {shouldRender: false, // 控制是否渲染整个列表items: [{ id: 1, name: 'Item 1', isVisible: true },{ id: 2, name: 'Item 2', isVisible: false },{ id: 3, name: 'Item 3', isVisible: true },]};}
};
</script>

4. 注意点

4.1 v-for 的 key

在 Vue 中,key 属性是 Vue 用于标识和追踪每个列表项的唯一标识符,用于在渲染列表时帮助 Vue 追踪每个元素的身份(确定哪些元素被改变、添加或移除),从而在更新DOM 时优化性能。

也就是,在数据变化时,Vue 能够精确地找到被改变的元素,并且只更新这些元素,避免了整个列表的重新渲染。

<!-- 假设 items 是一个数组,每个 item 都有唯一的 id -->
<div v-for="item in items" :key="item.id">{{ item.name }}
</div>
4.2 面试题:为什么不推荐使用索引作为 key

1、列表项顺序变化:当顺序发生变化时,使用索引作为 key 可能导致渲染错误。Vue 使用 key 识别哪个元素是新的,哪个是旧的,以便在 DOM 中高效的更新。如果使用索引,当列表项顺序变化时,Vue 可能无法正确地识别出元素的移动,而可能会错误地删除或重新创建元素。

2、动态添加或删除列表项:当列表项被动态添加或删除时,使用索引也可能导致问题。例如,如果从列表中删除一个元素,所有后续元素的索引都会改变,这可能会导致 Vue 错误地重新渲染整个列表。

3、性能问题:Vue 使用 key 以便最小化 DOM 操作,更新那些真正改变的 DOM 元素。如果 key 不唯一或者不稳定,Vue 可能需要执行更多的 DOM 操作来更新列表,导致性能降低。

4、组件复用问题:如果列表项是一个 Vue 组件,Vue 会尝试重用具有相同 key 值的组件实例,如果 key 不稳定,可能导致组件状态的错误或丢失。

5、可预测性:使用一个稳定的、可预测的 key 可以提高 Vue 的更新算法的效率。每个节点的 key 唯一,以便 Vue 可以准确跟踪,从而重用和重新排序现有的元素,而不是重新创建它们。

因此推荐使用数据项的唯一标识符(如 ID)作为 key,这样可以确保在数据变化时,Vue 能够准确追踪和更新 DOM 元素。

<div v-for="item in items" :key="item.id">{{ item.name }}
</div>

http://www.ppmy.cn/embedded/102102.html

相关文章

MyBatis使用递归查询来实现多级菜单的功能

MyBatis使用递归查询来实现多级菜单的功能 一、前言1. 什么是递归查询&#xff1f;2. 目标 3. 数据库表结构4. MyBatis 配置5. 代码解析6. 实现步骤7. 总结 一、前言 在这篇文章中&#xff0c;我们将探讨如何使用递归查询来实现多级菜单的功能。具体来说&#xff0c;我们将使用…

【STM32】PWR电源控制(低功耗模式)

本篇博客重点在于标准库函数的理解与使用&#xff0c;搭建一个框架便于快速开发 目录 PWR简介 修改主频 低功耗模式 睡眠模式 停止模式 待机模式 PWR简介 PWR&#xff08;Power Control&#xff09;电源控制 &#xff0c;负责管理STM32内部的电源供电部分&#xff0c;可…

Datawhale X 李宏毅苹果书 AI夏令营 Task1打卡

1 什么是机器学习、深度学习 1.1 机器学习 目标&#xff1a;让机器具备找一个函数的能力 应用&#xff1a;以语音识别为例&#xff0c;函数的输入是声音信号&#xff0c;输出是声音信号的文字内容 任务类型&#xff1a; ①回归(Regression)&#xff1a;函数输入输出是数值…

C++入门基础知识38——【关于C++ 运算符——逻辑运算符】

成长路上不孤单&#x1f60a;【14后&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

爬虫引流推广使用IP

爬虫引流推广中使用IP的主要目的是为了模拟多个独立用户从不同的地理位置访问网站&#xff0c;提高营销活动的自然度和效果。爬虫通过更换代理IP可以避免因频繁请求而被目标网站封禁&#xff0c;保持数据抓取的稳定性和隐蔽性。以下是几个关键点&#xff1a; IP池管理&#xff…

【应用层】Tomcat10安装以及对应的VScode插件使用

文章日期是2024年8月26日&#xff0c;Tomcat10为稳定版中最新的&#xff0c;Tomcat11为测试版。 流程&#xff1a;下载Tomcat10-->等待下载时&#xff0c;安装对应的VScode插件-->配置Tomcat10-->配置对应的VScode插件 1、下载Tomcat10 2、安装对应的VScode插件 3…

网络排名变差算法在充电桩计量可信度评价中的应用AcrelCloud-9000安科瑞充电柱收费运营云平台

摘要&#xff1a;网络排名变差算法是指根据充电交易流水数据构造桩车网络&#xff0c;利用复杂网络的投票智慧而非传统的物理实验来获得对量值的信心。将排名变差算法用于桩车网络计算中&#xff0c;旨在检定合格的充电桩对其他充电桩排名变化的影响&#xff0c;这种影响以电动…

【MySQL】mysql索引和事务(面试经典问题)

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 mysql索引 代价 查看索引 创建索引 删除索引 索引背后的数据结构 B树 B树 B树与B树的区别 B树的优势 mysql事务 事务 涉及的四个核心特性: 隔离性详细解释 脏读 不可重…