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缺点的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue自动化路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
不同于vue2不需要被use使用,vue3的机制是你的指令必须要被注册成方法的,这样你才能全局使用到自定义指令,下面这篇文章主要给大家介绍了关于vue3自定义指令的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要为大家介绍了使用v-memo缓存模板子树提高应用性能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue富文本的实现可以使用一些现成的第三方库,如Quill、Vue-quill-editor、wangEditor等,这篇文章主要给大家介绍了关于vue实现富文本编辑器的相关资料,需要的朋友可以参考下2024-01-01
在使用token进行登录的过程中,如果token过期了,需要重新输入用户名和密码登录,这种体验肯定是不好的,下面这篇文章主要给大家介绍了关于Vue Token过期问题的2种解决方案,需要的朋友可以参考下2023-02-02
下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue3.0使用axios报错问题记录,vue-cli3.0安装插件的时候要注意区分vue-cli2.0的命令，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
Vue重要修饰符.sync对比v-model的区别及使用详解
这篇文章主要为大家介绍了Vue中重要修饰符.sync与v-model的区别对比及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了关于antd-vue a-menu菜单绑定路由的相关问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue路由权限和按钮权限的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论