v-for遵循的是vue的就地复用原则。文本与数据是绑定的,所以当文本被重新渲染的时候,列表也会被重新渲染。

就地复用只适用于不依赖子组件状态或临时DOM状态的列表渲染输出。【比如表单输入值的列表渲染输出】。这种就地复用原则在一般的列表展示的场景中不会有问题。但是:如果列表元素存在于用户交互的场景【比如form表单或者重新排序等】中,就可能会报错,最好在v-for的同时设置key参数。

因为vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。而key指向的是列表中每个元素的唯一值,key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。使用 :key,vue会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

 <!-- 使用v-for更新已渲染过的元素列表 为防止v-for报错, 一定要v-bind绑定key key是唯一的,指向列表中每个元素的唯一值 -->
<div class="info url log" v-for="(item,index) in moreListData" :key="index">

 

对于v-for和:key的使用原理,还是不太理解,如果有大佬路过看到,欢迎赐教,待补充

vue的就地复用--- v-for与:key的更多相关文章

  1. Vue 循环 [Vue warn]: Avoid using non-primitive value as key

    页面中不添加  :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多 ...

  2. Vue 就地复用策略注意事项

    ---template部分 div el-popover(ref="message", placement="top-start", title="标 ...

  3. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  4. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...

  5. VUE 是个 M V VM框架

    vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...

  6. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  7. [Vue warn]: Avoid using non-primitive value as key

    <el-select v-model="addform.province" placeholder="请选择省份" multiple>        ...

  8. vue开发可复用组件

    组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合.   开发可复用性的组件应遵循以下原则:   1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...

  9. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

随机推荐

  1. 4 个用于执行高级数学计算的 JavaScript 库

    在使用JavaScript执行数学方面的任务时,往往要用到浮点运算,且需要精确到某位小数,这就容易造成错误,而且会相当费时.因此,如果你需要做一些高精度的数学计算的编程工作,比如财务或科学计算,那么你 ...

  2. 基因表达半衰期 | mRNA Half-Life

    做单细胞RNA-seq分析,自然就能想到我们测到的其实是一个概率学的东西,就像女士品茶里的酵母的泊松分布一样. 真实的细胞里,一切都是连续的,从DNA到mRNA到蛋白,是有一个时间间隔的,每一个pro ...

  3. nginx配置静态资源与动态访问分离【转】

    在前面的博客中<说说 NGINX 的配置及优化>的 2.5 小节里面,提到 location 模块是 nginx 中用的最多的,也是最重要的模块,负载均衡.反向代理.虚拟域名等都与它相关. ...

  4. Flutter -------- Http库 网络请求封装(HttpController)

    http库 再次封装的网络请求类 HttpController 1.添加依赖 dependencies: http: ^0.12.0 #latest version 2.导入库 import 'pac ...

  5. ubuntu18源码包安装openresty

    author: headsen chen date : 2019-07-30  15:42:24 #在ubuntu18.04 环境下,openresty的依赖库有:PCRE.OpenSSL.zlib, ...

  6. 绕过WAF、安全狗知识整理

    0x01 前言 目前市场上的WAF主要有以下几类 1. 以安全狗为代表的基于软件WAF 2. 百度加速乐.安全宝等部署在云端的WAF 3. 硬件WAF WAF的检测主要有三个阶段,我画了一张图进行说明 ...

  7. shell编程系列23--shell操作数据库实战之mysql命令参数详解

    shell编程系列23--shell操作数据库实战之mysql命令参数详解 mysql命令参数详解 -u 用户名 -p 用户密码 -h 服务器ip地址 -D 连接的数据库 -N 不输出列信息 -B 使 ...

  8. shell编程系列16--文本处理三剑客之awk模式匹配的两种方法

    shell编程系列16--文本处理三剑客之awk模式匹配的两种方法 awk的工作模式 第一种模式匹配:RegExp 第二种模式匹配:关系运算匹配 用法格式对照表 语法格式 含义 RegExp 按正则表 ...

  9. ISO/IEC 9899:2011 条款6.7.6——声明符

    6.7.6 声明符 语法 1.declarator: pointeropt    direct-declarator direct-declarator: identifier (    declar ...

  10. ES6深入浅出-6 ES 6 模块-2.babel webpack parcel

    https://babeljs.io/ 复制到命令行执行 提示一个警告.缺少package.json这个文件 npm init -t ls 然后看到了生成了package.json这个文件. 然后再去 ...