如何使在Vue之外创建的变量具有响应性

这篇文章给大家分享的是有关如何使在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之外创建的变量具有响应性”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！