响应式优化。 a. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。 Vue2.x 中的响应式实现正是基于 defineProperty 中的 descriptor，对 data 中的属性做了遍 历 + 递归，为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因，在 Vue 中使用 下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监 听的，这是 defineProperty 的局限性。 b. Proxy API 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这 就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须 先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。 c. 响应式是惰性的 在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要 递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这 无疑会有很大的性能消耗。 在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的 处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响 应式，简单的可以说是按需实现响应式，减少性能消耗。 基础用法

Vue3.0 里为什么要用 Proxy API 替代 defineProperty API？的更多相关文章

  1. vue3.0里的生命周期函数

  2. Vue3.0响应式原理

    Vue3.0的响应式基于Proxy实现.具体代码如下: 1 let targetMap = new WeakMap() 2 let effectStack = [] //存储副作用 3 4 const ...

  3. Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composit ...

  4. vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面, ...

  5. Vue3.0 响应式数据原理：ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  6. vue3.0 composition API

    一.Setup函数 1.创建时间:组件创建之前被调用,优先与created被调用,this指向的实例为window,created所指向的实例为proxy 2.this指向:不会指向组件实例 3.参数 ...

  7. 基于 Vue3.0 Composition Api 快速构建实战项目

    Quick Start 项目源码:https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性,适合新手学习

  8. 预计2019年发布的Vue3.0到底有什么不一样的地方？

    摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...

  9. vue3.0和2.0的区别，Vue-cli3.0于 8月11日正式发布，更快、更小、更易维护、更易于原生、让开发者更轻松

    vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快.更小. ...

  10. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

随机推荐

  1. Visualization: Pie Chart(可视化：饼图)

    1 <html> 2 <head> 3 <script type="text/javascript" src="https://www.gs ...

  2. CTreeView和CTreeCtrl的使用方法（转）

    (一)树控制的主要功能 树控制和视(Tree Control&View)主要用来显示具有一定层次结构的数据项,如资源管理器中的磁盘目录等,以供用户在其中进行各种选择.树控制中的每个数据项包括数 ...

  3. scp 和 rsync

    scp 和 rsync指令的区别 相同点两者都可以被用来进行数据同步 不同点 : 对于scp来讲 是全量复制 以当前主机为准 将相同的文件拷贝到另一台机器上 rsync 可以识别增量的内容,可以仅仅对 ...

  4. wireguard 在openwrt中的配置

    按照网上教程正常配置,防火墙通信规则中,选择打开监听端口,目标设备:设备(输入),目标端口:监听端口. 客户端设置:注意路由器的IP地址(段)要填0.0.0.0/0.

  5. [737] Interlude OpCodez

    [737] Interlude Client 00 SendProtocolVersion 01 MoveBackwardToLocation 02 Say 03 RequestEnterWorld ...

  6. 使用EmguCV3.0.0调用摄像头并设置帧率

    此教程使用emgu3.0.0,其他版本兼容性未知. 转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/open-camera-with-emgu3_0_0.ht ...

  7. Jmeter学习：常用内置函数

    常用函数一:  常用函数二: __counter 功能介绍: 生成一个计数器变量,每次使用的时候+1 __counter(false,gseq)表示所有线程共用,所有线程及迭代共享计数. __coun ...

  8. es的核心原理 （一）

    搜索引擎 搜索引擎的分类 全文搜索:谷歌.百度.必应:这种搜索过程到底搜索啥,不知道,有可能是个帖子,也有可能是个门户网站 垂直搜索:视频网站.各大电商:这种搜索内容是固定的,比如在懂车帝,你搜索的一 ...

  9. python 中的lamda 表达式

      #1. print(list(filter(lambda x: x%2,range(10))))    #[1, 3, 5, 7, 9]# 非lamda表示def odd(x): return x ...

  10. 调度器46—tick模式

    一.tick简介 tick就是一个周期性的中断,周期通过 CONFIG_HZ 进行配置,一般常取值为100Hz.250Hz.1000Hz.Tick 每秒窃取CPU 100 到 1000 次,导致Ica ...