关于Vue中的属性值无法与视图同步的问题

哎呀，我当时也掉进这个坑了，真是烦人啊！你说得对，就是头疼。

我记得一年前，在一个电子商务项目中，我正在开发一个包含产品列表的活动页面，我使用 Vue 来完成它。
我写了一个组件，产品信息是一个对象，有一个详细信息数组，数组中设置了各种spec参数。
初始化时，详细信息必须有初始值，例如颜色、尺寸等。

后来更改了活动，临时添加了促销信息属性。
我直接将其添加到数据中的产品对象中，或者更改新的产品对象，然后将新对象插入到详细信息中。
你猜怎么着？页面不动！新添加的属性根本没有反应。

我当时一头雾水，在浏览器键盘上敲了好久。
经过查阅官方文档，我终于明白了。
你引用的这段话已经说得很清楚了。
这是 JavaScript 本身的限制。
当 Vue 初始化时，它没有新添加的属性的 getter/setter，因此它无法识别它们，并且在更新时不会响应。

看看我当时遇到的场景。
在一个大群体中，某个产品对象突然出现了特价商品领域。
我直接设置了 this.product.specialOffer = '买一送一' 但页面没有更新。
如果最初存在的product.details[0].price发生变化，页面也会相应变化。

解决办法，你说得对，使用Vue.set或者this.$set。
我当时就用了。
例如，如果我想为特定产品对象添加特别优惠，我需要执行以下操作：
javascript this.$set(this.product, '特惠', '买一送一');
或
javascript Vue.set(此产品, '特惠', '买一送一');
添加后，页面正常更新。
我记得测试女孩指着屏幕问我为什么不是活动标签。
我改了数据码，她还是没看到。
我真的很担心。

所以当你以后遇到数据中已经存在的这类对象集，并且给它添加新的属性或者改变值的时候，应该记得使用$set。
别像我当年那样盯着屏幕。
真是浪费时间。

vue $set使用说明

说实话，我第一次接手老项目时，在使用Vue $set方法时也遇到过风险。
我记得有一次我改变了表单提交逻辑，将属性直接添加到数组对象中。
结果，页面陷入了沉默。
调试了半天，发现是这个人负责。

我们先来说说对象。
例如，如果您有一个 User Info 对象并想要添加新属性age，则直接输入 user.age = 1 8 是行不通的。
您应该使用 Vue.set，例如 Vue.set(user, 'age', 1 8 )。
我在项目中使用了它。
在处理用户权限数据时，后端返回的数据结构总是在变化，每次都要使用$set来动态添加字段。
注意，如果target参数不是new Vue()实例化的对象，那么响应就会无效——当时我不明白为什么，后来查了资料，说是因为Vue的依赖跟踪机制。

矩阵运算更重要。
想想看，如果你直接改变 array[index] = newValue，Vue 不会知道你改变了什么。
我遇到了一个非常奇怪的错误。
用户列表存储在数组中，直接映射整个新数组。
结果，旧矩阵中每个用户的具体状态丢失了。
后来我用this.$set(array, Index, newValue)解决了。
一个具体的数字是，在我们的项目中，我们使用 $set 修改了数百个数组元素，并且从未出现过任何响应问题。

使用的目的是避免“免费赠送”。
如果直接在数据中改变对象或者数组，就相当于重写了Vue的依赖收集系统。
例如，如果向对象添加新属性，则无法使用计算或监视来跟踪它们。
我记得有一次我修改了一个组件并添加了一种新的方式来运行观察者。
结果，因为直接操作了对象，所以方法被执行了，但观察者并没有发出声音。
这真的很烦人。

有趣的是，有时 $set 并不是绝对有能力。
例如，如果使用切片等Array.prototype方法，返回的新数组已经是响应式的，但原始数组保持不变。
需要动态过滤用户列表。
使用滤波器后，必须清除原始矩阵。
这时候单纯使用$set就不合适了。
直接分配一个新数组更简单。

现在想想，$set 就像一个数据解析器。
您处理的数据越多它越复杂，你就越离不开它。
但如果你经常使用它，很容易创建依赖关系。
有时候，你可以换个思路，比如使用 v-for 和 :key 动态显示，这样可以节省大量的 $set 调用。
不过话说回来，直接操作肯定比间接操作有性能优势。
关键取决于你如何权衡场景。

vue3怎么修改值

你说得对。

2 02 3 年3 月。

我的朋友最近刚刚学习Vue3
确实。

reactive 和 ref 是重点。

直接更改responsive属性即可。

ref 必须替换为 .value。

Vue.set 消失了。

直接赋值即可。

非反应性数据。

然后使用Object.assign。

但最好切换到响应式风格。

数组运算。

push splice pop这些都是用的。

不可能直接arr[0]=xxx。
它会失败。

模型中的v-model。

这是真的。

配置中的toRefs。

这一点应该注意。

解构会降低响应能力。

您必须使用 toRefs。

总结一下。

就这样用吧。

没有别的了。

算了。

vue中$set的原理

这就是陷阱。
直接分配新属性不会更新视图。

别相信。
Vue 无法自动跟踪无响应的属性更改。

不要这样做。
使用 $set 添加或修改属性并确保视图已更新。