vue.js - vue的slot中的子组件每次都会被update，频繁update导致性能低下，如何避免？

Question

如这个样例(请点击后查看Console变化)：
https://codepen.io/hzsrc/pen/gbYxOry

只要组件中任何状态发生变化，vue的slot中的子组件每次都会被update，频繁update导致性能低下。

一些大组件（比如多行多列的表格），里面有上千个单元格子组件，每次只要修改表格的任何一个属性，都会导致整个表几千个子组件全部update，造成严重的性能问题。

这属于bug吗，有没有办法避免不必要的update吗？

Answer 1

vue2里，父级render，插槽内容也会强制render
和我以前的问题是一样的https://segmentfault.com/q/1010000039280732

要解决的话就是不用插槽，改为传入render函数

Answer 2

如果是vue3

可以使用 v-memo 指令来缓存组件的渲染结果，只有当 row.checked 发生变化时，相关的 cell 组件才会重新渲染

<template>
  <div>
    <section>
      <div v-for="row in rows" :key="row.pkey" v-memo="[row.checked]">
        <button @click="row.checked=!row.checked">Change checked, one slot updated:</button>
        <cell>
          <template #default><span>{{row.checked}}</span></template>
        </cell>
      </div>
    </section>
    <hr>
    <section>
      <button @click="num++">Change num, 10 slot updated:</button>
      {{num}}  <span style="color:red">Why this causes 10 slots updated? The slots even not depend on this `num` value!</span>
    </section>
  </div>
</template>

<script>
const cell = {
  template: '<span><slot></slot></span>',
  updated() {
    console.log('cell updated')
  }
}

export default {
  data() {
    return {
      rows: newArr(),
      num: 0,
    }

    function newArr() {
      var rows = []
      for (var i = 0; i < 10; i++) {
        rows.push({ checked: 0, pkey: i })
      }
      return rows
    }
  },
  components: { cell },
}
</script>

如果是vue2

1. 组件拆分:

   • 将 num 相关的内容抽离成独立的 NumSection 组件
   • 这样当 num 变化时,只会触发 NumSection 组件的更新,而不会影响到其他组件

2. 优化 cell 组件:

   • 添加 key 属性来帮助 Vue 更好地追踪组件状态
   • 可以在子组件中实现 shouldComponentUpdate 来控制更新
   • 确保只有当 checked 值真正改变时才更新组件

3. 响应式处理:

   • 使用 this.$set 来确定数组元素属性的修改能够触发响应式更新
   • 这是 Vue 2 中的一个特殊要求,在 Vue 3 中则不需要

<template>
  <div>
    <section>
      <div v-for="row in rows" :key="row.pkey">
        <button @click="toggleChecked(row)">Change checked, one slot updated:</button>
        <cell 
          :checked="row.checked"
          :key="`cell-${row.pkey}`"
        >
          <template #default><span>{{row.checked}}</span></template>
        </cell>
      </div>
    </section>
    <hr>
    <section>
      <!-- 将num相关的内容抽离成单独的子组件 -->
      <num-section :num="num" @increment="incrementNum"></num-section>
    </section>
  </div>
</template>

<script>
// 子组件：cell
const cell = {
  props: ['checked'],
  template: '<span><slot></slot></span>',
  name: 'Cell',
  // 添加更新控制
  shouldComponentUpdate(nextProps) {
    return nextProps.checked !== this.checked;
  },
  updated() {
    console.log('cell updated')
  }
}

// 将num相关的内容抽离成独立组件
const NumSection = {
  name: 'NumSection',
  props: ['num'],
  template: `
    <div>
      <button @click="$emit('increment')">Change num:</button>
      {{num}}
    </div>
  `
}

export default {
  name: 'RowList',
  data() {
    return {
      rows: this.createRows(),
      num: 0,
    }
  },
  methods: {
    createRows() {
      return Array.from({ length: 10 }, (_, i) => ({
        checked: false,
        pkey: i
      }))
    },
    toggleChecked(row) {
      // Vue 2中对数组元素属性的修改需要使用 $set 才能保证响应式
      this.$set(row, 'checked', !row.checked)
    },
    incrementNum() {
      this.num++
    }
  },
  components: { 
    cell,
    NumSection
  }
}
</script>