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

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

这篇文章给大家分享的是有关如何使在Vue之外创建的变量具有响应性的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

如果你从Vue外部获得一个变量，那么能够使其具有响应性就很好。这样你就可以在计算道具、观察者和其他任何地方使用它，它就像Vue中的任何其他状态一样工作。

当你正在使用 options API，你只需将它放在data组件的部分中：

constexternalVariable=getValue();exportdefault{data(){return{reactiveVariable:externalVariable,};}};

当你在Vue 3中使用组合API，则可以使用ref或reactive这样：

import{ref}from'vue';//可以完全在Vue组件之外完成constexternalVariable=getValue();constreactiveVariable=ref(externalVariable);//使用.value访问console.log(reactiveVariable.value);使用reactive来代替：\import{reactive}from'vue';//可以完全在Vue组件之外完成constexternalVariable=getValue();//Reactive仅适用于对象和数组constanotherReactiveVariable=reactive(externalVariable);//直接访问console.log(anotherReactiveVariable);

如果你仍在使用Vue 2（就像我们中的许多人一样），你可以使用observable而不是reactive获得完全相同的结果。

感谢各位的阅读！关于“如何使在Vue之外创建的变量具有响应性”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！