iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue 列表渲染 key的原理和作用详解
  • 653
分享到

Vue 列表渲染 key的原理和作用详解

2024-04-02 19:04:59 653人浏览 泡泡鱼
摘要

目录列表渲染 key 的原理和作用key的原理分析key的作用总结列表渲染 key 的原理和作用 key就是为该节点做身份标识,如果对key绑定index的值,那么很容易出现问题:

列表渲染 key 的原理和作用

key就是为该节点做身份标识,如果对key绑定index的值,那么很容易出现问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新——页面效果没有问题,但是效率有2问题

2.如果解构中还包含输入类的DOM,会产生错误DOM更新——界面有问题

问题案例分析:

点击按钮,在列表的前面添加一个对象


    <div id="root">
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p, index) in persons" :key="index">
                {{p.name}}---{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:"001", name:"张三", age:15},
                    {id:"002", name:"李四", age:16},
                    {id:"003", name:"王五", age:17}
                ]
            },
            methods: {
                add(){
                    const p = {id:"004", name:"老刘", age:20}
                    this.persons.unshift(p)
                }
            },
        })

展现出来是这样的一个效果

当我们将姓名填入输入框中

在这里插入图片描述

然后点击按钮,观察出现的问题

在这里插入图片描述

我们会发现,表单的最上方出现了老刘,但是列表中的内容和输入框的内容并没有相等

解决方法:我们将:key="index"改为:key="id"

 

key的原理分析

在这里插入图片描述

初始数据

拿到初始数据根据初始数据生成 虚拟DOM将虚拟DOM转为真实的DOM

新数据

拿到新的数据(包含老刘)根据数据生成 虚拟DOM虚拟DOM与初始数据的虚拟DOM进行对比算法(li中的文本信息出现了差异,但是input是相同的,虚拟的DOM是没有数据的,在页面输入的内容存储在真实的DOM中)文本信息——新数据替代了初始数据,input内容被保留

key的作用

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: Vue 列表渲染 key的原理和作用详解

本文链接: https://www.lsjlt.com/news/155405.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue 列表渲染 key的原理和作用详解
    目录列表渲染 key 的原理和作用key的原理分析key的作用总结列表渲染 key 的原理和作用 key就是为该节点做身份标识,如果对key绑定index的值,那么很容易出现问题: ...
    99+
    2024-04-02
  • Vue.js条件渲染和列表渲染以及Vue中key值的内部原理
    目录条件渲染v-ifv-show列表渲染v-for指令面试题:key的内部原理条件渲染 v-if 写法:(1).v-if="表达式"(2).v-else-if=&...
    99+
    2023-05-15
    Vue.js条件渲染和列表渲染 Vue key值内部原理 Vue条件渲染 Vue列表渲染
  • 详解Vue的列表渲染
    目录1. v-for:遍历数组内容(常用)2. v-for:遍历对象属性(常用)3.遍历字符串(不常用)4.遍历指定次数(不常用)5.key 的作用和原理1.虚拟DOM中key的作用...
    99+
    2024-04-02
  • Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么
    这篇文章主要介绍“Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么”,在日常操作中,相信很多人在Vue.js条件渲染、列表渲染及Vue中key值的内部原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希...
    99+
    2023-07-06
  • Vue的列表之渲染,排序,过滤详解
    目录1. 列表(渲染、排序、过滤)1.1 条件渲染指令1.1.1 v-show1.1.2 v-if1.1.3 v-if和v-show的小案例1.1.4 v-for(key的原理)1....
    99+
    2024-04-02
  • Vue中条件渲染和列表渲染的示例分析
    这篇文章将为大家详细讲解有关Vue中条件渲染和列表渲染的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活...
    99+
    2023-06-25
  • React 中的列表渲染要加 key的原因分析
    目录为什么需要 key?列表渲染不提供 key 会怎样?列表渲染的 key 用数组索引会怎样?应该用什么值作为 key?结尾在 React 中我们经常需要渲染列表,比如展示好友列表。...
    99+
    2024-04-02
  • Vue中key的作用及原理详解
    目录1. 先说结论2. key的作用2.1 举一个例子2.2 修改一下上述示例2.3 再修改一下示例3. key的实现原理1. key为index的情况。2. key为id的情况。总...
    99+
    2024-04-02
  • Vue中列表渲染指令v-for的基本用法详解
    目录一、原理概述二、基本用法(1)v-for循环普通数组(2)v-for循环对象(3)v-for循环对象数组(4)v-for迭代整数 一、原理概述 v-for指令时在模板编...
    99+
    2023-05-17
    Vue列表渲染指令v-for使用 Vue列表渲染指令v-for Vue列表渲染v-for Vue v-for
  • Vue的列表渲染指令v-for怎么使用
    这篇文章主要介绍“Vue的列表渲染指令v-for怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue的列表渲染指令v-for怎么使用”文章能帮助大家解决问题。Vue的列表渲染1.1.v-fo...
    99+
    2023-07-04
  • react要用专门的组件来渲染列表的原因是什么
    这篇文章主要介绍“react要用专门的组件来渲染列表的原因是什么”,在日常操作中,相信很多人在react要用专门的组件来渲染列表的原因是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2024-04-02
  • 浅谈Vue3中key的作用和工作原理
    这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes; 如果不使...
    99+
    2024-04-02
  • Vue3中key的作用和工作原理是什么
    这篇文章主要介绍“Vue3中key的作用和工作原理是什么”,在日常操作中,相信很多人在Vue3中key的作用和工作原理是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中key的作用和工作原理是什么...
    99+
    2023-06-20
  • 前端渲染CSR和SSR的结合使用思路详解
    目录1. 思路2. 以将文件设置成CSR为例3. 哪些文件使用CSR小聊: 我们都知道,以往的CSR(客户端浏览器渲染)多多少少会有一点点 SEO 问题,不只是 SPA(单页面应用程...
    99+
    2022-12-22
    前端渲染CSR和SSR使用 CSR和SSR使用
  • Vue开发实例探究key的作用详解
    目录前言为什么不推荐使用 index 作为 key?如果 key 重复会导致什么样的错误?使用 key 和不使用 key 有什么差别?key的实际应用上述结论在Vue3中也成立吗?总...
    99+
    2023-01-10
    Vue key作用 Vue key
  • Cookie的工作原理和应用详解
    目录1. Cookie 原理1.1 Cookie 背景信息1.2 Cookie 工作原理1.3 Cookie 创建、获取、修改1.4 Cookie 共享范围1.5 Cookie 生命...
    99+
    2024-04-02
  • Vue中slot插槽作用与原理详解
    目录1、作用2、插槽内心2.1、默认插槽2.2、具名插槽(命名插槽)2.3、作用域插槽实现原理1、作用 父组件向子组件传递内容扩展、复用、定制组件 2、插槽内心 2.1、默认插槽 把...
    99+
    2024-04-02
  • 服务器端渲染在 Vue Nuxt.js 中的作用:提高性能和用户体验
    服务器端渲染(SSR)是一种技术,可以在服务器上预先渲染 Vue.js 应用程序。通过这种方式,浏览器不仅会收到应用程序的静态 HTML 输出,还会收到已经转换为 DOM 树的应用程序状态。 SSR 的优点: 更快的初始加载时间:由于...
    99+
    2024-02-19
    Vue Nuxt.js 服务器端渲染 性能 用户体验
  • Python中列表的常用操作详解
    目录打印出列表的数据一、列表的循环遍历1、for循环遍历2、while循环遍历二、列表的添加操作1、append()2、extend()3、insert()三、列表的修改操作四、列表...
    99+
    2024-04-02
  • Vue深入理解之v-for中key的真正作用
    目录前言第一种: key 采用 index第二种:key 采用唯一 ID总结前言 大家应该都知道, v-for 中 key 最常用的绑定方式有两种: 第一种用 index第二种用 唯...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作