在之前,vue是通过Object.defineProperty
来实现响应式的,但在vue3.0中,改为使用proxy实现
在我看来,Object.defineProperty
有以下几个问题:
- 不能监听对象属性的新增和删除。只对获取和更改进行了处理。
- 通过索引更改数组对象不能被监听,如arr[1] = 2
Object.defineProperty
不能再get或set中使用该对象。因为使用该对象,即触发了get方法,会进入死循环。需要对被订阅对象进行拷贝,使用拷贝的对象。- 需要遍历对象中的各个属性,对其使用
Object.defineProperty
进行set/get的改写。
在目前,解决第一个和第二个问题的方式是通过vue.set(target, key, value)
来实现
在使用proxy时,创建代理对象。使用target和key,传入需要实现响应式的对象和属性。通过代理实现了目标对象的响应式。