Vue中的循环遍历与key值原理解读

更新时间：2023年05月25日 10:08:20 作者：Ednburgh-

这篇文章主要介绍了Vue中的循环遍历与key值原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

1，v-for遍历数组

1.1 代码展示案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h2 v-for="(item,index) in letters" :key="index">{{item}}--{{index}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						letters: ['a', 'b', 'c', 'd', 'e']
					}
				}
			})
		</script>
	</body>
</html>

1.2 循环遍历常用方法

（1）原生for循环

（2）for in

（3）for of

（4）arr.map()加工处理

（5）arr.reduce()缩减。累加

(6) arr.filter();数组筛选过滤

（7）arr.some（）找符合条件元素，返回布尔值。

（8）forEach

2，循环对象

2.1 代码展示案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div class="app">
        <!-- 遍历数组 -->
        <!-- <h2>人员列表(遍历数组)</h2>
        <ul>
            v-for of 或者in  都可遍历
            <li v-for="(k,index) of Persons" :key="index">
                {{k.name}}--{{k.age}}--{{index}}
            </li>
        </ul> -->
        <!-- 遍历对象 -->
        <h2>汽车信息（遍历对象）</h2>
        <ul>
            <li v-for="(value,k) in Cart" :key="k">
                {{k}}--{{value}}
            </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: ".app",
        data() {
            return {
                Persons: [
                    { id: 01, name: '张三', age: 18 },
                    { id: 02, name: '里三', age: 18 },
                    { id: 03, name: '马三', age: 18 },
                    { id: 04, name: '刘三', age: 18 },
                ],
                Cart: {
                    name: '奥迪A8',
                    price: "80万",
                    calor: '黑色'
                }
            }
        },
    })
</script>
</html>

3，key值原理

3.1 代码展示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for使用key</title>
</head>
<body>
  <div id="app">
    <!-- 不加key如果要插入f依次改变 -->
    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="add1">没有key</button>
    <!-- 加key如果要插入f使用diff算法高效,如果使用index做key一直变，所以item如果唯一可以使用item-->
    <ul>
        <li v-for="item in letters" :key="item">{{item}}</li>
    </ul>
    <button @click="add2">有key</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        letters:['a','b','c','d','e']
      },
      methods: {
        add1(){
          this.letters.splice(2,0,'f')
        },
        add2(){
          this.letters.splice(2,0,'f')
        }
      }
    })
  </script>
</body>
</html>

3.2 v-for加key与不加

不加key渲染时候会依次替换渲染，加了key会直接将其放在指定位置，加key提升效率。

3.3 拓展

（1）使用key可以提高效率，加key如果要插入f使用diff算法高效，如果使用index做key一直变，所以item如果唯一可以使用item。

（2）不加key如果要插入f依次替换。

一、什么是虚拟dom？

虚拟dom 其实就是一个普通的JavaScript对象，用来描叙试图上有哪些界面结构，并不生成界面，我们可以在生命周期【mounted阶段】打印this._vnode，如下：

它描叙了该阶段是div，有哪些子节点，哪些属性，它是采用一个js对象来描叙这些，但是它并不会显示在页面上。

（3）在vue中，每一个组件都有一个render函数，这个函数会生成一个虚拟dom，这就意味着每一个组件都对应一个虚拟dom树。

二、为什么需要虚拟dom？

这个主要是由vue结构所决定的，在vue中，渲染试图会调用render函数，不仅在创建视图的时候被调用，当组件所依赖的数据或者属性发生了改变的时候，也会调用render函数，如果是使用真实的dom，当创建，修改，删除，插入dom的话是非常消耗性能的，如下所示，当修改一个js对象远比操作真实的dom要有效率的多。

（4）

1. 虚拟DOM中key的作用：（面试题）

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2. 对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

2. 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue实现图书管理demo详解
这篇文章主要介绍了vue实现图书管理，分享了图书管理demo用的知识点，以及遇到问题的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
vue项目使用微信公众号支付总结及遇到的坑
这篇文章主要介绍了vue项目使用微信公众号支付总结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-10-10
Vue路由跳转的5种方式及扩展
这篇文章主要给大家介绍了关于Vue路由跳转的5种方式及扩展,在Vue中路由是一种用于导航和管理页面之间跳转的机制,Vue Router是Vue官方提供的路由管理器,需要的朋友可以参考下
2023-11-11
Vue如何实现数据的上移和下移
这篇文章主要介绍了Vue如何实现数据的上移和下移问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vue+Antv F2实现混合图表
这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue-router 中hash模式和history模式的区别
这篇文章主要介绍了Vue-router 中hash模式和history模式的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Vue 列表过滤与排序的实现
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下
2022-05-05
VUE对Storage的过期时间设置,及增删改查方式
这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
详解vue-cli多页面工程实践
本篇文章主要介绍了详解vue-cli多页面工程实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue中的表单输入绑定,双向绑定方式
这篇文章主要介绍了Vue中的表单输入绑定,双向绑定方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-03-03