我的回答

  1. 不需要进行递归对属性进行劫持
  2. 只有在访问的时候才需要进行代理
  3. 数组不需要重写方法, 可以直接使用代理, 并且数组的length属性和下标也有响应式
  4. 性能会更强

参考回答

vue3.0

vue3重写了多种机制

主要是基于:

    1. 主流浏览器对新的JavaScript语言特性的普遍支持
    1. 当前vue代码库随着时间的推移而暴露出来的设计和体系架构问题

      vue3较vue2做了很多优化

    1. 重写VDOM机制:通过编译时的标记优化运行时的速度
    1. 优化插槽(slot)生成:原来的实现是父组件重渲染时子组件必须同时渲染,而在vue3中子组件提取函数,可以分别渲染。
    1. 静态树提升:没有响应式绑定的部分被提取出来作为常量,用到的时候不用再次执行它的渲染函数
    1. 静态属性提升:没有响应式绑定的组件属性(props)被提取出来作为常量,用到的时候不用再自行创建。
    1. 项目结构优化:内部解耦、更好维护,支持了细粒度的tree-shaking,比如可选的生命周期

      Object.defineProperty与Proxy

      在vue2中,Object.defineProperty会改变原始数据,而Proxy是创建对象的虚拟表示,并提供set、get和deleteProperty等处理器,这些处理器可在访问或修改原始对象上的属性时进行拦截,有以下特点:
  • 不需要使用 Vue.$set 或 Vue.$delete 触发响应式

  • 全方位的数组变化检测,消除了vue2无效的边界情况
  • 支持Map、Set、WeakMap和WeakSet。

Proxy 实现的响应式原理与vue2的实现原理相同,实现方式大同小异: get收集依赖 set、delete等触发依赖 对于集合类型,就是对集合对象的方法做一层包装:原方法执行后执行依赖相关的收集或触发逻辑