vue計算屬性及函數(shù)的選擇
一、計算屬性
使用場景
從已有的數(shù)據(jù)A中計算等到的新的數(shù)據(jù)B,使用計算屬性。
如果一個結(jié)果需要依賴data
中的數(shù)據(jù),但是需要經(jīng)過一些邏輯處理,才能得到你想要的數(shù)據(jù)。此時就可以使用計算屬性。
定義格式
在vue實(shí)例中,補(bǔ)充computed
配置項
普通寫法
{ data(){}, methods: {} // 聲明計算屬性 computed: { //屬性名字(計算屬性名稱) //屬性的值(計算屬性處理函數(shù)) 計算屬性名1 () { // 對依賴的數(shù)據(jù)進(jìn)行處理,且進(jìn)行return return }, 計算屬性名2 () { // 對依賴的數(shù)據(jù)進(jìn)行處理,且進(jìn)行return return } } }
computed
是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù)。
- 屬性名稱: 計算屬性的名稱
- 屬性的值:計算屬性的素材函數(shù)
- 對需要依賴的數(shù)據(jù),進(jìn)行邏輯上的處理
- 處理完畢后,需要return出去,返回的值就是計算屬性的值
使用格式
在兩個地方使用:
- 模板
- 用插值表達(dá)式 {{計算屬性名}}
- 用其它指令
- 在實(shí)例內(nèi)
- this.計算屬性名
示例 —— 數(shù)組求和
<template> <div id="app"> <p>求和:{{ sum1 }}</p> </div> </template> <script> export default { data () { return { arr: [1,2,3,4] } }, computed: { sum1(){ // 對依賴的數(shù)據(jù)進(jìn)行處理,且進(jìn)行return return this.arr.reduce((sum, item)=>sum + item, 0) } } } </script>
在模板中使用計算屬性,和使用data
的方式是一樣的。
雖然在計算屬性中聲明的是函數(shù),但是在模板是使用,當(dāng)做的數(shù)據(jù)來使用。不需要加括號。
小結(jié):
- 什么時間用:需要對數(shù)據(jù)進(jìn)行復(fù)雜的邏輯加工,產(chǎn)生新的數(shù)據(jù)時。
- 定義: 就是一個特殊的配置項computed。其中有多個函數(shù)。
- 使用:計算屬性的使用方式與data中的數(shù)據(jù)項一致;
- 計算屬性-計算:這個值是對原數(shù)據(jù)進(jìn)行計算之后得到的新的數(shù)據(jù)
- 計算屬性-屬性:它的使用方法與原數(shù)據(jù)一樣。this.計算屬性名,{{計算屬性名}}
- 執(zhí)行的時機(jī): 如果計算屬性中依賴的數(shù)據(jù)項變化時,它會自動調(diào)用。
computed有緩存
示例:
<template> <div id="app"> <p>求和:{{ sum1 }}</p> <p>求和:{{ sum1 }}</p> <p>求和:{{ sum1 }}</p> </div> </template> <script> export default { data () { return { arr: [1,2,3,4] } }, computed: { sum1(){ // 求arr的和,并返回 // 如果arr變化了,計算屬性會重新計算 console.log('計算屬性被調(diào)用了') return this.arr.reduce((sum, item)=>sum + item, 0) } } } </script>
結(jié)果:
- 從上面的示例中可以看到,計算屬性在模板中被調(diào)用了三次,但控制臺只打印了一次,這是因?yàn)橛嬎銓傩詧?zhí)行前會先從緩存中查找有沒有這個數(shù)據(jù),如果有就不會執(zhí)行。
- 計算屬性的執(zhí)行機(jī)制就像我們查字典一樣
- 如果要計算的數(shù)據(jù)在緩存中能找到,就不會再執(zhí)行函數(shù),而是直接拿取數(shù)據(jù)。
二、總結(jié)
當(dāng)我們在模板中來顯示一份經(jīng)過對數(shù)據(jù)項進(jìn)行復(fù)雜計算之后的結(jié)果時,我們有兩種解決方案:
- 計算屬性
- 函數(shù)
如何選擇:
- methods定義函數(shù),如果在模板中使用,每使用一次,就相當(dāng)于調(diào)用了一次,處理邏輯會重新執(zhí)行。
- computed定義計算屬性,如果在模板中使用,使用多次,但是如果依賴的數(shù)據(jù)不發(fā)生改變,計算屬性對應(yīng)的函數(shù)不會重新執(zhí)行。
- 計算屬性會做緩存,提高渲染的性能。
到此這篇關(guān)于vue計算屬性及函數(shù)的選擇的文章就介紹到這了,更多相關(guān)vue計算屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue利用computed配合watch實(shí)現(xiàn)監(jiān)聽多個屬性的變化
這篇文章主要給大家介紹了在Vue中巧用computed配合watch實(shí)現(xiàn)監(jiān)聽多個屬性的變化的方法,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-10-10Vue中使用create-keyframe-animation與動畫鉤子完成復(fù)雜動畫
這篇文章主要介紹了Vue中使用create-keyframe-animation與動畫鉤子完成復(fù)雜動畫,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04Vue.js中輕松解決v-for執(zhí)行出錯的三個方案
v-for標(biāo)簽可以用來遍歷數(shù)組,將數(shù)組的每一個值綁定到相應(yīng)的視圖元素中去,下面這篇文章主要給大家介紹了關(guān)于在Vue.js中輕松解決v-for執(zhí)行出錯的三個方案,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建過程
Mock.js是一個模擬數(shù)據(jù)的生成器,用來幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來提高自動化測試效率,這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09