vue計算屬性與方法調(diào)用性能對比

jifei 發(fā)布于2019-08-23 16:19 / 3338人閱讀

摘要：代碼示例計算屬性調(diào)用方法執(zhí)行結(jié)果初始結(jié)果或改變之后的執(zhí)行結(jié)果改變之后的執(zhí)行結(jié)果分析結(jié)論在使用進行開發(fā)的過程中，經(jīng)常會遇到動態(tài)計算屬性值的場景，使用調(diào)用方法能達到同樣的目的，但效率不及，原因在于每當(dāng)綁定在上的值發(fā)生變化時，都會調(diào)用一次方

1. 代碼示例:

2. 執(zhí)行結(jié)果
(1) 初始結(jié)果

(2) firstName或lastName改變之后的執(zhí)行結(jié)果

(3) age改變之后的執(zhí)行結(jié)果

3. 分析結(jié)論

在使用vue進行開發(fā)的過程中，經(jīng)常會遇到computed動態(tài)計算屬性值的場景，使用{{}}調(diào)用方法(getName)能達到同樣的目的，但效率不及computed，原因在于每當(dāng)綁定在this上的值發(fā)生變化時，都會調(diào)用一次方法，而computed會緩存計算結(jié)果，只有當(dāng)其依賴的屬性值發(fā)生變化時才會重新計算，因此才會出現(xiàn)圖三的情況，當(dāng)年齡發(fā)生變化時，getName()方法被調(diào)用以輸入"getName invoked"，而name所依賴的firstName和lastName都沒有發(fā)生變化，所以name沒有重新計算，由此可見，computed的性能是要比方法調(diào)用高很多的。

云服務(wù)器 GPU云服務(wù)器 vue的計算屬性 vue實例屬性 vue.js 屬性高性能計算與云計算

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102909.html

相關(guān)文章

vue總結(jié)

摘要：用創(chuàng)建好的實例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。注冊一個全局守衛(wèi)。這和類似，區(qū)別是在導(dǎo)航被確認之前，同時在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用僅代表個人見解，能力有限，如有錯誤會誤人子弟的地方歡迎留言指出謝謝原文地址 vue(前端框架)解決了什么問題？現(xiàn)在的前端頁面元素越來越多，結(jié)構(gòu)也變得越來越復(fù)雜,當(dāng)數(shù)據(jù)和視圖混合在一起的時候?qū)λ鼈兊奶幚頃謴?fù)雜，同時也很容易出現(xiàn)錯...

Youngs 2019-08-23 18:38 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節(jié)點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
淺談MVC,MVP,MVVM漸進變化及React與Vue比較

摘要：將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫。此示例使用類似的語法，稱為。執(zhí)行更快，因為它在編譯為代碼后進行了優(yōu)化。基于的模板使得將已有的應(yīng)用逐步遷移到更為容易。前言因為沒有明確的界定,這里不討論正確與否,只表達個人對前端MV*架構(gòu)模式理解看法,再比較React和Vue兩種框架不同.寫完之后我知道這文章好水,特別是框架對比部分都是別人說爛的,而我也是打算把...

DrizzleX 2019-08-26 10:36 評論0 收藏0
Vue中的虛擬DOM及diff算法

摘要：的算法是基于的實現(xiàn)，并在些基礎(chǔ)上作了很多的調(diào)整和改進。此時和之間的是新增的，調(diào)用，把這些虛擬全部插進的后邊，可以認為新節(jié)點先遍歷完。虛擬dom 為什么出現(xiàn)：瀏覽器解析一個html大致分為五步：創(chuàng)建DOM tree –> 創(chuàng)建Style Rules -> 構(gòu)建Render tree -> 布局Layout –> 繪制Painting。每次對真實dom進行操作的時候，瀏覽器都會從構(gòu)建...

李昌杰 2019-08-26 10:58 評論0 收藏0