Vue 3中如何为组件实例设置非响应式的数据？

Question

对于Vue2有一个类似的问题，建议使用$options。

但是对于Vue 3似乎不起作用。

首先，Vue 3的文档中说，$options是只读的。

所以当我尝试在组件挂载时初始化实例中的tooltip时，我得到了非常奇怪的行为，当显示工具提示时，它们是从最后创建的组件中显示的，所以似乎$options在某种程度上是“全局”的？

当将tooltip放入data中时，一切正常，但显然tooltip不应该是响应式的，我想将其放在data之外。

<template>
  <i
      :class="['bi ', icon, hover && 'text-primary']"
      class="bg-body"
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      style="cursor: pointer"
      :title="title"
      ref="icon"
  />
</template>

<script>
import {Tooltip} from "bootstrap";

export default {
  props: ["icon", "title"],
  tooltip: null,
  data() {
    return {
      hover: false
    }

  },
  mounted() {
    this.$options.tooltip = new Tooltip(this.$refs.icon,{
      placement: 'bottom',
      trigger: 'manual',
      title: this.title || ''
    });
  },

}
</script>

Answer 1

您可以直接在mounted()钩子中将非响应式属性附加到组件实例上：

<script>
export default {
  // tooltip: null,
  mounted() {
    // this.$options.tooltip = new Tooltip(...)
    this.tooltip = new Tooltip(...)
  },
}
</script>

<template>
  <!-- BEFORE -->
  <i
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      ref="icon"
  />

  <!-- AFTER -->
  <i
      @mouseover="hover = true; tooltip.show();"
      @mouseleave="hover = false; tooltip.hide();"
      @click="tooltip.hide();"
      ref="icon"
  />
</template>

演示