有的需求写的时候就会遇到这种情况,我们需要通过下标来修改数组数据或者给对象新增一个属性,然后修改数据之后 没有双向数据绑定 导致组件没有重新渲染
解决方法
使用vue官网给的this.$set来解决这个问题
this.$set( target, propertyName/index, value )
![在这里插入图片描述](https://img-blog.csdnimg.cn/22bfcff34b2243fcbb8eb941562d30f8.png
原因
vue2使用的Object.defineProperty()进行数据劫持,但是Object.defineProperty()并不能劫持这种事件,因为官网才给出了this.$set的解决方案。但是vue3就没有这个问题了,因为vue3换成了proxy对对象进行代理,从而实现数据劫持。proxy能监听到任何方式的数据改变,唯一需要注意的就是兼容问题,因为proxy是es6语法,低版本浏览器是不支持的(万恶的IE)