(自用面试题)Vue中key的作用是什么?

156 阅读1分钟

Vue中key的作用主要有两种情况:

  • 第一种情况是v-if中使用key。由于Vue尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染,因此当使用v-if来实现元素切换的时候,如果切换前后含有相同类型的元素,那么这个元素就会被复用。这导致了一个问题,如果是相同的input元素,那么切换前后用户的输入不会被清除掉,这样是不符合实际需求的,我们可以通过使用key来唯一的标识一个元素,这使得使用key的元素不会被复用。这种情况下key的作用是用来标识一个独立的元素
  • 第二种情况是v-for中使用key。用v-for更新已渲染过的元素列表时,它默认使用“就地复用”的策略。如果数据项的顺序发生了改变,Vue不会移动DOM元素来匹配数据项的顺序,而是简单复用此处的每个元素。为了提高diff算法效率,我们可以通过为每个列表项提供一个key值,使得Vue跟踪元素的身份,从而高效的实现复用。这种情况下key的作用是用来高效地更新渲染虚拟DOM

拓展:
key是给每一个vnode的唯一id;也是diff算法的一种优化策略,可以根据key,更准确、更快地找到对应的vnode节点。