Vue中key原理和作用
2021/10/28 23:17:28
本文主要是介绍Vue中key原理和作用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
key的原理和作用
key 作用 :用来作为数据的唯一标识
key原理:vue中的key其实存在着一种diff算法,也正是这个diff算法,使得页面在被渲染时更加高效,什么是diff算法,其实是一种虚拟DOM算法,就是将新的虚拟DOM与重新渲染的虚拟DOM进行一个对比 vue中的key属性就是按照这个key的值来一一对比。如果匹配到一样的Node节点会便不会重新使用新的虚拟DOM进行渲染,而是采用原有虚拟DOM结构。
情景一
在使用v-for时不使用key属性(其实vue会将其默认将索引作为key的唯一标识)
下面通过一个小例子来说一下不加key的弊端或者是使用索引作为key的值的弊端
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>key的作用以及原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(list,index) in userinfo">{{list.username +"-"+ list.age}}</li> </ul> <button @click="add">点击添加信息</button> </div> <script type="text/javascript"> const vm = new Vue({ el: "#app", data: { msg:{username:"枫叶在飘呀",age:23}, userinfo: [{ username: "张三", age: 17 }, { username: "李四", age: 17 }, { username: "王五", age: 17 }] }, methods:{ add() //用来点击向userinfo头部添加一条数据 { this.userinfo.unshift(this.msg) } } }) </script> </body> </html>
以上便是不是用key属性或者使用索引会出现的情况
情景二
使用数组中的唯一标识还会出现那样的情况吗?
我们可以给上面的数据加一个id作为唯一标识
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>key的作用以及原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(list,index) in userinfo" :key="list.id">{{list.username +"-"+ list.age}}<input type="text" /></li> </ul> <button @click="add">点击添加信息</button> </div> <script type="text/javascript"> const vm = new Vue({ el: "#app", data: { msg:{username:"枫叶在飘呀",age:23}, userinfo: [{ id:1 username: "张三", age: 17 }, { id:2 username: "李四", age: 17 }, { id:3 username: "王五", age: 17 }] }, methods:{ add() { this.userinfo.unshift(this.msg) } } }) </script> </body> </html>
总结一下使用key的优点
1.可以确定数据的唯一标识,可以通过唯一标识找到整条数据
2.可以减少DOM结构重新渲染,提高性能,因为它会有一个虚拟DOM对比算法,未发生变化的值,使用原有的虚拟DOM结构,如果有被重新渲染后的数据才会被重新渲染。
~相信你也体会到key的强大作用了吧~
这篇关于Vue中key原理和作用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程