現代前端框架 例如Vue 為什麼選擇 資料劫持 實現資料雙向繫結

時間 2021-05-11 13:02:57

1樓:召伯樹

ko 通過 ko.observable 生成了乙個物件的 handle,然後通過這個 handle ,可以進行賦值/取值操作。這原理上與 vue 的 defineProperties 定義 getter/setter 並無區別。

只不過乙個是顯示轉化而乙個是隱式的。

顯然 vue 隱式的要好,用過 ko 的都知道,拿到乙個物件的時候,還要判斷其是原始屬性還是 ko 給的 handle 帶來了不少的心智負擔,但是用 vue 就不需要關心這些。

2樓:

大實話就是Vue由於是個人開發者維護的,上面說的那些髒檢查、資料模型之類的方法,成本太大(我指的是想做好的成本),尤雨溪乙個人應付不來。

Vue在國內的粉太多,不想被噴,匿了

3樓:Trotyl Yu

首先,其它回答裡已經解釋過了,髒檢查效能一點不差。

然後需要明確區分「得知發生變化的可能性」和「得知變化的內容」是兩個過程,並且每個過程的效能需要單獨考慮。

對於「得知發生變化的可能性」這個過程,幾乎所有框架都可能做到零成本:

Angular 中呼叫 markForCheck;

React 中呼叫 setState;

Vue 中呼叫 property setter;

如果在 Angular 中使用 Zone.js 的話(不是必須但目前是主流),由於需要攔截所有可能的 Scheduler,會增加應用啟動時間,但對執行過程影響不大(但增加了額外的呼叫棧也不是零成本)。

另乙個步驟是「得知變化的內容」,從機制上,Angular 和 React 由於並不直接處理資料來源,只知道發生了(可能的)變化,並不知道變化的內容,而 Vue 由於劫持了訪問器能夠知道變化內容。

但是,事實上框架需要應對「結構變化」和「非結構變化」,結構變化的情況下(除非對資料來源新增額外限制),例如乙個陣列變成了另外乙個陣列(攔截到了也沒用),大家都得老老實實 Diff 沒有什麼捷徑可走,效能差異也就很大程度上取決於 Diff 演算法。換句話說,如果應用有支援資料來源整體替換的需求,那這部分效能依然和上面的方式都什麼沒關係,而這部分場景也確實是很多應用中的瓶頸所在。

在「非結構變化」部分,上面的方式差異才會體現出來,需要注意的是,訪問器劫持(換成 Proxy 也一樣)也和 Zone.js 一樣會增加額外的呼叫棧,並且函式呼叫完全不是零成本的,增加額外的函式呼叫和增加額外的比較運算誰的開銷更大要看具體實現和使用場景,也就是跑 Benchmark 才能知道。

不過從發展規律上來說,如果使用 Proxy 的話在 JS 引擎層面可能還存在優化的可能性,在淘汰了老舊瀏覽器之後可能會是正確的發展方向。

4樓:汪志成

髒檢查效能並不捉急,AngularJS 1.x 的髒檢查有時候效能捉急是因為它採用了「多輪檢查,直到穩定」的方式,其主要實現是乙個三重迴圈。

而 Angular 2+重寫了髒檢查演算法,大多數場景下效能已經和原生相差無幾了。

話又說回來,就算是 AngularJS 1.x 應用的效能只要設計合理也根本不慢,Google 的雲平台 GCE 控制台就是用 AngularJS 1.x 寫的,慢嗎?

一點都不慢。

5樓:太狼

Angular 2+ 有兩種模式,髒檢查和觀察者兩種模式,相對而言觀察者模式效能略高一點但差距不大(髒檢查一點都不慢)。React 就不用說了,跟 Proxy / defineProperty 完全不相關。

Vue 使用 Proxy 的這種方式好處就是通過資料驅動檢視的時候不需要顯式的使用框架提供的方法來「通知」框架重新整理檢視,比如 React 的 setState 和 Angular 的 changeDetection.markForCheck,並且可以在操作 DOM 之前做一些 batch update 的優化之類的。

如果用髒檢查想達到同樣的效果的話,就得像 Angular 2+ 裡面的 zone.js 那樣 hack 整個瀏覽器了,這樣的做的代價太大了。

為什麼基於vue的框架都不使用原生HTML標籤?

羅志華 不僅僅是vue,react和angular大部分是自定義的標籤和classname,現在都什麼年代了,為什麼還不知道自定義標籤怎麼改? 南瓜馬車 因為是人家自定義的標籤。建議學習一下vue的自定義元件,這樣就能明白為什麼vue的元件不能更改了。你不能給類名,本質上是自定義元件並沒有留給你類名...

為什麼前端框架 react vue 裡會出現生命週期的說法?

生命週期 只是為了方便描述乙個東西的出現與消失,這是乙個概念的東西。或者這麼說,只要是執行的程式,程式裡的萬物都活在它的生命週期裡。 這個概念來自於OOP。乙個物件從被建立到銷毀必然經歷多個狀態,在對應狀態裡做該做的事,這就是生命週期。這玩意在其他地方十年前就玩爛了。 緋一 生命週期對於框架的開發者...

為什麼前端這麼多看過vue原始碼而看過react原始碼的少呢?

平平無奇古哥哥 一是因為國內絕大多數中小公司使用的都是vue,會vue的人數要遠遠多於會react的人數。二是vue的原始碼和vue的api幾乎是對應的,原始碼的實現基本就是照著vue的功能和api對比著來的,比較容易理清楚原始碼的流程和需求。而react並不是這樣的,react有幾個核心包 rea...