响应式优化。 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. div 拖动 js实现

    function dragFun(id) { var Drag = document.getElementById(id); Drag.onmousedown = function(event) { ...

  2. js 监听 变量变化

    var o = {};setTimeout(function () { o.abb = '2';}, 4000);Object.defineProperties(o, { abb: { configu ...

  3. AC和瘦AP组网

    ac和瘦ap组网 参考了这篇文章[Cisco Packet Tracer]WLC配置瘦AP指南_时间进行的小宇的博客-CSDN博客_思科瘦ap配置命令 服务器server-pt配置 先设置IP地址,随 ...

  4. C3861: “CoInitialize”“CoUninitialize”: 找不到标识符

    error C3861: "CoInitialize": 找不到标识符error C3861: "CoUninitialize": 找不到标识符 包含头文件和链 ...

  5. [iOS] iPhone，开发工具的一些杂项

    1.在safari的开发菜单里一直不显示我当前的iPhone,后来机缘巧合在 设置- 开发者 - Clear Trusted Computers ,重新信任电脑之后,就OK了(️)

  6. CCF 201909-2 小明种苹果（续）

    #include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...

  7. elastalert部署和使用

    一.Elastalert简介 Elastalert是Yelp公司基于python开发的ELK日志告警插件,Elastalert通过查询Elasticsearch中的记录与定于的告警规则进行对比,判断是 ...

  8. PyTorch之初级使用

    使用流程①. 数据准备; ②. 模型确立; ③. 损失函数确立; ④. 优化器确立; ⑤. 模型训练及保存 模块介绍Part Ⅰ: 数据准备torch.utils.data.Dataset torch ...

  9. Eclipse设置背景色等

    1.设置背景色 a.Window->Preferences->General->Editors->Text Editors b.选择Background color选择自定义颜 ...

  10. Razor视图cshtml做到运行时编译【提高开发效率】

    当你的.NET开发工具升级到.NET Core版本以上,就会发现有时候无法将视图界面做的修改可以直接保存后刷新输出,一般都需要重新热重载或重新编译,这样会导致开发效率过慢的行为,开发者无法直接直观地看 ...