响应式优化。 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. centos 7 删除乱码文件

    1.通过ls -li 获取要删除乱码文件名文件的inode号,比如得到的是 33575029 2.通过以下命令删除文件:find ./ -inum 33575029 -exec rm -rf {} \ ...

  2. ubuntu18.04 安装 opencv(版本4.5.5) cmake(版本3.25)

    参考链接:安装cmake     https://blog.csdn.net/Man_1man/article/details/126467371   安装 opencv  https://blog. ...

  3. 提高NTC测温精度(转发）

    (一)一般精度要求:采样数据的获取,直接采用恒流源(或恒压源)上拉方式.见图(2)所示.  原理:将恒流源(或恒压源)直接作用于NTC热敏电阻Rt上,当被测对象的温度发生变化,NTC热敏电阻的阻值Rt ...

  4. docker 搭建minio

    minio为开源的高可用分部署对象存储服务组件,已经提供了分布式部署的解决方案,实现高可靠.高可用的资源存储,MinIO以极简主义为指导进行设计,追求极致的维护精简性和卓越的读写性能表现. -dock ...

  5. Pytorch实战学习（一）：用Pytorch实现线性回归

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili P5--用Pytorch实现线性回归 建立模型四大步骤 一.Prepare dataset mini-batch:x.y ...

  6. Jmeter：随机类函数

    一.__Random 功能介绍:计算范围内的随机数 ${__Random(参数 1,参数 2,参数 3)} 参数 1:开始数字,包括在内 参数 2:结束数字,包括在内 参数 3:注册变量名称  二._ ...

  7. nginx 反向代理 (websocket)后报 - 400 bad request

    nginx的反向代理. nginx.conf中的配置如下: location / {        proxy_http_version                1.1;         pro ...

  8. java轻量级锁、重量级锁、可重入锁、偏向锁、自旋锁的概念

    1.重量级锁 作为互斥同步的方式,是最基础的锁,其他的锁都是为了减少开销做的优化,重量级锁借助了monitor 对象,monitor对象中有三个区域,分别是entity site. owner和wai ...

  9. H3C交换机基本操作

    Console口登录配置 1.无认证登录console <H3C>system-view [H3C]user-interface aux 0 // 进入AUX用户界面 [H3C-line- ...

  10. python 操作 ES 一、基础操作

    示例代码环境 python:3.8 es:7.8.0环境安装 pip install elasticsearch==7.8.0 from elasticsearch import Elasticsea ...