为什么antd-vue tabs里面的组件会渲染好多遍？

  • Z时代
  • 2024-03-12
  • 分类：IT

为什么antd-vue tabs里面的组件会渲染好多遍？

tab切换，为什么每次切到对应页面，都会执行多遍
比如Members组件下，

  // Members组件mounted
  mounted () {
    console.log("#") // 这里会一下打印4次
  },
 // 父组件
 <a-tabs default-active-key="1" @change="callback" >
          <template v-for="item in tabPaneArr">
            <a-tab-pane :key="item.key" :tab="item.tab" :forceRender="true">
              <keep-alive>
                <Members v-if="activedKey == 1"></Members>
              </keep-alive>
              <keep-alive>
                <Subject v-if="activedKey == 2"></Subject>
              </keep-alive>
              <keep-alive>
                <Visit v-if="activedKey == 3"></Visit>
              </keep-alive>
              <keep-alive>
                <Approval v-if="activedKey == 4"></Approval>
              </keep-alive>
            </a-tab-pane>
          </template>
        </a-tabs>

回答：

<a-tabs default-active-key="1" @change="callback" >
  <template v-for="item in tabPaneArr">
    <a-tab-pane :key="item.key" :tab="item.tab">
      <Members v-if="activedKey == 1"></Members>
    </a-tab-pane>
  </template>
</a-tabs>

咱先简化一下问题，去掉乱七八糟的干扰项，看一下结构是不是这么个结构？

你那个 a-tab-pane 是 v-for 循环渲染出来的，作为子组件的 Members 当然也随之渲染了多遍。当 activedKey == 1 条件成立时，可不就一下好几个 Members 组件全都挂载上来、然后触发生命周期函数了么。

以上是 为什么antd-vue tabs里面的组件会渲染好多遍？ 的全部内容， 来源链接： utcz.com/p/936352.html

回到顶部