javascript - Vue2 修改值问题页面变化？

Question

vue2的一个改变值的问题

用的vue2的版本
为什么点击第一个按钮click1的时候页面输出了test2和8呢，第二个的时候就没发生变化，为了尝试，我还把第二个按钮里面也加了settimout，结果第二个按钮点击的时候页面还是不发生变化，有知道原因的吗？

无

Answer 1

data里面的obj只有name，没有age属性，所以click2的时候age属性非响应式，可以尝试this.$set(obj,'age',22)

Answer 2

vue2不会监听对象属性的新增（深入响应式原理），可以考虑使用 $set 来设置，或者给 this.obj 整个对象赋值

正好之前写过一篇分享笔记，你可以阅读一下 �� 为什么v-model绑定的对象属性不是总是响应式？

Answer 3

您的问题中没有提供足够的代码和上下文来确切地判断问题所在，但是我可以提供一些常见的解决Vue2中数据不更新的方法。

在Vue2中，如果你直接修改了一个对象或数组的属性，并且这个对象或数组是通过data选项定义的响应式数据，Vue可能无法检测到这种变化并更新视图。这是因为Vue的响应式系统是通过Object.defineProperty()来实现的，它只能检测到属性的读取和修改，但不能检测到属性的添加或删除。

为了解决这个问题，你可以尝试以下方法：

1. 使用Vue.set()方法：Vue提供了一个全局方法Vue.set()，可以用来向响应式对象中添加一个属性并确保新属性同样是响应式的，从而触发视图更新。

Vue.set(this.myObject, 'myProperty', newValue);

2. 使用数组的变异方法：如果你正在修改一个数组，确保使用Vue提供的变异方法（如push、pop、splice等）而不是直接修改索引。这些变异方法会触发视图的更新。
3. 替换整个对象或数组：如果你需要修改对象的多个属性或数组的多个元素，考虑创建一个新的对象或数组来替换旧的对象或数组，而不是直接修改它。这样做会触发视图的更新。

this.myObject = { ...this.myObject, myProperty: newValue };

请提供更多代码和上下文信息，以便我能更准确地帮助您解决问题。如果可能的话，请提供相关的Vue组件代码和按钮点击事件的处理逻辑。这样我才能更具体地分析问题所在。