Vue:如何在不放松反应性的情况下合并两个反应性对象
Vue:如何在不放松反应性的情况下合并两个反应性对象
提问于 2020-09-28 01:12:18
考虑一下这个示例：
const useFeatureX = () => {
return Vue.reactive({
x1: 2,
x2: 3
});
};
const useFeatureY = () => {
return Vue.reactive({
y1: 1,
y2: 2
});
};
const App = {
setup() {
return { ...useFeatureX(), ...useFeatureY() };
}
};
Vue.createApp(App).mount("#root");input {
max-width: 50px;
}<script src="https://unpkg.com/vue@next"></script>
<div id="root">
x1 + x2: <input type="number" v-model="x1"/> + <input type="number" v-model="x2"/> = {{ +x1 + +x2 }} <br/>
y1 + y2: <input type="number" v-model="y1"/> + <input type="number" v-model="y2"/> = {{ +y1 + +y2 }}
</div>
正如您在运行代码段时所看到的，在将useFeatureX()和useFeatureY()的两个对象合并到一个{ ...useFeatureX(), ...useFeatureY() }之后，该应用程序不再跟踪更新。
如何在不放松反应性的情况下合并两个反应性对象？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-28 01:31:24
当我们想要使用大型反应性对象的几个属性时，使用ES6析构来获得我们想要的属性是很有诱惑力的： ..。 不幸的是，由于这样的破坏，这两个属性的反应性就会丢失。对于这种情况，我们需要将我们的反应性对象转换为一组参考文献。这些引用将保留到源对象的反应性连接：
相反，您可以使用toRefs“将一个反应性对象转换为一个普通对象，其中结果对象的每个属性都是指向原始对象的相应属性的引用”。
const useFeatureX = () => {
return Vue.reactive({
x1: 2,
x2: 3
});
};
const useFeatureY = () => {
return Vue.reactive({
y1: 1,
y2: 2
});
};
const App = {
setup() {
return { ...Vue.toRefs(useFeatureX()), ...Vue.toRefs(useFeatureY()) };
}
};
Vue.createApp(App).mount("#root");input {
max-width: 50px;
}<script src="https://unpkg.com/vue@next"></script>
<div id="root">
x1 + x2: <input type="number" v-model="x1"/> + <input type="number" v-model="x2"/> = {{ +x1 + +x2 }} <br/>
y1 + y2: <input type="number" v-model="y1"/> + <input type="number" v-model="y2"/> = {{ +y1 + +y2 }}
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64099203
复制相关文章
相似问题
腾讯云开发者
