zoukankan      html  css  js  c++  java
  • Vue 中 diff 算法中的key有什么作用?

    一、有相同父元素的子元素必须有独特的key,重复的 key 会造成渲染错误

    例如:

    let inputData = [1,2,3]
    <div>
        <input type="checkout" v-for="inputData">{{item}}</input>
    </div>

      

    解释:在没有key的情况下,默认所有的input 具有相同的key值,勾选前两个input后,inputData修改为 [0,1,2,3],  则会发现勾选的是 0 和 1,与之前的,1 和 2 不同,当出现这样的问题的时候,我们就会发现,key需要有唯一性

    二、用于强制替换元素 / 组件 而不是重复使用它

    <transtion>
        <span :key="text">{{text}}</span>
    </transtion>
    

      

    解释:1. 在没有key的情况下,transtion 下的span 在最大程度的重用,相当与key相同,如果 key 相同,span标签不会删除 ,只会更新text,则不会触发过渡

       2. 当有key的情况下,text发生改变时,<span>总是会被替换而不是修改,因此触发过渡

  • 相关阅读:
    Redis基础
    Windows 10 中 安装 RabbitMQ
    Nginx
    第二章-矩阵
    第一章-行列式
    第六章-微分方程
    第五章-多元函数
    第四章-定积分
    第三章-不定积分
    第二章-导数
  • 原文地址:https://www.cnblogs.com/gqx-html/p/13954464.html
Copyright © 2011-2022 走看看