vue的就地复用--- v-for与:key
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的更多相关文章
- Vue 循环 [Vue warn]: Avoid using non-primitive value as key
页面中不添加 :key 索引的时候,会不停的提示虚线,但不影响使用 后来加了一个索引,加成了:key= "content" 从后台取出来的contents是一个list,里面有多 ...
- Vue 就地复用策略注意事项
---template部分 div el-popover(ref="message", placement="top-start", title="标 ...
- 打造 Vue.js 可复用组件
Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...
- vue中 给router-view 组件的 绑定 key 的原因
不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...
- VUE 是个 M V VM框架
vue基本使用 new出来一个Vue的实例,传一堆配置参数,控制一片html VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM new Vue 返回 V ...
- Vue.js的复用组件开发流程
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...
- [Vue warn]: Avoid using non-primitive value as key
<el-select v-model="addform.province" placeholder="请选择省份" multiple> ...
- vue开发可复用组件
组件,是一个具有一定功能,且不同组件间功能相对独立的模块.高内聚.低耦合. 开发可复用性的组件应遵循以下原则: 1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名. 2.数据扁平 ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
随机推荐
- Shell同步数据到oracle数据库
某数据库有几张表更新,本地数据库增量更新数据,用脚本定时执行实现. 由于无blob/clob字段,使用sqlldr导入数据:查询目的数据库,以"|"分割导出所有数据,保存在./da ...
- CENTOS7开启SSH服务
CENTOS7开启SSH服务 CENTOS7开启SSH服务以后,XSHELL,WINSCP才能成功连接CENTOS7. 开启ssh服务需要root权限,先用root账户登陆. 安装SSH: yum i ...
- Enhancer | 增强子 专题
要做就做深做精! Everything needs good justification. The interpretation should be biologically and statisti ...
- HmacSHA256摘要算法
mac(Message Authentication Code,消息认证码算法)是含有密钥散列函数算法,兼容了MD和SHA算法的特性,并在此基础上加上了密钥. 甲乙双方进行数据交换可以采取如下流程完成 ...
- Gradle基础:11:使用Kotlin的Gradle(转)
Gradle基础及进阶(转) https://blog.csdn.net/liumiaocn/article/category/8369185 Gradle基础:1: 简介与安装 Gradle基础:2 ...
- flutter FloatingActionButton组件
import 'package:flutter/material.dart'; class FloatingActionButtonDemo extends StatelessWidget { @ov ...
- Dart匿名方法函数和闭包
/* 内置方法/函数: print(); 自定义方法: 自定义方法的基本格式: 返回类型 方法名称(参数1,参数2,...){ 方法体 return 返回值; } */ void printInfo( ...
- Cocoa Framework中GB2312与UTF16编码之间的相互转换
代码如下: NSString *orgStr = @"你好,世界!"; NSStringEncoding enc = CFStringConvertEncodingToNSStri ...
- linux系统执行.exe文件
首先要了解一下Wine: Wine (“Wine Is Not an Emulator” 的首字母缩写)是一个能够在多种 POSIX-compliant 操作系统(诸如 Linux,Mac OSX 及 ...
- ABAP DEMO 下拉框
效果展示: *&---------------------------------------------------------------------* *& Report YCX ...