这篇文章给大家分享的是有关如何使在Vue之外创建的变量具有响应性的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
如果你从 Vue 外部获得一个变量，那么能够使其具有响应性就很好。这样你就可以在计算道具、观察者和其他任何地方使用它，它就像 Vue 中的任何其他状态一样工作。
当你正在使用 options API，你只需将它放在data组件的部分中：
const externalVariable = getValue();
export default {
data() {
return {
reactiveVariable: externalVariable,
};
}
};当你在 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 仅适用于对象和数组
const anotherReactiveVariable = reactive(externalVariable);
// 直接访问
console.log(anotherReactiveVariable);如果你仍在使用 Vue 2（就像我们中的许多人一样），你可以使用observable而不是reactive获得完全相同的结果。
感谢各位的阅读！关于“如何使在Vue之外创建的变量具有响应性”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
