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是没有问题的。

总结

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

您可能感兴趣的文章:

Vue2安装使用MonacoEditor方式(自定义语法,自定义高亮,自定义提示)
这篇文章主要介绍了Vue2安装使用MonacoEditor方式(自定义语法,自定义高亮,自定义提示)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue 仿QQ左滑删除组件功能
前几天朋友在做vue项目开发时，有人反映 IOS 上面的滑动点击有点问题，让我们来帮忙解决，于是我就重写了代码，下面把vue仿qq左滑删除组件功能分享到脚本之家平台，需要的朋友参考下吧
2018-03-03
vue vuex vue-rouert后台项目——权限路由（适合初学）
这篇文章主要介绍了vue vuex vue-rouert后台项目——权限路由，通过本文可以很清除的捋清楚vue+vuex+vue-router的关系，本版本非常简单，适合初学者,需要的朋友可以参考下
2017-12-12
vue实现两个区域滚动条同步滚动
这篇文章主要为大家详细介绍了vue实现两个区域滚动条同步滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
vue3中的抽离封装方法实现
vue3中的任何一个组合式api都可以单独抽离出去在另一个文件，最后只需要回归到setup()中即可，这篇文章主要介绍了vue3的抽离封装方法,需要的朋友可以参考下
2022-08-08
vue给数组中对象排序 sort函数的用法
这篇文章主要介绍了vue给数组中对象排序 sort函数的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue 的点击事件获取当前点击的元素方法
今天小编就为大家分享一篇vue 的点击事件获取当前点击的元素方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
记一次Vue.js混入mixin的使用(分权限管理页面)
这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
记VUE3+TS获取组件类型的方法踩坑及解决
这篇文章主要介绍了VUE3+TS获取组件类型的方法踩坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue进行下载与处理二进制流文件的方法详解
这篇文章主要为大家详细介绍了vue如何实现将后端返回的二进制流进行处理并实现下载,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12