Vue.js 3.0 響應式 API 比 2.x 好在哪兒?

Hello,各位小伙伴,接下來的一段時間里,我會把我的課程《Vue.js 3.0 核心源碼解析》中問題的答案陸續在我的公眾號發布,由于課程的問題大多數都是開放性的問題,所以我的答案也不一定是標準的,僅供你參考喔。

本期的問題:為什么說 Vue.js 3 的響應式 API 實現和 Vue.js 2.x 相比性能要好,具體好在哪里呢?它又有哪些不足呢?

響應式實現方式

響應式原理是 Vue.js 的核心思想之一,它的本質是當數據變化后會自動執行某個函數。

響應式的實現基本都是靠數據劫持,在 Vue.js 2.x 中,是通過 Object.defineProperty API 劫持數據的變化,在數據被訪問的時候收集依賴,然后在數據被修改的時候通知依賴更新。

而到了 Vue.js 3.0,作者使用 Proxy API 來劫持數據,并重寫了響應式部分。

Proxy VS Object.defineProperty

那么,ProxyObject.defineProperty 有哪些區別呢?

從 API 上來看,Proxy 劫持的是整個對象,那么對于對象屬性的新增、刪除、修改自然都可以劫持到;而Object.defineProperty API 劫持的對象某一個屬性的訪問和修改,因此它不能監聽對象屬性新增和刪除。

從兼容性上來看,Object.defineProperty 支持所有主流瀏覽器,并兼容 IE9+,而 Proxy 支持現代主流瀏覽器,但唯獨不支持 IE,在國內 PC 端還沒有完全放棄 IE 的大環境下,導致 Vue.js 3.0 的普及受到限制。

從性能上看,ProxyObject.defineProperty 要慢。沒錯,是慢喔,為了測試它們的性能差異,我特地寫了一個測試 demo,放在了 GitHub 上 https://github.com/ustbhuangyi/Proxy-vs-DefineProperty,感興趣的同學可以 clone 下來跑一下。

性能差異

既然 ProxyObject.defineProperty 慢,那么為何說 Vue.js 3.0 的響應式 API 實現和 Vue.js 2.x 相比性能要好呢?

其實這個性能好主要體現在初始化階段。Vue.js 2.x 內部把某個對象變成響應式的時候,如果遇到對象的某個屬性的值仍然是對象的時候,會遞歸把子對象也變成響應式。

到了 Vue.js 3.0,并不會在初始階段遞歸響應式,而是在對象屬性被訪問的時候才遞歸執行下一步 reactive,這其實是一種延時定義子對象響應式的實現,在性能上會有較大的提升。

說到延時響應式,那么 Vue.js 2.x 也可以這么做嗎,其實也是可以的,我對 Vue.js 2.x 的響應式源碼部分做了修改,如下:

??Object.defineProperty(obj,?key,?{enumerable:?true,configurable:?true,get:?function?reactiveGetter()?{const?value?=?getter???getter.call(obj)?:?vallet?childOb?=?!shallow?&&?observe(value)if?(Dep.target)?{dep.depend()if?(childOb)?{childOb.dep.depend()if?(Array.isArray(value))?{dependArray(value)}}}return?value}//?...})

改動很簡單,就是把遞歸的 observe 放在了 getter 中執行。

改完后我跑了一下?Vue.js 的單元測試,發現只有幾個測試沒通過,但沒通過的測試用例是因為我們改動的邏輯影響了這些測試用例原本的含義,但實際上并無本質的影響,因此在 Vue.js 2.x 中,把遞歸響應式的邏輯放在 getter 中也是可行的。

到這里你可能會問,如果延時響應式,那會不會每次訪問數據的時候都要重新定義一次響應式呢,其實是不用的,在 Vue.js 2.x 中,在執行一次 observe 后,會把觀察者對象 ob 保留在 value.__ob__ 屬性中;而在 Vue.js 3.0 中,會用 reactiveMap 保留已定義的響應式對象,這樣下一次就直接從緩存里拿到對應的值了,這就是典型的空間換時間的思想。

總結

所以就響應式的實現而言,Vue.js 3.0 比 Vue.js 2.x 在性能上的優勢主要體現在初始化階段,不需要遞歸把子對象定義成響應式。而 Proxy 本身并不比 Object.defineProperty 快,好處是在于可以直接對整個對象劫持,包括對象屬性的新增和刪除,劣勢就是瀏覽器的兼容性不夠好,而且沒有合適的 polyfill。

我出這個題主要是希望你能做到以下兩點:

  1. 從源碼層面探索,了解 Vue.js 響應式的實現原理。

  2. 對比 Vue.js 2.x 和 Vue.js 3.0 在響應式實現上的差異。

要記住,分析和思考的過程遠比答案重要。


最近組建了一個江西人的前端交流群,如果你也是江西人可以加我微信ruochuan12 拉你進群。


你好,我是若川,江西人~(點擊藍字了解我)歷時一年只寫了一個學習源碼整體架構系列?有哪些必看的JS庫:jQuery、underscore、lodash、sentry、vuex、axios、koa、redux

  1. 關注若川視野,回復"pdf" 領取優質前端書籍pdf,回復"1",可加群長期交流學習

  2. 我的博客地址:https://lxchuan12.gitee.io?歡迎收藏

  3. 覺得文章不錯,可以?分享、點贊、在看?呀^_^另外歡迎留言交流~

小提醒:若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕,歡迎點擊閱讀,也可以星標我的公眾號,便于查找

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276166.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276166.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276166.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

招聘.NET程序員

人才難找啊,順便發個招聘啟事。 西安瀚博科技有限公司招聘.NET程序員,有工作經驗者優先 如有意向,請發郵件到 slzhanghiweb.cn 轉載于:https://www.cnblogs.com/shengli/archive/2010/03/08/1680861.html

xml解析類

轉載鏈接:http://zyan.cc/post/253 今天在PHP4環境下重新寫一個接口程序,需要大量分析解析XML,PHP的xml_parse_into_struct()函數不能直接生成便于使用的數組,而SimpleXML擴展在PHP5中才支持,于是逛逛搜索引擎&#x…

jmeter學習指南之聚合報告

jmeter視頻地址:https://edu.51cto.com/course/14305.html 上一篇文章中我們講了Jmeter結果分析最常用的一個Listener查看結果樹,今天接著講另一個最常用的listener--聚合報告Aggregate Report。我們先來看看聚合報告中的主要名稱的含意:Labe…

敏捷開發概述

敏捷方法強調適應性而非預見性。 目前列入敏捷方法的有: 軟件開發節奏,Software Development Rhythms 敏捷數據庫技術,AD/Agile Database Techniques 敏捷建模,AM/Agile Modeling 自適應軟件開發,ASD/Adaptive Softwar…

2021 整理的最全學習資源,送給每一個努力著的人

時間來到了 2021 年,新的一年有新的期待,而我亦有新的祝福如果說在過去的一年,經歷太多,心酸、迷茫、焦慮、幸福、喜悅那么在 2021 年,希望你可以去過一種遇見自己的生活,恬淡、熱情,喜歡自己而…

ubuntu+php環境下的Memcached 安裝方法

轉載鏈接:http://www.jb51.net/article/28887.htm Memcached是一套分散式的高速緩存系統,當初是Danga Interactive為了LiveJournal所發展。 目前被很多系統所使用,例如Flick、Twitter等。這是一套開放源代碼軟件,以BSD license授…

php移動簽批源碼_PHP讓網站移動訪問更加友好方法

PHP都是在服務器上處理的,所以當代碼到達用戶時,它只是HTML。基本上,用戶從你的服務器請求你網站的一個頁面,然后你的服務器運行所有的PHP并向用戶發送PHP的結果。設備實際上從未看到或必須使用實際的PHP代碼。這使得使用PHP完成的…

Chrome OS 設備或將允許用戶自行選擇 Linux 發行版

百度智能云 云生態狂歡季 熱門云產品1折起>>> 谷歌去年宣布在 Chrome OS 上支持運行 Linux 應用,前不久又有消息稱其將為運行這些 Linux 應用提供 GPU 加速支持,而現在,Chrome OS 似乎將在 Linux 的方向上更進一步,讓 …

博文視點 OpenParty第11期:世界黑客大會那些事

博文視點 OpenParty第11期:世界黑客大會那些事 親愛的讀者朋友: 您好! 2009年,博文視點Open Party共舉辦8場,累計到場2000人次,影響力輻射近5000人次,真正實現了博文視點Open Party的初…

我從 Vuejs 中學到了什么——框架設計學問

框架設計遠沒有大家想的那么簡單,并不是說只把功能開發完成,能用就算完事兒了,這里面還是有很多學問的。比如說,我們的框架應該給用戶提供哪些構建產物?產物的模塊格式如何?當用戶沒有以預期的方式使用框架…

CSS制作的32種圖形效果[梯形|三角|橢圓|平行四邊形|菱形|四分之一圓|旗幟]

轉載鏈接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在《純CSS制作的圖形效果》一文中介紹了十六種CSS畫各種不同圖形的方法。今天花了點時間將這方面的制作成一份清單,方便大家急用時有地方可查。別的不多說了,直接看代…

vue-cli新建的項目webpack設置涉及的大部分插件整理

portfinder 用來檢測未占用的端口更多看這里: https://www.npmjs.com/package/portfinder webpack-merge 用來合并多個webpack設置,也可以合并對象更多看這里: https://www.npmjs.com/package/friendly-errors-webpack-plugin html-webpack-plugin 將html復制并插入…

yaml加配置文件后起不來_YAML配置文件管理資源

YAML是配置文件的格式,YAML文件中是由一些易讀的字段和指令組成的。K8S使用YAML配置文件需要注意如下事項。定義配置時,指定最新穩定版API(當前最新穩定版是v1版本)。最新版本的API可以通過kubectl api-versions命令進行查看,命令如下所示。前…

html5/css3響應式布局介紹

轉載鏈接:http://www.51xuediannao.com/htmlcss/htmlcssjq/694.html html5/css3響應式布局介紹 html5/css3響應式布局介紹及設計流程,利用css3的media query媒體查詢功能。移動終端一般都是對css3支持比較好的高級瀏覽器不需要考慮響應式布局的媒體查詢…

人際關系十大要訣

【一表人才】 所謂“一表人才”,就是說當你與陌生人第一次見面時給對方留下的第一印象,我們都知道第一印象很重要,要給對方留下好的印象,特別是要讓對方在最短的時間記住你。那么我們自身的儀表、行為舉止都很重要;我們…

MobX 上手指南,寫 Vue 的感覺?

之前用 Redux 比較多,一直聽說 Mobx 能讓你體驗到在 React 里面寫 Vue 的感覺,今天打算嘗試下 Mobx 是不是真的有寫 Vue 的感覺。題外話在介紹 MobX 的用法之前,先說點題外話,我們可以看一下 MobX 的中文簡介。在 MobX 的中文網站…

ansible中yaml語法應用

4、yaml語法應用 ansible的playbook編寫是yaml語言編寫,掌握yaml語法是編寫playbook的必要條件,格式要求和Python相似,具體教程參考如下yaml語言教程 附上一個yaml文件轉js格式文件鏈接在線免費yaml內容轉json格式 4.1、 ansible中的yaml語法…

中興a2018拆機圖片_中興天機拆機步驟詳解【圖文】

中興天機上市時有兩款,黑色和白色。黑色的缺點是外觀過于傳統,并不是很適合年輕人使用,但是其推出白色款卻很好的解決了這個問題。中興天機的整體性質與性價比完美的拼過了 小米 3等同時上線的手機產品。中興天機價格在1799左右,小…

網絡視頻貼片廣告全面推行第三方監測

視頻網站優酷與國際調研機構尼爾森聯合對外宣布:針對優酷視頻貼片廣告全面推行第三方監測。這是視頻行業首次倡導廣告投放數據透明化的一大舉措。  近年來,網絡視頻已經成為廣告主營銷的一大選擇。隨著廣告主投放額度不斷加大,廣告主對視頻…

css3動畫事件—webkitAnimationEnd

轉載鏈接:http://www.jb51.net/css/72443.html 用css3的animation完成一個動畫,當只有這個動畫完成時才執行令一個事件,比如讓動畫保持在終止的狀態或其他一些事件。我們該怎么辦呢。 第一種方法: 用計時器,設定一個…