使用key维护列表的状态

当列表的数据变化时，默认情况下，vue尽可能的服用已存在的DOM元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致由状态的列表无法被正确更新。

key的使用注意事项：

1、key的值必须是string、number

2、key的值必须具有唯一性

3、建议把数据项的id属性的值作为key的值

4、使用index的值作为key的值没有意义

5、建议使用v-for指令的时候一定要指定key的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div>

        <input type="text" v-model="username">

        <button @click="addUserName">添加</button>

    </div>

    <ul>

        <li v-for="user in userlist" :key="user.id">

            <input type="checkbox">

            姓名：{{ user.name}}

        </li>

    </ul>

</div>

<script>

    var vm = new Vue({

        el:"#app",

        data:{

            userlist:[{id:1,name:'sz'},{id:2,name:'sd'},{id:3,name:'se'}],

            username:'',

            nextId: 4,

        },

        methods:{

            addUserName: function (){

                if(!this.username) return alert('名称不能为空')

                this.userlist.push({

                    id: this.nextId,

                    name: this.username

                }),

                    this.nextId ++

            }

        }

    })

</script>

</body>

</html>

参考：https://www.zhihu.com/question/61064119

vue中key的更多相关文章

  1. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  2. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  3. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  4. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  5. 关于Vue中:key="index"的console警告

    在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...

  6. 图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...

  7. vue中使用key管理可复用的元素

    1.概述 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染. key解决上述问题之外的情景:这两个元素是完全独立的,不要复用它们. 2.示例 <!DOCTYPE html&g ...

  8. Vue中使用key的作用

    key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度 key具有唯一性 vue中循环需加 :key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组 ...

  9. Vue中的key到底有什么用？

    key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确.更快速 diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行 ...

  10. vue中：key 和react 中key={} 的作用，以及ref的特性？

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

随机推荐

  1. python备份文件(简易)

    步骤逻辑 要备份的文件夹:source = ["/opt/containerd"] 保存备份信息的文件夹 targz_dir = "/home/backup" ...

  2. （app笔记）Memory Fill内存填充

    Memory Fill 是实现app内存填充工具(运行内存,物理内存,网络空间内存) Used:已用内存 filled:未回收内存 Free:自由内存 1.Ram(Total Ram):手机运行内存 ...

  3. 【windows】bat脚本、批处理文件

    ::当前盘符 @echo current pan : %~d0 ::当前路径 @echo current path : %cd%\ ::当前bat文件路径 @echo the bat's path : ...

  4. Web学习篇—Http协议

    Http协议简介 h3 { background: rgba(0, 154, 205, 1); color: rgba(255, 255, 255, 1); border-radius: 6px; f ...

  5. TreeView控件的基本用法

    https://www.cnblogs.com/net064/p/5534697.html https://www.bbsmax.com/A/RnJW6VGvzq/

  6. .NET CORE-通过内置IOC容器IServiceCollection进行服务注册

    第一种方式: 在Startup中的ConfigureServices方法中注册服务: services.AddTransient<ITestServiceA, TestServiceA>( ...

  7. django操作WEB涉及的几个命令

    1)创建项目bysms django-admin startproject bysms 2)创建应用sales (在bysms目录下执行) python manage.py startapp sale ...

  8. docker 搭建minio

    minio为开源的高可用分部署对象存储服务组件,已经提供了分布式部署的解决方案,实现高可靠.高可用的资源存储,MinIO以极简主义为指导进行设计,追求极致的维护精简性和卓越的读写性能表现. -dock ...

  9. java NIO原理和代码实践

    一,先说java IO 1,线程阻塞:当线程调用write()或read()时,线程会被阻塞,直到有一些数据可用于读取或数据被完全写入. 2,面向流: 我们需要从流中读取一个或多个字节.它使用流来在数 ...

  10. ChatGPT检测器开发者在知乎的文章，记录一下

    我们开发了第一款中英双语ChatGPT检测器,还有... - 蝈蝈的文章 - 知乎 https://zhuanlan.zhihu.com/p/598395917