解决vue2中数据响应式存在的问题

288 阅读1分钟

在vue2中,通过Object.defineProperty()对属性的读取、修改进行拦截

 Object.defineProperty(obj,'name',{
      get(){},
      set(){}
    })

存在的问题:

1.对象类型的数据,只能对数据进行读取和修改,如果新增数据或删除时,页面不会做出响应式,自然也不会更新

2.数组类型的数据,通过下表修改数组,界面也不会更新

解决方法:

对象类型的数据:

新增属性时:this.$set(obj,'属性','值')
删除属性时:this.$delete(obj,'属性')

数组类型的数据
可以使用数组的splice()方法