vue中如果数据发生改变但是界面没有更新？

今天发现一个数据发生改变但是界面没有更新的问题：

1.我在data定义的数据是个对象 obj

image.png

2.然后我去给obj添加tableData这个属性

image.png

3.此时会我去操作页面发现，数据发生改变了但是页面没有更新，比如我点击第二页，显示的还是第一页的数据

image.png image.png

4.原因是：vue.js通过Object.defineProperty来将对象的key转换为getter/setter的形式，但是 getter/setter只能追踪一个数据是否被修改，无法最终新增属性和删除属性

图片源于《深入浅出Vue.js》

5.此时如果要解决这个问题我可以使用set 方法去监听对象里面的数据的变化

image.png

总结：Object.defineProperty不能检测到对象属性的新增和删除，对象新增属性vue不能监听到，所以需要使用set方法去添加这个tabledata,vue3用proxy重写了...