vue2.0响应式原理

Surplus9

已于 2022-02-08 15:59:01 修改

阅读量282

点赞数

文章标签：前端 vue.js

于 2022-02-08 15:57:14 首次发布

本文链接：https://blog.csdn.net/weixin_45414741/article/details/122633797

版权

Vue3.0弃用Object.defineProperty转而采用Proxy的原因在于Proxy能更全面地监听对象变化，包括数组下标修改。虽然Object.defineProperty可以监听数组，但因数组操作可能引发多次set，影响性能。因此，Vue3.0通过重写数组变异方法实现响应式，以优化性能。

摘要由CSDN通过智能技术生成

为什么vue3.0采用了Proxy，抛弃了Object.definePropetry

1.前言
不少小伙伴认为vue3.0不使用Object.definePropetry去做响应式是因为他不能监听到数组下标的变化，导致操作数组下标导致无法实施更新。

个人认为：
1.Obejct.definePropetry这个api，其实他是可以监听到数组下标变化的，对于js来说，数组也是Object。
2.为什么vue不劫持数组：
因为数组不像对象那样，即使位置错乱也没有关系，key和value对应关系一般不会变，每个value更新只会造成一次set，而数组则不一样，他只能通过下标去做key，所有这个key是不固定的，位置变化就会造成多次set操作，vue官方也考虑到性能问题，所以没有对数组做劫持，而是将数组的7个变异方法进行重写，也就是更改了Array原型上的方法达到劫持的效果。