细说 Vue.js 3.2 关于响应式部分的优化
译过来就是 ref
API 的读效率提升约为 260%
,写效率提升约为 50%
,依赖收集的效率提升约为 40%
,同时还减少了约 17%
的内存使用。
这简直就是一个吊炸天的优化啊,因为要知道响应式系统是 Vue.js 的核心实现之一,对它的优化就意味着对所有使用 Vue.js 开发的 App 的性能优化。
而且这个优化并不是 Vue 官方人员实现的,而是社区一位大佬 @basvanmeurs 提出的,相关的优化代码在 2020 年 10 月 9 号就已经提交了,但由于对内部的实现改动较大,官方一直等到了 Vue.js 3.2 发布,才把代码合入。
这次 basvanmeurs 提出的响应式性能优化真的让尤大喜出望外,不仅仅是大大提升了 Vue 3 的运行时性能,还因为这么核心的代码能来自社区的贡献,这就意味着 Vue 3 受到越来越多的人关注;一些能力强的开发人员参与到核心代码的贡献,可以让 Vue 3 走的更远更好。
我们知道,相比于 Vue 2,Vue 3 做了多方面的优化,其中一部分是数据响应式的实现由 Object.defineProperty
API 改成了 Proxy
API。
相关推荐
-
我从 Vuejs 中学到了什么
原创 HcySunYang HcySunYang 1周前 框架设计远没有大家想的那么简单,并不是说只把功能开发完成,能用就算完事儿了,这里面还是有很多学问的.比如说,我们的框架应该给用户提供哪些构建产 ...
-
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
-
基于 VUE 技术栈的大前端三层架构简略
这里讲的架构,不是指一个项目的架构,而是指一个公司.一个团队所有整体项目的架构. 共分为上下三层: 项目层(包括具体的项目ABC,与公司业务密切相关) 组件层(包括 DAL 库及可复用UI组件库,与公 ...
-
揭秘 Vue.js 九个性能优化技巧
这篇文章主要参考了 Vue.js 核心成员 Guillaume Chau 在 19 年美国的 Vue conf 分享的主题:9 Performance secrets revealed,分享中提到了九 ...
-
手把手带你入门前端工程化——超详细教程
本文将分成以下 7 个小节: 技术选型 统一规范 测试 部署 监控 性能优化 重构 部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在github上.这个 ...
-
Vue3教程,抢先学习
Vue 3尚未正式发布,但是维护者已经发布了Beta版本,供我们的参与者尝试并提供反馈. 如果你想知道Vue 3的主要功能和主要变化是什么,那么我将在这篇文章中重点介绍一下,告诉你使用Vue 3 be ...
-
Deno 正式发布几天了哦,彻底弄明白它和 node 的区别
前言 Deno 已经正式发布了! 我说这句话时候,是不是很多前端 和 NodeJS 工(码)程(农)师已经按不住自己的40米大刀了.心中的不仅感慨前端是真的会造轮子,有了 node 还不够吗,还没学会 ...
-
vue解决跨域问题
当下流行的前后端分离项目,常遇跨域问题,现从两点,解决跨域问题 1.跨域本质:由于浏览器的同源策略 同源策略本是浏览器最基本的安全功能,是为了防止从一个域上加载另一个域上的信息,举个例子:A有一个百宝 ...
-
干货|图解 Vue 响应式原理
Vue 初始化 模板渲染 组件渲染 本文 Vue 源码版本:2.6.11,为了便于理解,均有所删减. 本文将从以下两个方面进行探索: 从 Vue 初始化,到首次渲染生成 DOM 的流程. 从 Vue ...
-
一探 Vue 数据响应式原理
本文写于 2020 年 8 月 5 日 相信在很多新人第一次使用 Vue 这种框架的时候,就会被其修改数据便自动更新视图的操作所震撼. Vue 的文档中也这么写道: Vue 最独特的特性之一,是其非侵 ...
-
手摸手带你理解Vue响应式原理
前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它 ...
-
Vue响应式系统如何操作运用?本文详解
前言 之前学习 vue 的时候,一直没刨根问底过.在看到网上这类文章比较多,参差不齐的质量有时候看的一头雾水.当然也有不错的文章,但是终究是别人的理解.于是写一篇关于自己的理解记录下来,亲身实践才能收 ...
-
【web前端】数据响应式
WEB前端开发社区 昨天 1.概念 数据响应式,可以说是一套能够侦测到数据变化,从而可以根据这个变化做一些跟变化数据相关处理的机制.比如有一个数据 var obj={a:3,b:6} obj.a 值改 ...
-
7个实用的 Vue.js 工具和库
前端技术优选 昨天 以下文章来源于前端迷社区 ,作者小迷妹 大家好,我是为前端娱乐圈操碎了心的小迷妹,正宗前端开发一枚,每天推荐一个小工具/源码,装满你的收藏夹,每天分享一个小技巧,让你轻松节省开发效 ...
-
vue.js的安装
公司要开始分配给我做前后端分离项目了555555555555 让我一个java的去了解vue并且还要会搭建=-= 莫得办法那么就开始必不可少的安装环节吧: 第一步! 安装node.js: 首先进入官网 ...
-
[css] 第102天 你是如何规划响应式布局的?
今日试题: 你是如何规划响应式布局的? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我每天多次反省自己). 前端面试每日3+ ...
-
[css] 第71天 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢?
今日试题: 你对响应式设计的理解是什么?知道它基本的原理是吗?要想兼容低版本的IE怎么做呢? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身 ...