首页 > 其他分享 >Vue面试题13:说一说key的作用

Vue面试题13:说一说key的作用

时间:2022-09-07 10:48:02浏览次数:64  
标签:面试题 Vue 13 更新 patch vue key 使用 节点

  • 思路分析:

    • 1.给出结论,key的作用是用于优化patch性能;
    • 2.key的必要性;
    • 3.实际使用方式;
    • 4.总结:可从源码层面描述一下vue如何判断两个节点是否相同;
  • 回答范例:

    • 1.key的作用主要是为了更高效的更新虚拟DOM;
    • 2.vue在patch过程中判断两个节点是否是相同节点是key是一个必要条件,渲染一组列表时,key往往是唯一标识,所以如果不定义key的话,vue只能认为比较的两个节点是同一个,哪怕它们实际上不是,这导致了频繁更新元素,使得整个patch过程比较低效,影响性能;
    • 3.实际使用中在渲染一组列表时key必须设置,而且必须是唯一标识,应该避免使用数组索引作为key,这可能导致一些隐蔽的bug(过程中对数组进行排序等);vue中在使用相同标签元素过渡切换时,也会使用key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果;
    • 4.从源码中可以知道,vue判断两个节点是否相同时主要判断两者的key和元素类型等(isSameVNodeType),因此如果不设置key,它的值就是undefined,则可能永远认为这是两个相同节点,只能去做更新操作,这造成了大量的dom更新操作,明显是不可取的;

案例:模拟以下操作

不使用key:增加3次额外的更新操作和1次E节点的创建和追加操作

使用key:

标签:面试题,Vue,13,更新,patch,vue,key,使用,节点
From: https://www.cnblogs.com/Mochenghualei/p/16664452.html

相关文章

  • vue前端项目组件实现自动注册并且全局可引用
     1、首先创建一个组件的目录,例如图中components2、创建一个js主文件和一个存放组件的目录如global3、在js中加入图中代码,实现自动识别组件功能4、在文件入口main.js......
  • vue实现表单验证功能
    https://www.yht7.com/news/156187vue实现表单验证功能 作者:佚名   来源:网络转载  时间:2021-08-27本篇主要讲述如何基于NUXT的validate方法实现表单的......
  • 【面试题】JS实现数组扁平化处理,妙不可言啊!
    JS实现数组扁平化处理点击打开视频讲解更加详细期望结果:将数组扁平化并去重最终得到一个升序且不重复的数组步骤:1、数组扁平化2、去重......
  • Vue移动端rem适配
    1.新建adaptive.js文件functionadaptive(){//在标准375px适配下,1rem=16px;varbaseFontSize=16varbaseWidth=375varset=function()......
  • Vue学习笔记
    Vue学习笔记书籍Vue.js实战 梁灏著开发工具HBuilderVisualCode扩展插件  在vscode中点击侧边栏中的扩展按钮,然后在出现的搜索栏中输入@installed即......
  • Vue sortable实现排序功能
     1.vue代码 <template><el-table@selection-change="handleSelectionChange"@sort-change="sortChange"v-loading="loading"id="TableColumnID"eleme......
  • 【源码学习】Vue源码的敲门砖(目录结构)
    声明本文是开始学习 Vue 源码的第一篇笔记,当前的版本是 2.6.14 。源码结构目录结构在 github 上下载了源码,是一个叫vue-dev 的文件夹,展开以后 一级目录结构 ......
  • 第 1 题:写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?
    <divid="app"><divv-for="iindataList">{{i}}</div></div>varvm=newVue({el:'#app',data:{dataList:[1,2,3,4,5]}})以上的例......
  • 阿里前端一面必会面试题(附答案)
    浏览器的主要组成部分⽤户界⾯包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗⼝显示的您请求的⻚⾯外,其他显示的各个部分都属于⽤户界⾯。浏览器引擎在⽤户......
  • CF1338D Nested Rubber Bands
    考虑答案在树上长什么样子。首先答案肯定是一个独立集,因为两两之间没有交。对于相邻两个圆,他一定是经过中间一个点来连接的,画个图容易发现中间的这个点连接的所有点都能......