如何理解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
//父


//子

祖父组件到孙组件