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-Router进阶之滚动行为详解
本篇文章主要介绍了Vue-Router进阶之滚动行为详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue获取参数的几种方式总结
这篇文章主要介绍了vue获取参数的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
这篇文章主要介绍了Vue中登录验证成功后保存token,并每次请求携带并验证token操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
使用Vue-Router 2实现路由功能实例详解
vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下
2017-11-11
Nuxt不同环境如何区分的方法
在一般情况下，我们的项目肯定需要区分不同环境，那么Nuxt提供给我们这样的基本能力了么，下面我们就一起来了解一下
2021-05-05
Vue element实现权限管理业务流程详解
目前本人再使用vue-element-admin项目时都是通过直接删除一些用不上的路由来进行侧边栏的清除，但是其实有一个更加好的办法来对项目的侧边栏显示的内用进行管理，就是权限管理，其实也不知道这个方法好不好，原理上来说时跟直接删除该路由的方式时一样的
2022-08-08
vue路由切换之淡入淡出的简单实现
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
解决vue更新路由router-view复用组件内容不刷新的问题
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
vue+Element-ui实现分页效果
这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
vue项目中main.js的用法
src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧
2023-10-10