VUE2响应式原理使用Object.defineProperty缺点
更新时间：2023年08月07日 10:51:07 作者：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缺点的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要介绍了Vuex之理解Store的用法，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中2017-04-04
这篇文章主要介绍了关于vue中的时间格式转化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
Element-UI介绍主题定制、自定义组件和插件扩展的代码示例
本文介绍了使用Element-UI实现主题定制、自定义组件和扩展插件的方法和实用案例,在开发过程中,我们可以根据自己的需求,灵活选择相关的技术手段,并不断探索和尝试,以提高开发效率和用户体验,感兴趣的朋友跟随小编一起看看吧2024-02-02
这篇文章主要介绍了Intellij IDEA搭建vue-cli项目的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vue-cli工程webpack的基本用法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
在许多Web应用程序中，日历是一个常见的组件，它通常用于显示日期、安排会议、查看活动等，在Vue中，我们可以使用第三方库来轻松实现日历功能，也可以手动编写代码来实现日历的展示和操作，本文将介绍如何使用vue-calendar和手动编写代码来实现日历功能2023-07-07
这篇文章主要介绍了vue元素实现动画过渡效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这里分享一个常用的价格格式化的一个方法，在电商的价格处理中非常的实用，具体实现代码大家参考下本文2017-05-05
这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue3原始值响应方案及响应丢失问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论