使用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. 076_Master Detail 与Lookup

  2. 电商项目maven框架搭建引入dubbo配置文件报错

    解决:dubbo配置文件报红叉的问题 构建dobbo-provider配置文件时,报红叉错误,本质即找不到对应的dubbo.xsd文件. 1.下载模板 模板下载地址:http://download.c ...

  3. Linux中启动Docker容器报错：Error response from daemon: driver failed programming external connectivity

    在启动Docker的容器时,会出现报错:Error response from daemon: driver failed programming external connectivity on e ...

  4. OS-lab6

    OS-lab6 管道 在lab5的时候我们实现了文件类设备的读写操作,而在fd.c中,我们定义了3种设备:文件类设备.管道.终端,其中终端已经被完成了,剩下的就是管道了. 管道是一种父子进程间通信的设 ...

  5. requests库获取指定关键词的图片，并保存到本地

    var code = "45f4267f-9476-44ca-ac68-6d32aad2d4e1" 源码地址:https://gitee.com/myrensheng/data_a ...

  6. API对象--Ingress（chrono《kubernetes入门实战课》笔记整理）

    [概念说明] Service 的功能和运行机制,主要由 kube-proxy 控制的四层负载均衡,即根据IP.PORT来做负载均衡.而很多应用都是在7层做均衡更为合理,比如根据主机名.URI.请求头. ...

  7. python之目录结构01

    本文档主要是自己学习巩固以及复习之用,主要写些自己的学习体会! 以下为一个简要的目录构: Foo/ |-- bin/ | |-- foo | |-- foo/ | |-- tests/ | | |-- ...

  8. php json_encode 斜杠 反斜杠 转义处理

    $data = str_replace("\\\\n", "\\n", \jsonEncode($data)); // \\n转为\n $data = str_ ...

  9. Impala 学习笔记

    VALUES Statement | 6.3.x | Cloudera Documentation SELECT now() as date_DES UNION ALL SELECT trunc(no ...

  10. OpenCv：边缘处理&Canny边缘检测

    卷积边缘: 一.在进行卷积的时候,对于原图像(1,1)的位置,左.上方没有足够的像素做卷积. 二.通常,在卷积之前,在原图增加边缘像素,比如(3*3的,增加一个像素) 三.增加像素值得处理方法,通常有 ...