• 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。

  • 相关阅读:
    Linux基础命令
    SPI:Java的高可扩展利器
    《大数据之路:阿里巴巴大数据实践》-第1章 总述
    football 篮球数据集-目标检测548张
    【Java开发】 Spring 05 :Project Reactor 响应式流框架(以Reactive方式访问Redis为例)
    01.从零到1,怎么初始化办公电脑
    数据结构——二叉搜索树
    linux文件操作命令
    时间获取,文件属性和权限的获取——C语言——day06
    联邦学习概述与现状
  • 原文地址:https://blog.csdn.net/qq_38290251/article/details/133895106