- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
考虑这个说明性示例:
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() }
,该应用程序不再跟踪更新。
最佳答案
Object destructuring breaks reactivity .
When we want to use a few properties of the large reactive object, it could be tempting to use ES6 destructuringto get properties we want:
[...]
Unfortunately, with such a destructuring the reactivity for bothproperties would be lost. For such a case, we need to convert ourreactive object to a set of refs. These refs will retain the reactiveconnection to the source object:
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>
关于javascript - Vue : how to merge two reactive objects without loosing reactivity,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64099203/
介绍代码: public interface Course { /** * returns the number of units (hours) a specific course
我正在制作一个简单的 3D CAD 软件。在类图中,许多对象需要通过(x,y,z)来与其他对象区分。我创建了一个所谓的“Position”类,但问题是它看起来高度耦合,因为许多类都与位置一起工作。有什
我有一长串汽车广告标题和另一个所有汽车品牌和型号的列表,我正在搜索标题以在品牌/型号列表中找到匹配项。到目前为止我有这个: for make in carmakes: if m
我有一个网络服务,它为我提供生成的 .resx(仅限 XML),然后我将其转换为二进制 .resources 文件。我目前正在使用 al.exe 生成一个程序集文件。这是我的论点: /t:lib /c
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: What is “loose coupling?” Please provide examples. 是什么
我一直在尝试使用 WPF 并在网络浏览器中呈现严格的 XAML 标记,也称为松散 XAML(解释 here 和 here)。 我觉得它最适合显示静态内容。但是,似乎也可以绑定(bind)到 XML 数
每当我从我的 Remote 中 pull 出时,我都会收到以下关于压缩的错误。当我运行手动压缩时,我得到了相同的结果: $ git gc error: Could not read 381378312
Git的 fsck doc谈论“悬空”对象,而 the gc doc只谈论“松散的物体”。有严格的划分。 但是在浏览一些相关的 SO 帖子时,这些术语似乎可以互换使用。在 Git Book v2还有
我想创建一个具有以下形状的 Redux 存储: store = { loaded: Boolean, loading: Boolean, view: Object, // uses com
我似乎无法理解“松散耦合”的概念。我认为“松散”这个词通常具有负面含义,这没什么帮助,所以我总是忘记松散耦合是一件好事。 有人可以展示一些“之前”和“之后”代码(或伪代码)来说明这个概念吗? 最佳答案
很多时候,在阅读 Babel 及其插件的文档时,我会遇到 loose 选项。我还没有看到足够好的例子来理解它是什么。 这是 preset-es2015 中的示例文档。 loose boolean, d
这就是我要实现的目标: 在 TabWidget 中使用 TextView(即调用 TabHost.TabSpec.setIndicator(View) 而不是 TabHost.TabSpec.setI
我已经向本地分支提交了一些内容,然后尝试执行 git fetch。它因以下错误而失败: fatal: loose object 7b36029a951eacd979d24e993e020c4d018c
我的同事试图从我们的主人那里做一个git pull。他得到了这个错误: $ git pull fatal: loose object f7630cc30248df1e19bcb40c9de1b60b7
我的一个克隆存储库是从 git fsck 获取的 fatal: loose object 40bda4e3b79c3d7bf598df31d9e68470f97a3f79 (stored in .gi
优化Group By最有效的办法是当可以直接使用索引来完全获取需要group的字段。使用这个访问方法时,MySQL使用对关键字排序的索引的类型(比如BTREE索引)。这使得索引中用于group的字段
好的,我知道这已经讨论过 here但没有提供明确的答复。我经常需要将 XML 文件导入 InDesign,其中包括许多脚注。当然,在这种情况下,InD 无法自动使用标签。除了所有脚注都失去了样式之外,
我最近在更新我的应用程序时遇到了一些重大问题。许多用户在迁移到最新版本后提示数据丢失。 几个小时后,我仍然不确定发生了什么,但我想证实一个理论。 Apple 在文档中说: 迁移和 iCloud 对于与
我在我的项目中实现了一个工厂,最近有人建议我在我的类上使用属性,这样工厂就可以确定要实例化和传回哪个类。我是开发领域的新手,并试图严格遵循松耦合规则,我想知道依赖“钩子(Hook)”(作为属性)是否违
我的目标是在单击 span(带有 Show Me 文本)时显示带有 show 类的 p 标签。我曾尝试使用 :focus 伪选择器来执行此操作,但使用此方法使得 p 标记仅在单击其他位置之前显示,其中
我是一名优秀的程序员,十分优秀!