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

用作用域插槽

<template>
    <div>
        <section>
            <div v-for="row in rows" :key="row.pkey">
                <button @click="row.checked=!row.checked">Change checked:</button>
                <cell v-slot="slotProps">
                    <span>{{row.checked}}</span>
                </cell>
            </div>
        </section>
        <hr>
        <section>
            <button @click="num++">Change num:</button>
            {{num}}
        </section>
    </div>
</template>

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

export default {
    components: { cell },
    data() {
        return {
            rows: Array(10).fill().map((_, i) => ({
                checked: 0,
                pkey: i
            })),
            num: 0
        }
    }
}
</script>

或者用函数式组件:

<template functional>
    <span>
        <slot></slot>
    </span>
</template>