问题：vue2修改对象属性值，数据改变，但是页面视图不更新

目的：修改对象node的child属性的值，页面响应式变化
问题：数据是变了，但是页面没反应；在页面中用v-if绑定这个值，数据变了，视图也是不更新

错误写法：

this.node.child = ""
1

正确写法：

 this.$set(this.node, "child", "");
1

双向绑定的修改数据机制

我们使用v-if是一个双向绑定的过程 v-if:"isCommentShow[i]"
vue对于双向绑定的监视，是通过特定的方式实现的。如果双向绑定的对象是基本类型，则不影响。而如果双向绑定的变量是一个对象，是一个具有多个属性的对象，则需要响应式的绑定。
vue实现对对象的双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，是不会响应的。
我们如果直接修改变量的值，即this.变量 = 新值这种方式是没有经历重写的set方法的。双向绑定是没办法监听到我们的修改的。所以当我们修改了，输出的也是新值。但是你要让双向绑定知道你修改了才行，不是你改了，双向绑定就立刻知道你改了。
也就是我们需要用vue的规则去改，去通过对象重写的set方法去改对象的属性来达到响应式修改，能够立刻通知到双向绑定的指令，我修改了。
这个规则就是：this.$set(this.对象，属性名，新值)。

总结

v-if不要绑定数组元素，无效，数组元素内容的变化无法响应v-if
v-if绑定对象属性 {1: true, 2: false}，如果提前写死，v-if绑定其中一个属性，则可以生效v-if
如果对象的属性数量不定，是通过某方法的触发去改变对象的属性数量。需要使用$set()去更改对象的值, 如：

//增改都适用
this.$set(this.对象名， 属性名， 新值)


//不可以使用下面的方法更新
this.对象.属性 = 新值
//或者
this.对象[属性] = 值

1
2
3
4
5
6
7
8
9

只要所有修改或者增加属性的语句都使用this.$set() ，就能解决 v-if 无法响应对象中动态变化的属性的问题。
————————————————
原文链接：https://blog.csdn.net/NineWaited/article/details/126258442
未整理