为什么Vue2中出现data数据刷新但是视图不更新的问题，但是Vue3中没有

为什么会出现data数据改变，页面不更新

vue2中是通过Object.defineProperty实现数据响应式，组件初始化时，对data中的数据进行递归遍历，对data的每一个属性进行劫持，添加set,get方法，我们后来新增加的newProperty属性，并没有通过Object.defineProperty设置成响应式数据，修改后不会进行视图更新

解决视图不更新的问题

情况一：数组

第一种：

数组的值改变，在改变数组的值的时候使用索引index进行改变某一项，这样视图不会实时更新

解决方法：

使用$set()它的第一个参数是一个数组，第二个参数是下标，第三个参数是新的内容

例子：

let arr=['你好','nihaoya','满天星']
this.$set(arr,1,'你好吖')
当数组更新后arr是['你好','你好吖','满天星']

第二种：当修改数组长度的时候，视图也不会进行实时更新

解决方法：

可以使用数组方法【变异方法】进行触发更新视图，例如：pop() push() shift() unshift() sort() splice() 等

情况二：对象

只是改变啦对象的某一项，但是其他的数据视图没有更新

解决方案：

利用Vue.set(obj,key,val)

利用this.$set(this.obj,key,val)

利用Object.assign({},this.obj)创建新对象

$delete移除属性

可以先删除掉该项，然后再去使用set去进行添加

object.assign或者lodash.assign可以以为对象添加响应式属性

Vue3中为什么没有（Vue3的响应式原理）

通过Proxy（代理）： 拦截对象中任意属性的变化，包括：属性值的读写，属性的增加，属性的删除等。

通过Reffect（反射）： 对源对象的属性进行操作