vue3.0记录-Proxy(代理)

  vue3.0中,使用proxy替换了原来遍历对象使用Object.defineProperty方法给属性添加set/get
  vue的核心能力之一是监听用户定义的状态变化并响应式刷新DOM
  vue2是通过替换状态对象属性的getter和setter来实现的,vue3则通过proxy进行
  改为proxy后,可以突破vue当前的限制,解决之前vue2的无法监听新增属性,还能提供更好的性能表现

  vue的新版本(和重写版本)出现有两个关键的因素

1. 主流浏览器对新的JavaScript语言特性的普遍可用性
2. 随着时间的推移,当前代码库中的设计和架构问题逐渐暴露

什么是proxy

• proxy->代理,JavaScript中用来表示由它来’代理’某些操作
• proxy会在目标对象之前架设一层’拦截’,外界对该对象的访问,都必须先通过这层拦截,因此可以对外界的访问进行过滤和改写

vue3为什么要用proxy

  在vue2中,通过递归遍历data中的所有的property,并使用Object.defineProperty把property全部转为getter/setter,在getter中做数据依赖收集处理,在setter中监听数据的变化,并通知订阅当前数据的地方,但由于JavaScript的限制,这种实现方式有几个问题:

1. 无法检测对象属性的添加和移除,需要通过Vue.set/Vue.delete来保证响应系统的运行符合预期
2. 无法监控到数组下标及数组长度的变化,当直接通过数组的下标给数组设置值或者改变数组长度时,不能实时响应
3. 性能问题,当data中数据比较多且层级很深的时候,因为要遍历data中所有数据并给其设置响应式,会导致性能下降

而proxy恰恰解决了上述问题

总结

  proxy是用来操作对象并且扩展对象能力的,而Object.defineProperty只是单纯地操作对象的属性
  vue2是用Object.defineProperty实现数据响应的,但是受限于Object.defineProperty的实现,必须递归遍历至对象的最底层
  vue3用proxy来拦截对象,不管是对对象执行任何操作,都会先通过proxy的处理逻辑