使用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. RabbitMQ Linux安装与启动服务

    本文转载自 https://blog.csdn.net/chengmin123456789/article/details/124710277 1.先下载 erlang-23.2.3-1.el7.x8 ...

  2. textfsm

    from concurrent.futures import ThreadPoolExecutor import netmiko import os from threading import Loc ...

  3. Linux 软件包 管理

    rpm.deb包管理操作 yum.apt/apt-get线上管理操作 查找软件包 $ yum search [name|info] $ apt-cache search [name|info] 安装软 ...

  4. my.ini

    [client] #客户端设置,即客户端默认的连接参数 # socket = /data/mysqldata/3306/mysql.sock #用于本地连接的socket套接字 # 默认连接端口 po ...

  5. Java8 Date Time API 简介

    1.Java8 Date Time API 简介 1.1.新旧 Date Time API 对比 包位置对比 1.Java8之前的日期.时间分布在java.util和java.sql的包中,此外用于格 ...

  6. boost.python编辑，以及c++api的python封装

    boost.python 编辑与踩坑 踩坑1.编辑的版本使用的vs版本不同的话,使用的命令不同 2.编辑第一条命令b2 toolset=msvc-11.0 --with-python报错:fatal ...

  7. pytorch的三种量化方式详解

    pytorch的三种量化方式详解 这篇博客详细介绍了pytorch官方教程提到的三种量化方式的原理,详细解释了三种量化方式的区别: 1. 静态量化 :torch.quantize_per_tensor ...

  8. es实现规格分组分析

    es里面的规格是重复的,页面显示则是不重复

  9. VUE 打包正则报错：Error parsing regular expression: Invalid regular expression:

    需要用new RegExp代替// 如: num = num.replace(/(?<=\d\.\d{2})./, '');换成 let reg = new RegExp("(?< ...

  10. vue3 门户网站搭建6-wangeditor

    门户网站的新闻.公告等文章,内容可配置,故引入 wagneditor 1.安装: npm i wangeditor 2.方便调用,抽成组件: <template> <div ref= ...