如何使在Vue之外創(chuàng)建的變量具有響應(yīng)性

這篇文章給大家分享的是有關(guān)如何使在Vue之外創(chuàng)建的變量具有響應(yīng)性的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

如果你從 Vue 外部獲得一個(gè)變量，那么能夠使其具有響應(yīng)性就很好。這樣你就可以在計(jì)算道具、觀察者和其他任何地方使用它，它就像 Vue 中的任何其他狀態(tài)一樣工作。

當(dāng)你正在使用 options API，你只需將它放在data組件的部分中：

const externalVariable = getValue();

export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

當(dāng)你在 Vue 3 中使用組合 API，則可以使用ref或reactive這樣：

import { ref } from 'vue';

// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);

// 使用 .value 訪問
console.log(reactiveVariable.value);

使用reactive來代替：\

import { reactive } from 'vue';

// 可以完全在 Vue 組件之外完成
const externalVariable = getValue();
// Reactive 僅適用于對象和數(shù)組
const anotherReactiveVariable = reactive(externalVariable);

// 直接訪問
console.log(anotherReactiveVariable);

如果你仍在使用 Vue 2（就像我們中的許多人一樣），你可以使用observable而不是reactive獲得完全相同的結(jié)果。

感謝各位的閱讀！關(guān)于“如何使在Vue之外創(chuàng)建的變量具有響應(yīng)性”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！