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>总是会被替换而不是修改,因此触发过渡

  • 相关阅读:
    P5304旅行者(比bk201还要流氓的解法)
    考试T1护花
    考试T2修剪草坪
    考试T3麻将
    账号密码
    T7
    P2885 [USACO07NOV]电话线Telephone Wire
    P4965 薇尔莉特的打字机
    P1505 [国家集训队]旅游
    T2
  • 原文地址:https://www.cnblogs.com/gqx-html/p/13954464.html
Copyright © 2011-2022 走看看