vue2响应式数据的BUG--向响应式对象直接添加property没有响应性

68 阅读1分钟
首先说这算是vue2的一个BUG,vue3已经解决了这个BUG可以直接添加property也会有响应性

我遇到的场景是在拿到后端给的数据之后加了一个choose属性来控制单选

image.png

点击的时候修改choose的值,输出显示choose的值的确改变了

image.png

选中与未选中是两张照片,用了v-if来控制显示,但是前面的图片并没有显示

image.png

让朋友帮我看,他也是看了一会发现这个choose是没有响应性的,但是我这个菜鸟根本发现不了

cf071918-cdb7-4555-aea0-a4b61961bb39.jpg

他是在控制台的输出中发现的,他说响应式的话一般是不会直接显示出来的,会有省略号,我是又学到了一个小技巧

image.png

这时候就要用到vue2的set方法,在uniapp中就是$se

Vue.set( target, propertyName/index, valu…

  • 参数

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value
  • 返回值:设置的值。

  • 用法

    向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

    注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。

    最后的自我反省: 看文档,一定要看文档,要看的滚瓜烂熟,之前看了好多遍vue3的文档,但就是没看vue2的文档,我以为vue2有的东西vue3也应该都有