使用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. grafana+prometheus+tomcat 监控tomcat

    一.前提 1.tomcat作为java项目首选的部署容器.但是,在做测试,或者是在运维管理生产服务器的时候,想要监控tomcat的实时运行情况,却不是那么容易的 2.grafana(已安装和prome ...

  2. JMeter压力测试之环境搭建、脚本调试及报错解决方法（Linux版）

    一.环境部署 后续往服务器上传文件,本文中使用的是xftp,因其不是本文所要讲述的重点,这里不做详解. 第一步:安装所需要版本的JDK,本次使用的是JDK 1.8 下载地址:http://www.or ...

  3. HCIP-进阶实验06-多实例生成树安全部署

    HCIP-ICT进阶实验06-多实例生成树安全部署 1 实验需求 1.1 实验拓扑 1.2 实验环境说明 IP地址规划表: 设备 接口 IP 地址 备注 SW1 VLANIF10 192.168.10 ...

  4. python 小顶堆

    from heapq import *heap=[]for i in range(10,1,-1): heappush(heap,i)print(heap)print(heappop(heap))pr ...

  5. react fiber 的运行机制

    前言 1. 不同的元素类型决定不同的任务类型 2. react 的元素类型有 class component , function component ,Dom nodes, portal等等 要理解 ...

  6. 安装jdk,tomcat,oracle,PL/SQL的一些问题

    仅限于自己学习使用 新进公司,需要安装jdk1.6,tomcat6, oracle和pl/sql 先是jdk1.6,安装后配置环境变量,都在系统变量里,在cmd,分别打出 java -version, ...

  7. Pytorch实战学习（一）：用Pytorch实现线性回归

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili P5--用Pytorch实现线性回归 建立模型四大步骤 一.Prepare dataset mini-batch:x.y ...

  8. AcWing 791. 高精度加法C++数组实现

    高精度加法 a, b均为正整数 #include <iostream> using namespace std; const int N = 100010; int A[N], B[N], ...

  9. 使用layui实现分页展示数据库的数据

    layui是一个前端 UI 框架,内置了js代码,所以我们可以直接使用内置的分页 首先要用到layui的官网手册https://www.layui.com/ 1.进入手册页面的 "示例&qu ...

  10. 工程能力-远程JUNO-linux

    工程能力-远程JUNO-linux 1 ping 通linux 地址 2 ssh/scp 连接/传输数据 ssh root@10.188.72.42 scp -P 22 README.md root@ ...