关于vuejs循环渲染key的说明

 

前言

关于vue.js的循环渲染大多数知道最好加上key，节省渲染性能。这里通过demo来直观地了解下加key的好处。

 

实现

注册一个最简单的vue组件，用来显示list的每项数据

// 声明一个Item子组件
const Item = {
  name: 'Item',
  props: ['message', 'color'],
  render (h) {
    console.log('执行了Item的render')
    return h('div', {
      style: {
        color: this.color
      }
    }, [this.message])
  }
}

通过观察是否执行了Item组件的render函数来判断是否重新渲染了Item组件

 

数据是一个数组

list: [{ id: 'a', color: '#f00', message: '红色' }, { id: 'b', color: '#0f0', message: '绿色' }]

 

循环渲染数据

<div @click="reverse" class="list">
  <Item v-for="(item, index) in list" : key="index" : message="item.message" : color="item.color" />
</div>

methods: {
  reverse() {
    this.list.reverse()
  }
}

 当点击元素时，数据顺序颠倒，这时页面渲染的元素顺序也会相应颠倒。只是更新顺序，并没有增加和减少元素，理想效果是浏览器按照数据颠倒顺序就行，这时候不得不考虑vue的key问题啦～

当key为index，执行了render函数，可见Item组件重新渲染了。

<div @click="reverse" class="list">
  <Item v-for="(item, index) in list" :key="item.id" :message="item.message" :color="item.color" />
</div>

当key为id，没有执行render函数，可见重复利用了Item组件

 

 

结论

:key="item.id" 只是移动了节点，并没有触发 Item 组件的重新渲染，这样实现了节点的复用。