2025-09-08 vue2赋值了某字段，但是页面双向绑定的值却没变化？==》蠢办法：使用v-if+变量来控制元素的重新渲染，聪明办法：this.$set，终极方法：解构赋值

在你控制的元素那里的值改变了但是页面没有变化

蠢办法:

在该元素的上一级设置v-if，在改变值的时候把该元素设置为隐藏，n秒后再显示。

页面局部重绘，缓存值被清除，当然这只是我的猜测，我不知道到底存不存在页面局部缓存这种bug，但事实上每次遇到这种情况我都是这么处理的。

注意：如果控制元素的上一级的隐藏——显示后还是无法显示，那么可以尝试在该元素的上上上上级设置隐藏——显示，或者把n秒设置长一点再显示。

我这儿说的n秒的意思就是让你把控制显示元素显示的操作放在计时器里哦~

原因猜测：

出现这种情况，原因可能是这个值你看上去它改变了，实际上它很有可能是undefined，因为vue的双向绑定是需要找到这个字段才能给他绑定值，

找不到自然无法响应式更新页面了，这时虽然你页面指定了该字段，但实际上赋值时是未定义，这可能是问题所在，除了上面傻瓜式操作，

其实还有另一种方法（聪明办法），前提是vue无法找到该值的情况下，可以使用this.$set主动告诉vue去绑定某某值，

例如原写法为：

this.addressObj.isOpen = this.params.isOpen;

使用this.$set方法：

this.$set(this.addressObj, 'isOpen', ['true',true,'1',1].includes(this.params.isOpen));

你会发现页面能正确渲染出来了~是不是很神奇？！

也有一种情况下，可能是vue版本太过落后导致一些方法不支持，如果你用的vue2就有可能发生这种事情，vue2是使用Object.defineProperty来实现响应式更新的，

只有在初始化时才会把字段设置为响应式，之后再去给页面添加新的属性时会被当成非响应式，只有手动用this.$set这种全局vue实例工具才能绑定成1响应式，

当然应该还有更多方法~ 至于更高版本的vue3据说是使用Proxy来实现响应式的，不存在监听不到对象属性的动态增删的情况，但是谁知道呢~

============= 几分钟后 =============

哎！我又想到一种解决方案了，那就是解构源数据，通过深拷贝来实现赋值，假如先前赋值是因为undefined导致的：

this.addressObj = {...this.addressObj, isOpen: ['true',true,'1',1].includes(this.params.isOpen)};

如何呢？又能怎？！