首页 > 其他分享 >Vue中key的作用

Vue中key的作用

时间:2023-08-21 16:37:21浏览次数:39  
标签:真实 Vue DOM index 虚拟 key 作用

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,DOM,index,虚拟,key,作用
From: https://www.cnblogs.com/studyLevi/p/17646373.html

相关文章

  • OpenTiny Vue 3.10.0 版本发布:组件 Demo 支持 Composition 写法,新增4个新组件
    我们非常高兴地宣布,2023年8月14日,OpenTinyVue发布了v3.10.0 ......
  • Vue3 toRef响应式失效问题排查
    父组件conststuRecordInfo=ref<any>({stuNum:11111})//接口请求返回stuRecordInfo.value.stuNum=22222<StuRecord:info="stuRecordInfo":pictureInfo="pictureInfo"/>子组件constinfo=toRef(props,'info')consts......
  • vue——debounce防抖函数无效
    参考:vue记录-vue中使用lodash_.debounce防抖不生效原因,解决方案https://blog.csdn.net/Delete_89x/article/details/122000444 问题代码:<el-inputv-model="slotProps.form.condition"placeholder="请输入"@input="inputChange"></el-......
  • vue中export default data()外面的数据如何通过$t获取动态值
    如果将数据放到外面的`const`中,而不是在Vue组件的`data`选项中,那么无法直接通过`$t`方法来获取翻译文件的值。因为`$t`方法是Vue-i18n插件提供的实例方法,需要在Vue组件中使用。如果你想在外部使用`$t`方法来获取翻译文件的值,可以将Vue-i18n的实例导出,并在外部文件中引入该实例来......
  • 在springboot项目中部署vue打包的dist以及刷新遇到404的解决方法
    一、在springboot项目中部署dist新建一个springboot项目,并将dist复制到resources目录下面,同时在application.yml添加配置即可,操作结果如下图所示: 添加的配置代码如下:spring:web:resources:static-locations:"classpath:/dist"二、部署好之后刷新遇到404......
  • 解决vueH5微信公众号扫一扫调用失败问题
    所使用的是importwxfrom'weixin-js-sdk'首先保证签名,域名配置等开发配置没有问题在开发工具当中显示没有问题一到真机测试就不行往下看      特别注意所需关键信息存在本地缓存中   ......
  • Vue 中请求同步执行解决方案
    有很多小伙伴在使用Vue的时候都会遇到一种情况,form表单修改回显时,某个下拉框里的内容回显乱码,这是因为Vue是的请求方法是异步请求:简单来说,form表单内容先获取了出来,而项目阶段的下拉框随后才获取出来//表单<el-col:span="12"> <el-form-item:label="$t('项目阶段')"prop=......
  • Web 国际化:新增越南语语系(vue i18n)
     前提:1.在src/locales文件夹中,新增vi.json文件背景:1.vue步骤:1.在main.js中,importVueI18nfrom'vue-i18n'Vue.use(VueI18n)consti18n=newVueI18n({locale:localStorage.getItem('lang')||'zh',messages:{ .........
  • Vue的组件data为什么必须是一个函数?
    vue中的data必须是函数是为了保证组件的独立性和可复用性。实例是通过构造函数来创建的,每个构造函数可以new多个实例,每个实例都会继承原型上的方法和属性,在vue中,一个vue组件就是一个vue实例,当一个组件被复用多次,就会创建多个实例。如果data是对象,那么被多次复用的这个组件,在某......
  • Vue Router
    什么是路由路由就是URL地址,地址不同,则显示的页面内容不同,路由分为前端路由和后端路由,Vue属于前端框架,因此我们讲解的路由也是前端路由。Vue是单页面应用程序,通过hash(#)来实现不同页面之间的切换。什么是单页面应用程序?通俗地讲就是不需要刷新页面,所有组件都在一个页面上的应用......