Vue循环渲染&key的原理

v-for

  • 用于循环的数组里面的值可以是对象,也可以是普通元素
   <ul id="example-1">
       <!-- 循环结构-遍历数组  
    	item 是我们自己定义的一个名字  代表数组里面的每一项  
    	items对应的是 data中的数组-->
      <li v-for="item in items">
        {{ item.message }}
      </li> 
    
    </ul>
    <script>
     new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]}
    })
    </script>

当 v-if 与 v-for 一起使用时

  • v-for 具有比 v-if 更高的优先级。
  • 若for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for

渲染过程为:对arr每一项先做map循环判断v-if给出的条件,再做一遍for 循环渲染

这样引起的问题是:arr 数组新增一项数据时,会对每一项再做一遍v-if 循环,然后for 循环渲染

  <!--  循环结构-遍历对象
    		v 代表   对象的value
    		k  代表对象的 键 
    		i  代表索引	
    	---> 
         <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    
    <script>
     new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ],
        obj: {
            uname: 'zhangsan',
            age: 13,
            gender: 'female'
        }
      }
    })
    </script>

key 起到的作用

  • key来给每个节点做一个唯一标识
  • key的作用主要是为了高效的更新虚拟DOM
  • 解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值

key背后的原理

要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。

vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:

  1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。

  2. 同一层级的一组节点,他们可以通过唯一的id进行区分。

因此,当页面的数据发生变化时,Diff算法只会比较同一层级的节点:
1. 如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点,不会再比较这个节点以后的子节点了。
2. 如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。————问题就此产生了

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时 ,如果在中间插入元素,则在此位置之后的所有节点的属性全都要更新,效率太低。
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。所以我们需要使用key来给每个节点做一个唯一标识,确保它在特定索引下显示已被渲染过的每个元素,这样的话Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

热门文章

暂无图片
编程学习 ·

2020年6月份所有文章汇总

历史汇总:2020年5月份所有文章汇总 2020年4月份所有文章汇总 2020年3月份所有文章汇总 2020年2月份所有文章汇总 2020年1月份所有文章汇总 2019年度所有文章汇总 2018年度所有文章汇总2020年6月份原创文章:写简历没模板?别怕,这些开源项目帮你搞定! 推荐几款基于 Markdown…
暂无图片
编程学习 ·

后台开发核心技术(11):多线程

背景介绍 进程:以前,进程是最小的执行单位。进程是包含程序指令和相关资源的集合,每个进程和其他进程一起参与调度,竞争CPU、内存等资源。每次进程的切换,都存在着进程资源的保存和恢复动作,这称为上下文切换。 发现问题:比如一个简单的GUI程序,为了有更好的交互性,通…
暂无图片
编程学习 ·

Spring-@Order注解

一、@Order 注解@Order的作用是定义Spring容器加载Bean的顺序 @Retention(RetentionPolicy.RUNTIME) @Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD}) @Documented public @interface Order {/*** 默认最低优先级*/int value() default Ordered.LOWEST_PR…
暂无图片
编程学习 ·

qtdesigner-尝试连接数据库

参考教程:基于PyQt5的数据库可视化操作界面MainWindow:生成的一个类,下面有setupUi和retranslateUi两个方法。 接下来是登录操作。教程中用的是pymssql,我们用pyodbc,目测应该差不多。 import pyodbc cnxn = pyodbc.connect(DRIVER={SQL Server};SERVER=localhost;DATABASE…
暂无图片
编程学习 ·

综合练习

一、端午节的淘宝粽子交易 import pandas as pd import numpy as npdf1 = pd.read_csv(zongzi.csv) df1.head()标题价格付款人数店铺发货地址0五芳斋粽子礼盒 心悦+18只装咸鸭蛋组合端午节礼品团购嘉兴肉粽子1296人付款五芳斋官方旗舰店浙江 嘉兴1北京稻香村端午粽子手工豆沙粽…
暂无图片
编程学习 ·

NEAR的机会

(采摘橄榄,梵高)如今,加密圈都在为DeFi疯狂,在整体市值不升反降的这些日子里,加密圈的情绪一直高涨。这是因为Compound效应带来的结果。 虽然公链关注度暂时不如之前,但这一赛道依然是加密领域最重要的赛道。在ETH2.0没有充分证明和虹吸一切之前,一切都存在着概率和可能…
暂无图片
编程学习 ·

亚马逊ERP系统独立部署OEM定制无限开账号

马逊无货源模式,和传统无货源模式操作一样!需要咱们开店利用软件去采集商品,上传到咱们店铺,有订单了去上家拍下,发到深圳的中转仓,进行商品检测二次包装,发往国外!赚取汇率差! 要做亚马逊无货源模式,那么亚马逊ERP也是必须用的!市场erp已经出现很多,但是真正做技术…
暂无图片
编程学习 ·

【项目总结】第三方OA对接、项目从零入手

前言近半年在平台项目的接触过程中,发现底层源码的能力很重要,有助于帮助我们理解项目代码,整理思路。代码思维能力也很重要。 项目经历 一、开发内容 第三方对接 华为云WeLink对接 2019-12 ~ 2020-04 企业微信小程序对接 2020-03 ~ 2020-05 好视通视频会议对接 2020-0…
暂无图片
编程学习 ·

从mixin机制理解Flutter App启动

文章目录1-mixin机制1.1-前言1.2-mixin特性2-runApp启动2.1-binding初始化2.2-绑定根节点2.3-绘制热身帧总结 1-mixin机制 1.1-前言转载注明出处:https://juejin.im/post/5efbf499e51d4534b979050c  mixin机制并非dart独创,在其他前端语言中也有很广泛应用。但对于一个刚开…
暂无图片
编程学习 ·

Docker的帮助和镜像命令

帮助命令 docker version 查看docker版本 docker info 显示全系统信息 docker --help 显示docker相关的所有命令 镜像命令 列表镜像 docker images 列表本机上的镜像REPOSITORY --表示镜像的仓库源 TAG --表示镜像的标签 IMAGE ID --镜像的ID CREATED --镜像的创建时间 SIZE --…
暂无图片
编程学习 ·

nginx从下载到部署全过程(Linux)

导航NGINX官网下载NGINX安装环境解压,编译,安装启动及测试NGINX官网以下列举了三个网址,分别是:NGINX官网,下载网址及官方文档。官方网站:http://nginx.org/下载网址:http://nginx.org/en/download.html官方文档:http://nginx.org/en/docs/ 下载NGINX 通过官方下载地址…
暂无图片
编程学习 ·

C语言--输出这个字符串中最长的连续数字串

输出这个字符串中最长的连续数字串 例如: 输入:abc123hjuytfsa56789jkl 输出:56789 #include<stdio.h> #include<string.h> #include<stdlib.h> //输出这个字符串中最长的连续数字串 void func(char* str, int size) {char* tmp = (char*)malloc(size + 1…
暂无图片
编程学习 ·

创新实践记录一

使用UGUI制作开始界面 一、UGUI概述 1.1常用组件 UGUI是从Unity4.6开始被集成到Unity编译器中的官方UI系统,具有灵活,快速和可视化兼容性好的特点。以下为常用的UGUI控件:1.2创建UGUI控件 创建UI控件时,如果没有Canvas和EventSystem系统会自动创建。Canvas画布,是所有UI控…
暂无图片
编程学习 ·

通讯录管理系统一般包括通讯录结点信息的插入、查询、删除、更新以及通信录信息的输出等功能。而通讯录的信息一般包括编号、姓名、性别、电话以及地址等项。本题主要考查用链式结构来实现通讯录管理系统(链表)

通讯录管理 题目要求: 通讯录管理系统一般包括通讯录结点信息的插入、查询、删除、更新以及通信录信息的输出等功能。而通讯录的信息一般包括编号、姓名、性别、电话以及地址等项。本题主要考查用链式结构来实现通讯录管理系统(链表的操作)。 需求分析: 将通讯录设置为6个模…
暂无图片
编程学习 ·

面试之一句话简述volatile

volatile是轻量级的synchronized,他保证了可见性,底层的关键主要是LOCK指令,该指令有两个作用,一是强制把处理器缓存写回内存,二是一旦处理器缓存写回了内存,就让其他处理器上相同的缓存失效,这样的话,其他处理器想要修改某个被写回内存的变量,就得重新去内存取值,而…
暂无图片
编程学习 ·

布局优化 include viewstub merge 及源码解析

我只是一个无情的搬运工 布局是我们再开发应用时必不可少的工作,通常情况下,布局并不会成为工作中的难点。但是,当你的应用变得越来越富咱,页面越来越多时,布局上的优化工作就成了性能优化的第一步。因为布局上的优化并不像其他优化方式那么复杂,通过Android Sdk提供的Hi…
暂无图片
编程学习 ·

C++的默认构造函数与构造函数

构造函数:C++用于构建类的新对象时需要调用的函数。 默认构造函数:未提供显式初始值时,用来创建对象的构造函数。 class testClass { public:testClass(); /* 默认构造函数 */testClass(int a, char b); /* 构造函数 */testClass(int a=10,char b…
暂无图片
编程学习 ·

2020-07-02

网页 你知道什么是网页吗?或者你知道该用什么样的话来形容它吗? 我能想到的话是: 网页是由图片、文字、声音、视频、链接这些个东东组成的扩展名叫html的文件 那啥子叫扩展名呢? 扩展名就是指文件的类型 规定文件应该用哪个软件打开 晓得不啦?那html是个啥呢? html是一种…