如何理解vue中的key

作用

  • v-for遍历时， 用id作为key， 唯一标识节点加速虚拟DOM的渲染

    1
    2
    3
    4
    //有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。
    <ul>
      <li v-for="item in items" :key="item.id">...</li>
    </ul>

  • 强制替换节点或者组件（component），而不重复使用它。

    1
    2
    3
    4
    <transition>
      <span :key="abc">{{ abc }}</span>
    </transition>
    //abc发生变化时，<span>会被替换，而不会patched(修复)，因此transition会被触发。

原理

加速虚拟DOM的渲染
  • 如果不用key，Vue会用一种算法（就地更新策略）：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch(修复)或者reuse（重用）。
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。
  • 如果使用key, 它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
强制替换节点或者组件
  • 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。
  • 完整地触发组件的生命周期钩子
  • 触发过渡

vue中组件数据传递

父组件到子组件

  • props

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //父
     <users :users="katty"></users>

    //子
    export default {
      props:{
        users:{           //这个就是父组件中子标签自定义名字
          type:String,
          required:true
        }
      }
    }

  • $parent / $children / ref 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //父
    <compent ref="compent1"></compent>
    export default {
       data: function(){
          return {

          }
       },
       methods: {
         test: function(){

         }
       },
       mounted(){
         this.$refs.compent1.name //获取子组件compent的data
       }
    }

    //子
    export default {
      data: function(){
        return {
          name: ''
        }
      }
      created(){
        this.$parent.test(); //获取父组件methods
      }
    }

子组件到父组件

  • 通过事件形式$emit
    1
    2
    3
    4
    //父


    //子

祖父组件到孙组件