Vue 3中如何為元件實例設定非響應式的資料？

Question

對於Vue2有類似的問題，建議使用$options。

但是對於Vue 3似乎不起作用。

首先，Vue 3的文檔中說，$options是唯讀的。

所以當我嘗試在元件掛載時初始化實例中的tooltip時，我得到了非常奇怪的行為，當顯示工具提示時，它們是從最後創建的元件中顯示的，所以似乎 ;$options在某種程度上是「全域」的？

當將tooltip放入data中時，一切正常，但顯然tooltip不應該是響應式的，我想將其放在< code>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} 從 "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>

示範