响应式优化。 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. kunkun

    <html> <head> <title>cxk</title> </head> <body><h1>给设计师:字体 ...

  2. 前端本地实现分页，利用了antd的分页和数组的切片

    html的结构 <a-pagination v-bind="pagination" @change="updatePage" @showSizeChang ...

  3. Ubuntu超方便安装显卡驱动的秘籍！不用命令行！！

    搭集群最烦的就是,显卡驱动和CUDA的问题,此前我都是命令行装的,直到,凯东哥教了我一个非常方便.傻瓜的方法,我以后再用命令行装我就是狗!! 非常的简单!在Setting里找到software &am ...

  4. go-使用 vscore 调试 go 语言

    { // 使用 IntelliSense 了解相关属性. // 悬停以查看现有属性的描述. // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linki ...

  5. Angular中播放RTSP

    要使用这个库需要先安装 我使用了npm来安装 https://www.npmjs.com/package/webrtc-streamer 需要启动webrtc-streamer后端,这里有下载地址 h ...

  6. 01java大数据开发_Linux安装

    大数据开发01--linux环境安装配置 1.1软件包和资料 需要安装:VMware.CentOs6.5.Xfth5.Xshell5.Xmind: 需要可加V:zhanjiquan666: 安装注意点 ...

  7. 第一次写，python爬虫图片，操作excel。

    第一次写博客,其实老早就注册博客园了,有写博客的想法,就是没有行动,总是学了忘,忘了丢,最后啥都没有,电脑里零零散散,东找找,西看看,今天认识到写博客的重要性. 最近闲着看了潭州教育的在线直播课程,颇 ...

  8. alpine镜像安装sshd以进行远程debug

    FROM alpine:latest RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories ...

  9. 没解决的问题-git连接失败

    [parallels@localhost ~]$ ssh-keygen -t rsa -C '1012144290@qq.com'Generating public/private rsa key p ...

  10. windows环境下部署项目

    有些时候,我们的项目不得不用windows服务器部署,但是需要注意的是,windows服务是无法开启多进程处理请求的. 本文介绍如何在windows上部署flask项目,应用 apache + mod ...