使用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. 068_Apex&Page中的ReadOnly 使用方式

    一.page页面遇到需要检索大量数据的处理方式需要时会用Readonly 通常,对单个Visualforce页面请求的查询可能无法检索超过50,000行. 在Read only模式下,此限制将放宽允许 ...

  2. java学习：八大基本类型变量

    1.类 在java中用class来定义一个类,类是java程序的基本单位 类描述的是具有共性的一类事物,所以我们又可以把类称作为模板技术   如何理解共性: 具有相同的属性-->java变量 具 ...

  3. FSL--fsleyes建立软连接方法

    在使用conda下载完fsleyes后,还是显示not found ,无法使用怎么办? 1.首先在/anaconda/envs/fslpython/bin/  中搜索 fsleyes  确定已经下载好 ...

  4. 10，java双向链表基础代码复现

    双向链表总体来说和单链表差别不大,最大的区别就是node结构中多了一个pre指针(变量)指向前一个节点,因为有了之前的单链表基础,双向链表的复现问题少了很多,基本可以不参考老师的代码自主写下来. 1. ...

  5. Jmeter学习：字符串，加密相关函数，groovy脚本函数

    一.__digest 功能介绍: 将输入进行 MD5 加密 ${__MD5(参数 1,参数 2)} 参数 1:加密算法,必选,MD2 MD5 SHA-1 SHA-224 SHA-256 SHA-384 ...

  6. 剑指 Offer 链表

    06. 从尾到头打印链表 class Solution { public: //两个指针一起走 一次翻转一个方向 最后head.next =null ListNode* reverse1(ListNo ...

  7. uniapp支付返回form

    在项目中,支付功能是一个常见的功能,调用支付宝时,后段给我们的是一个form的富文本内容 这时需要把form到页面渲染,方法如下: uni.request({ //仅为示例,并非真实接口地址. url ...

  8. UITextView布局不是从0开始的问题

    ///去掉padding UITextView.textContainer.lineFragmentPadding = 0; UITextView.textContainerInset = UIEdg ...

  9. ASR6601：国产化lora SOC芯片兼容SX1262/SX1268

    ASR6601为目前首颗国产化支持LoRaWAN低功耗广域网无线通信SoC芯片.ASR6601在单芯片上集成了通用微控制器和射频单元(SX1262),包括射频收发器,调制解调器和48 MHz 主频.A ...

  10. 使用JFinal实现简单的学生管理系统

    JFinal简介 Controller是JFinal核按心类美之一,该类作为MVC模式中的控制器.基于JFinal的Web应用的控制器需要继承该类.Controller是定义Action方法的地点,是 ...