如何在 Vue 3 中设置非反应式组件实例级数据？

Question

Vue2 有一个similar question，建议使用$options。

但它似乎不适用于 Vue 3。

首先，Vue 3 documentation 说，$options 是只读的。

因此，当我在安装组件时尝试在实例中初始化工具提示时，我会得到非常奇怪的行为，当工具提示从上次创建的组件中显示时，所以 $options 似乎在某种程度上是“全局的”？

当把tooptip 放到data 时一切正常，但显然工具提示不应该是反应性的，我想把它放在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>

demo