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

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

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

1. 代碼示例:

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

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

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

3. 分析結(jié)論

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

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

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

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

相關(guān)文章

vue總結(jié)

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

Youngs 2019-08-23 18:38 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

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

Tecode 2019-08-23 16:02 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

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

APICloud 2019-08-02 14:34 評(píng)論0 收藏0
淺談MVC,MVP,MVVM漸進(jìn)變化及React與Vue比較

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

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

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

李昌杰 2019-08-26 10:58 評(píng)論0 收藏0