Vue.js vue3反应性意外行为

我有一个反应性对象，在save函数中我调用了toRaw以消除反对象反应性，但是，当我更改反应性对象道具时，组对象也在更改。。。。 怎么办

const newGroup=reactive{id:undefined，name:，enabled:false} 常量handleSave==>{ 常量组=toRawnewGroup persistgroup.then=>{ newGroup.id=未定义 newGroup.name='demo' console.logisReactivegroup//say false，但group.name值为demo } } 将被动obj分解为const group={…newGroup}看起来是可行的，但仍然不理解为什么toRaw不起作用

编辑：

整个问题源于在处理反应对象时缺乏控制感，例如：

以下cumputed对象从存储中检索一个列表，然后在模板中绘制为表的行，单击该表时所选元素的状态将发生更改。在函数中，我被迫解构记录，以避免修改触发启用的更改，然后将其持久化 有更好的办法吗？ 我应该创建只读组吗

//in setup()
const groups = computed <Group []> (() => getters ['registry / groups'])

const toggle = (record: Group) => {
    const group = { ...record } 
    group.enabled = !group.enabled
    persist(group)
}

//in template
  <a-menu-item @ click = "toggle (record)">

isReactivegroup返回false是正常的。 实际上，在您的代码中，我们有const group=toRawnewGroup

=>组是无功值newGroup的原始对象

=>组是一个原始值，而不是被动值

如果您尝试isReactivenewGroup，它将返回true

isReactivegroup返回false是正常的。 实际上，在您的代码中，我们有const group=toRawnewGroup

=>组是无功值newGroup的原始对象

=>组是一个原始值，而不是被动值

如果尝试isReactivenewGroup，则返回true

这是预期的行为，但说明可能不够详细，并导致一些混淆

据

返回被动代理或只读代理的原始对象。这是一个转义图案填充，可用于临时读取而不产生代理访问/跟踪开销，或用于写入而不触发更改。不建议保留对原始对象的持久引用。小心使用

当您使用toRaw时，会发生的情况是，您将返回在没有代理的情况下传递到反应函数中的原始对象。这意味着该对象与示例中的对象o和g相同这是预期行为，但描述可能不够详细，导致一些混淆

据

返回被动代理或只读代理的原始对象。这是一个转义图案填充，可用于临时读取而不产生代理访问/跟踪开销，或用于写入而不触发更改。不建议保留对原始对象的持久引用。小心使用

---

当您使用toRaw时，会发生的情况是，您将返回在没有代理的情况下传递到反应函数中的原始对象。这意味着，在示例中，对象是相同的对象o和g您对反应性有误解。反应对象将数据与DOM连接，而不是在javascript对象之间，即当反应对象的属性更新时，DOM将自动更新

返回被动代理或只读代理的原始对象，即group和newGroup仍然是同一个对象，区别在于group不会像newGroup那样触发DOM更新

例如，当您更新newGroup时，UI会更新，但更新group不会触发DOM更改。但是，这两个对象仍然具有相同的引用，这就是为什么group.name和newGroup.name始终相同的原因

Vue.createApp{ 设置{ const newGroup=Vue.reactive{id:undefined，name:，enabled:false} const group=Vue.toRawnewGroup 返回{ 新集团， 组 } } }.mount'app' 反应性更新 新组名称：{{newGroup.Name} 原始更新 组名：{{group.Name}

---

你对这里的反应性有误解。反应对象将数据与DOM连接，而不是在javascript对象之间，即当反应对象的属性更新时，DOM将自动更新

返回被动代理或只读代理的原始对象，即group和newGroup仍然是同一个对象，区别在于group不会像newGroup那样触发DOM更新

例如，当您更新newGroup时，UI会更新，但更新group不会触发DOM更改。但是，这两个对象仍然具有相同的引用，这就是为什么group.name和newGroup.name始终相同的原因

Vue.createApp{ 设置{ const newGroup=Vue.reactive{id:undefined，name:，enabled:false} const group=Vue.toRawnewGroup 返回{ 新集团， 组 } } }.mount'app' 反应性更新 新组名称：{{newGroup.Name} 原始更新 组名：{{group.Name} 是的，但是

---

---

问题是它仍然是反应性的，如果我改变组，它也会改变newGrop和viceversayest，但问题是它仍然是反应性的，如果我改变组，它也会改变newGrop和viceversanice！，还有一件事，当我需要使用被动对象来编辑/发送到vuex/发送到axios等时，处理被动对象的最佳方法是什么？如果您的意思是隔离更改效果，您可以使用前面提到的扩展语法。i、 e.group={…newGroup}但这是一个浅拷贝。如果需要深度克隆新对象，常用的方法是使用let group=JSON.parseJSON.stringifynewGroup.so JSON parse/stringify？？？感觉很奇怪，从哪里来改变你需要设置的状态，我觉得我有较低的控制力我真的不确定你想做什么，你担心什么。我相信Vuex在Vue 3中没有太大变化。您可以使用变体/获取器从存储中设置/获取值。对于axios，我想可以发送反应对象吗？最后，它们是javascript对象，但有附加到更新DOM的侦听器。虽然您可能需要对其进行测试以确定。是的，但是如果我需要在持久化之前更改被动对象，那么？很好！，还有一件事，当我需要使用被动对象来编辑/发送到vuex/发送到axios等时，处理被动对象的最佳方法是什么？如果您的意思是隔离更改效果，您可以使用前面提到的扩展语法。i、 e.group={…newGroup}但这是一个浅拷贝。如果需要深度克隆新对象，常用的方法是使用let group=JSON.parseJSON.stringifynewGroup.so JSON parse/stringify？？？感觉很奇怪，从哪里来改变你需要设置的状态，我觉得我有较低的控制力我真的不确定你想做什么，你担心什么。我相信Vuex在Vue 3中没有太大变化。您可以使用变体/获取器从存储中设置/获取值。对于axios，我想可以发送反应对象吗？最后，它们是javascript对象，但有附加到更新DOM的侦听器。虽然你可能需要测试以确定。是的，但是如果我需要在坚持之前更改反应对象？正如你的回答总是令人惊讶的一样，我担心的另一件事是，一旦我需要使用它们，我就不清楚如何处理反应对象。例如，假设将响应对象用于表单，在将其存储到vuex或通过axios发送之前，我应该如何使用它进行更改？更新示例以创建副本。我通常使用{…o}解构，因为我通常知道浅拷贝的含义，所以我不需要JSON.parse的开销，但我用一个例子更新了YMMV因为你的答案总是令人惊讶，我担心的另一件事是，一旦我需要使用反应对象，我不清楚如何处理它们。例如，假设将响应对象用于表单，在将其存储到vuex或通过axios发送之前，我应该如何使用它进行更改？更新示例以创建副本。我通常使用{…o}解构，因为我通常知道浅层拷贝的含义，所以我不需要JSON.parse的开销，但是YMMV更新了一个示例persist做什么？我不太明白为什么反应对象正在更新是一个问题。persist将调度一个store函数，该函数调用axios来编辑行，例如，在axios调用可能失败之前，我无法更改行状态。因此，当persist async方法更新远程数据时，您希望存储或其中的一部分是不可变的吗？是的，正如您所看到的，在本例中，我使用了分解结构，但不知道这是否是为了您所做的事情，{…record}是代替toRawrecord的方法，因为to raw返回关注的对象，而destructuring只为您创建副本。你也可以做{…toRawrecord}，但我不认为这会有任何额外的好处。persist做什么？我不太明白为什么反应对象正在更新是一个问题。persist将调度一个store函数，该函数调用axios来编辑行，例如，在axios调用可能失败之前，我无法更改行状态。因此，当persist async方法更新远程数据时，您希望存储或其中的一部分是不可变的吗？是的，正如您所看到的，在本例中，我使用了分解结构，但不知道这是否是为了您所做的事情，{…record}是代替toRawrecord的方法，因为to raw返回关注的对象，而destructuring只为您创建副本。你也可以做{…toRawrecord}，但我认为这不会有任何额外的好处。