当你在 v-if 中有一个组件判断 v-if 在 vue 中重新渲染时，如何避免最大递归？答案

【问题标题】：How to avoid maximum recursive when you have a components inside v-if which judge v-if to re-render in vue?当你在 v-if 中有一个组件判断 v-if 在 vue 中重新渲染时，如何避免最大递归？
【发布时间】：2023-01-27 19:32:55
【问题描述】：

我目前正在为 vue3 构建一个省略号组件，这是它的一部分代码

<template>
  <XTooltip
    v-if="getTooltipsDisabled() === false"
    ref="tooltipRef"
    :content="tooltipContent"
  >
    <span
      ref="content"
      :class="ellipsisStyleRef.valueOf()"
      :style="ellipsisClassRef"
      @click="handleClickRef"
    >
      <slot></slot>
    </span>
  </XTooltip>
  <span
    v-else
    ref="content"
    :class="ellipsisStyleRef.valueOf()"
    :style="ellipsisClassRef"
    @click="handleClickRef"
  >
    <slot></slot>
  </span>
</template>

const getTooltipsDisabled = (): boolean => {
      const content = ref<HTMLElement | null>(null);
      let tooltipsDisabled = false;
      const { value: outer } = content;
      console.log('TEST');
      if (outer) {
        tooltipsDisabled = outer.scrollHeight <= outer.offsetHeight;
      }
      return tooltipsDisabled;
    };

所以现在的主要问题是我正在使用 getTooltipsDisabled() 来判断是否应该渲染 Tooltip，但是如果我这样做，它会一次又一次地触发该函数，直到它达到最大递归，我想知道为什么会这样以及如何避免这个？

我的猜测是，当我们渲染工具提示时，它也会渲染ref:content，这将使该功能重新开始，但我不确定是否是这个原因。

【问题讨论】：

标签： javascript typescript vuejs3

【解决方案1】：

查看Resize Observer API 或vue-resize-observer directive，当元素的大小发生变化时，它们会给您一个事件。这样，您可以仅在必要时重新评估。

【讨论】：