Vue3 使用Proxy替代了defineProperty。

Proxy 相比于 defineProperty 的优势

Object.defineProperty() 的问题主要有三个：

  • 不能监听数组的变化
  • 必须遍历对象的每个属性
  • 必须深层遍历嵌套的对象

Proxy 在 ES2015 规范中被正式加入，它有以下几个特点：

  • 针对对象：针对整个对象，而不是对象的某个属性，所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题
  • 支持数组：Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。

除了上述两点之外，Proxy 还拥有以下优势：

  • Proxy 的第二个参数可以有 13 种拦截方法，这比起 Object.defineProperty() 要更加丰富
  • Proxy 作为新标准受到浏览器厂商的重点关注和性能优化，相比之下 Object.defineProperty() 是一个已有的老方法。

缺陷：IE 不兼容

Vue3 相比 vue2的更多相关文章

  1. 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!

    从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是V ...

  2. vue2升级vue3：vue2 vue-i18n 升级到vue3搭配VueI18n v9

    项目从vue2 升级vue3,VueI18n需要做适当的调整.主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化,其中初始化: 具体可以参看:https://vue- ...

  3. 第三十一篇:vue3和vue2的不同

    好家伙 1.为什么会有vue3? Vue2和Vue3的区别 - 简书 (jianshu.com) 貌似是因为他的对手太优秀,所以他也必须进步 2.什么是api? 从文件操作开始谈API. 以C语言为例 ...

  4. vue3与vue2的区别

    全局属性 vue2 对于一些第三方插件,vue2中通常使用prototype原型来挂载到vue对象中 import Vue from 'vue' Vue.prototype.$http=Axiox V ...

  5. vue3 到底哪里好？看这一篇就够了

    之前写的关于 vue3 的文章,好多人吐槽:这些API每次使用都要引入一遍,感觉有点麻烦. 今天我们就来看看 vue3 相比 vue2 的优点有些啥? 为啥有些人说:自从写了 ts vue3 再也回不 ...

  6. 谈谈 Vue 模板和 JSX

    工具链 从学习曲线角度来讲,结合我个人体会,React 学习路线是比 Vue 陡峭的,这个和 JSX.Template 有关吗?当然有.在 React 中使用 JSX,众所周知, JSX 需要经过 T ...

  7. 前端经典面试题vue面试题

    1.什么是MVVM? MVVM是一种设计思想. Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表UI 组件,它负责将数据模型转化成UI 展现出来,View ...

  8. 简单对比vue2.x与vue3.x响应式及新功能

    简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...

  9. vue3 区别于 vue2 的“与众不同”

    希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3.除此之外,也希望路过的朋友可以帮助我查漏补缺.   区别 生命周期的变化 整体来看,变化不大,只是名字大部分需要 + on ...

随机推荐

  1. spring boot 实现多个 interceptor 并指定顺序

    首先我们创建Interceptor,实现HandlerInterceptor覆写方法:一.下面我创建了三个拦截器:MyInterceptor,UserInterceptor,StudentInterc ...

  2. MongoDB Wiredtiger存储引擎实现原理

    Mongodb-3.2已经WiredTiger设置为了默认的存储引擎,最近通过阅读wiredtiger源代码(在不了解其内部实现的情况下,读代码难度相当大,代码量太大,强烈建议官方多出些介绍文章),理 ...

  3. YII框架的类自动加载机制

    YII之所以能实现快速的自动加载类文件,是因为它通过两种途径来实现. 先看文件 vendor\yiisoft\yii2\BaseYii.php 里面的 autoload 方法 public stati ...

  4. 3、Web server 之httpd2.2 配置说明

    http协议实现的程序 静态(httpd, nginx, lighttpd) 动态 (IIS, tomcat,  jetty,  jboss,  resin,  websphere, weblogic ...

  5. CF1174D Ehab and the Expected XOR Problem(二进制)

    做法 求出答案序列的异或前缀和\(sum_i\),\([l,r]\)子段异或和可表示为\(sum_r\bigoplus sum_{l-1}\) 故转换问题为,填\(sum\)数组,数组内的元素不为\( ...

  6. Spring Cloud Gateway（四）：路由定义定位器 RouteDefinitionLocator

    本文基于 spring cloud gateway 2.0.1 1.简介 RouteDefinitionLocator 是路由定义定位器的顶级接口,它的主要作用就是读取路由的配置信息(org.spri ...

  7. centos7使用yum提示有事物未完成的解决办法：

    错误提示: There are unfinished transactions remaining. You might consider running yum-complete-transacti ...

  8. 查看日志tail命令

    打开终端,连接jboss: 命令: tail -f -n 500 /var/log/wildfly/wrapper.log

  9. LUA upvalues

    1 upvalue概念 upvalue:嵌套函数的外部函数的局部变量 function func(a) <== 这个函数返回值是一个函数 return function () a = a + 1 ...

  10. Java 代码里乱打日志了，这才是正确的打日志姿势

    使用slf4j 使用门面模式的日志框架,有利于维护和各个类的日志处理方式统一. 实现方式统一使用: Logback框架 打日志的正确方式 什么时候应该打日志 当你遇到问题的时候,只能通过debug功能 ...