• Vue2 和 Vue3 响应式上有什么区别?


    1、使用 Object.defineProperty() 来进行数据劫持有什么缺点?

    Vue2 使用的是 Object.defineProperty() 来实现的响应式,它需要递归的对所有的属性进行拦截,重写 getter 和 setter 函数。

    而且只能劫持已有的属性,对于新增、删除属性和通过下标方式修改数组数据是拦截不到的,必须额外通过 $set、 $delete 这些 API 来手动触发页面的更新。

    Vue 2 中,当一个对象被设置为响应式对象时,会通过 Object.defineProperty() 方法把每个属性都转换成 getter和 setter,当属性值发生变化时,会触发 setter,进而通知所有引用该属性的组件更新视图。

    2、Vue2 和 Vue3 响应式上有什么区别 ?

    而 Vue3 使用 ES6 的 proxy 代理的方式来处理响应式。

    它和 Vue2 的区别在于,它不需要对所有属性重写 getter 和 setter,可以完美的监听到任何方式的数据改变。

    除了能监听到属性的删除和新增,而且能够直接监听数组的变化,不需要对数组进行特殊的处理。

    唯一的缺点是兼容性的问题,因为 Proxy 是 ES6 的语法。

    相比之下,Vue 3 中的响应式系统在使用上更加方便、高效和完善。

    相比之下,Proxy更强大,它可以拦截到更多的操作。包括添加、删除和遍历属性等。

    此外,它还能够直接监听数组的变化,而不需要进行特殊的处理。这意味着,在 Vue3 中,开发者可以更加方便地使用响应式数据,提高开发效率。

    Vue 3.x 中对于新增属性和删除属性的响应式处理更加完善和高效,无需使用 Vue.set 方法,而 Vue 2.x 中需要手动使用这些方法才能保证新增或删除属性的响应式效果。

    Vue 3 中使用了递归遍历 Proxy 对象的属性,因此在访问嵌套属性时会更加方便和高效,而 Vue2 则需要通过 watch 或 computed 等方式才能实现嵌套属性的响应式。

    Vue 3 中的响应式系统支持了 reactive() 和 readonly 等 API,方便开发者创建只读或可变的响应式对象。而在 Vue 2.x 中则没有这些 API。

  • 相关阅读:
    python和shell脚本,每隔五分钟将远端服务器中的文件夹数据下载到跳板机
    Node.js学习篇(四)express路由模块化
    网络基础知识
    git stash详解
    spring boot 之 整合 knife4j 在线接口文档
    经纬恒润智能感知后视镜亮相北京车展
    华为od机考真题-HJ8合并表记录(简单)
    haproxy软件的日志输出到指定文件
    亿流量大考(2):开发一套高容错分布式系统
    TiDB 集群故障诊断
  • 原文地址:https://blog.csdn.net/qq_38290251/article/details/133895106