Vue中的computed属性
1、前言
本篇是Vue中最常用到的API之一computed屬性,轉(zhuǎn)載信息如下:
作者:gunelark
鏈接:https://www.cnblogs.com/gunelark/p/8492468.html
2、正文
看了網(wǎng)上很多資料,對vue的computed講解自己看的都不是很清晰,今天忙里抽閑,和同事們又閑聊起來,對computed這個屬性才有了一個稍微比較清晰的認(rèn)識,下面的文章有一部分是轉(zhuǎn)自: https://www.w3cplus.com/vue/vue-computed-intro.html --w3cplus.com
感覺這篇文章上面的例子通俗易懂,所以此處借用了。
自己的理解:
- computed用來監(jiān)控自己定義的變量,該變量不在data里面聲明,直接在computed里面定義,然后就可以在頁面上進行雙向數(shù)據(jù)綁定展示出結(jié)果或者用作其他處理;
- computed比較適合對多個變量或者對象進行處理后返回一個結(jié)果值,也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化,舉例:購物車?yán)锩娴纳唐妨斜砗涂偨痤~之間的關(guān)系,只要商品列表里面的商品數(shù)量發(fā)生變化,或減少或增多或刪除商品,總金額都應(yīng)該發(fā)生變化。這里的這個總金額使用computed屬性來進行計算是最好的選擇
與watch之間的區(qū)別:
剛開始總是傻傻分不清到底在什么時候使用watch,什么時候使用computed。這里大致說一下自己的理解:
- watch主要用于監(jiān)控vue實例的變化,它監(jiān)控的變量當(dāng)然必須在data里面聲明才可以,它可以監(jiān)控一個變量,也可以是一個對象,但是我們不能類似這樣監(jiān)控,比如:
????goodsList.price(newVal,oldVal){
????????//監(jiān)控商品列表中是商品價格
????}
}
這樣會報錯。只能監(jiān)控整個對象或單個變量,如下所示:
data(){return?{
example0:"",
example1:"",
example2:{
? inner0:1,?
?????????innner1:2?
?????}
}
},
watch:{
?example0(newVal,oldVal){//監(jiān)控單個變量
???????……
??},
??example2(newVal,oldVal){//監(jiān)控對象
???????……
??},
}
- watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等,它比較適合的場景是一個數(shù)據(jù)影響多個數(shù)據(jù)
以下內(nèi)容是摘自https://www.w3cplus.com/vue/vue-computed-intro.html w3cplus.com
計算屬性可用于快速計算視圖(View)中顯示的屬性。這些計算將被緩存,并且只在需要時更新。
在Vue中有多種方法為視圖設(shè)置值:
- 使用指令直接將數(shù)據(jù)值綁定到視圖
- 使用簡單的表達式對內(nèi)容進行簡單的轉(zhuǎn)換
- 使用過濾器對內(nèi)容進行簡單的轉(zhuǎn)換
除此之外,我們還可以使用計算屬性根據(jù)數(shù)據(jù)模型中的值或一組值來計算顯示值。
計算屬性
計算屬性允許我們對指定的視圖,復(fù)雜的值計算。這些值將綁定到依賴項值,只在需要時更新。
例如,我們可以在數(shù)據(jù)模型中有一個results數(shù)組:
假設(shè)我們想要查看所有主題的總數(shù)。我們不能使用filters或expressions來完成這個任務(wù)。
- filters:用于簡單的數(shù)據(jù)格式,在應(yīng)用程序的多個位置都需要它
- expressions:不允許使用流操作或其他復(fù)雜的邏輯。他們應(yīng)該保持簡單
這個時候,計算屬性就可以派上用場。我們可以向模型中添加一個計算值,如下:
效果如下:
計算屬性 VS 方法
我們可以使用Vue中的method計算出學(xué)科的總分,最終得到的總數(shù)結(jié)果是相同的。
在上例的基礎(chǔ)上,我們把computed區(qū)塊中的totalMarks函數(shù)整體移到methods中。同時在模板中將{{ totalMarks }} 替換成{{ totalMarks() }}。 你最終看到的結(jié)果是一樣的,如下所示:
雖然這兩種方式輸出的結(jié)果是相同的,但是性能將遭受毀滅性的打擊。使用這種方法totalMarks()方法在每次頁面渲染時都被執(zhí)行一次(例如,使用每一個change)。
如果我們有一個計算屬性,那么Vue會記住計算的屬性所依賴的值(在我們這個示例中,那就是results)。通過這樣做,Vue只有在依賴變化時才可以計算值。否則,將返回以前緩存的值。這也意味著只要results還沒有發(fā)生改變,多次訪問totalMark計算屬性會立即返回之前的計算結(jié)果,而不必再次執(zhí)行函數(shù)。
上面兩個示例也說明,在Vue中計算屬性是基于它們的依賴進行緩存的,而方法是不會基于它們的依賴進行緩存的。從而使用計算屬性要比方法性能更好。
這也同樣意味著下面的計算屬性將不再更新,因為Date.now()不是響應(yīng)式依賴:
相比之下,每當(dāng)觸發(fā)重新渲染時,方法的調(diào)用方式將總是再次執(zhí)行函數(shù)。因此,函數(shù)必須是一個純函數(shù)。它不能有副作用。輸出只能依賴于傳遞給函數(shù)的值。
那么我們?yōu)槭裁葱枰彺?#xff1f;假設(shè)我們有一個性能開銷比較大的的計算屬性A,它需要遍歷一個極大的數(shù)組和做大量的計算。然后我們可能有其他的計算屬性依賴于A。如果沒有緩存,我們將不可避免的多次執(zhí)行A的 getter!如果你不希望有緩存,請用方法來替代。
計算屬性的setter
計算屬性默認(rèn)只有getter,不過在需要時你也可以提供一個setter
效果如下:
你在輸入框中輸入一個fullName,然后點擊set按鈕,可以看到對應(yīng)的效果。你現(xiàn)在再運行app.fullName="Airen liao"時,計算屬性的setter會被調(diào)用,app.firstName和app.lastName也相應(yīng)地會被更新。如下圖所示:
觀察者:
雖然計算屬性在大多數(shù)情況下更合適,但有時候也需要一個自定義的watcher。這是為什么Vue通過watch選項提供一個更通用的方法,來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時,執(zhí)行異步操作或開銷較大的操作,這是很有用的。
Vue確實提供了一種更通用的方式來觀察和響應(yīng)Vue實例上的數(shù)據(jù)變動:watch屬性。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時,你很容易濫用watch。然而,通常更好的想法是使用計算屬性而不是命令式的watch回調(diào)。比如下面的示例:
上面代碼是命令式的和重復(fù)的。將它與計算屬性的版本進行比較:
我創(chuàng)建了一個用來記錄自己學(xué)習(xí)之路的公眾號,感興趣的小伙伴可以關(guān)注一下微信公眾號:niceyoo
總結(jié)
以上是生活随笔為你收集整理的Vue中的computed属性的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MSSQL DBA权限获取WEBSHEL
- 下一篇: 筛选染色体连续区域的策略