VUE2响应式原理使用Object.defineProperty缺点
作者：ZekiHoo
这篇文章主要为大家介绍了VUE2响应式原理使用Object.defineProperty缺点示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
引言
我们都知道vue2响应式原理是通过Object.defineProperty来实现的，通过劫持各属性的setter和getter，监听数据的变化。
Object.defineProperty 的缺点
无法监听对象属性的新增和删除
let num = 3
const cat = {
name: '大橘',
sex: 'boy',
age: 5
}
Object.defineProperty(cat,'age',{
get() {
console.log('get value')
return num
},
set(val) {
console.log('set value', val)
num = val
}
})
cat.age = 6 // 可以被监听到
cat.breed = '狸花猫' // 无法被监听到解决方式新增属性
this.$set(this.obj, 'a', 'abc')
删除属性
this.$delete(this.obj, 'a')
无法监听数组下标的变化，通过数组下标修改元素，无法实时响应。基于性能考虑vue2放弃了Object.defineProperty这一特性，如果数组长度过大，比如1000条，性能代价和用户体验收益不成正比 参考
push() pop() shift() unshift() splice() sort() reverse()
只能劫持对象的属性，所以我们需要对每个对象的所有属性进行遍历，然后需要深拷贝进行修改
而Proxy可以监听对象而非属性，相比前者具有更好的性能
以上就是VUE2响应式原理使用Object.defineProperty缺点的详细内容，更多关于VUE2 Object.defineProperty缺点的资料请关注脚本之家其它相关文章！