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. perfectpixel 加载PSD图到网页中和已经写好的网页进行对比

    perfectpixel  这是火狐的插件: 用途:加载设计图,和 已经编写好的网页进行对比,看是否完美还原. 谷歌也有类似的插件,但是无法下载.

  2. win32按钮

    1.按钮是什么 在win32窗口中,经常可以看到按钮,点击按钮可以触发各种事件:   创建按钮的函数: void CreateButton(HWND hwnd) //参数为父窗口句柄,按钮必须属于一个 ...

  3. PostgreSQL 时间函数 extract函数

    计算时间差天数 select extract(day FROM (age('2017-12-10'::date , '2017-12-01'::date)));   计算时间差秒数 select ex ...

  4. NetworkX系列教程(7)-对graph进行分析

    小书匠Graph图论 graph构建完成后,对graph的连通等属性进行分析. 目录: 8.对图进行分析 8.1连通子图 8.2弱联通 8.3强连通 8.4子图 8.5条件过滤 注意:如果代码出现找不 ...

  5. Java基础系列 - HashMap

    package com.test3; import java.util.ArrayList; import java.util.HashMap; import java.util.List; impo ...

  6. Tkinter 之Text文本框标签

    一.参数说明 语法 作用 t=tk.Text()t.insert(END,'插入的文本信息') INSERT:光标的插入点CURRENT:鼠标的当前位置所对应的字符位置END:这个Textbuffer ...

  7. mapper @Select()注解开发，使用模板 if 和循环

    if @Select({"<script>", "SELECT " + " mu.id userId, " + " e ...

  8. 2018-2019-2 网络对抗技术 20165231 Exp9 Web安全基础

    实验内容 本实践的目标理解常用网络攻击技术的基本原理,做不少于7个题目,共3.5分.包括(SQL,XSS,CSRF).Webgoat实践下相关实验. 实验过程 WebGoat: Webgoat是OWA ...

  9. [GitHub]纪华裕的GitHub收藏

    由于GitHub的star没有分类功能在此写下我的收藏. JS nodenodejs的仓库 puppeteer一个用户测试的无头浏览器 moment日期操作库,包括格式化等

  10. 虚拟机VMware安装及Linux系统基础配置(CentOS 7)

    PS: 我是 VMware 14 安装 CentOS 7 来配置Linux虚拟机,想要安装 Ubuntu 18.04 的可以自行其他搜或者参考博客:https://blog.csdn.net/gith ...