Vue基礎第三章 計算屬性

2022-07-13 06:48:15 字數 4064 閱讀 8128

1、計算屬性介紹

在第二章中我們介紹了在vue的}中可以使用一些簡單的表示式進行計算，但是當表示式過長或者邏輯過於複雜就會變得不易理解和維護，比如第二章的示例}，為了使}的內容看起來更簡潔，就需要用到vue中計算屬性，如下示例



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>vue 示例


title


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


}div


>


<


script


>


var=


newvue(,


computed:}})


script


>


body


>


html


>

2、計算屬性用法

2.1、計算屬性的常用用法

計算屬性通常被用於完成各種複雜邏輯，包括運算和函式呼叫等，計算屬性可以依賴多個vue例項資料，任意乙個資料變化都會使計算屬性重新執行，頁面也會隨之更新，如下示例



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>vue 示例


title


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


總價：}


div>


<


script


>


var=


newvue(,


],package2:[,]


},computed:


for(


vari =0


;i<


this


.packages1.length;i++)


return


prices;}}


})script


>


body


>


html


>

2.2、計算屬性的getter方法和setter方法

每個計算屬性都有getter和setter兩種方法，分別是讀取計算屬性資料和修改計算屬性資料的，如下示例



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>vue 示例


title


>


<


script 


src=""


>


script


>


head


>


<


body


>


<


div 


id>


姓名：}


div>


<


script


>


var=


newvue(,


computed:,


set:


function


() }


}});


script


>


body


>


html


>

2.3、計算屬性小技巧

2.3.1、計算屬性可以依賴其他計算屬性

在vue例項的計算屬性中我們可以呼叫其他vue例項中計算屬性的返回值參與計算，如下示例



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


script 


src=""


>


script


>


<


title


>vue 示例


title


>


head


>


<


body


>


<


div 


id>


電子產品總價：}


div>


<


div 


id>


商品總價：}


div>


<


script


>


var=


newvue(,]},


computed:


return


price1;}}


});var=


newvue(,]},


computed:}})


script


>


body


>


html


>

2.3.2 計算屬性可以依賴其他vue例項的資料

就像在計算屬性中可以呼叫其他vue例項的計算屬性返回值一樣，同樣的我們也可以呼叫其他vue例項中的資料參與計算，如下示例



doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


script 


src=""


>


script


>


<


title


>vue 示例


title


>


head


>


<


body


>


<


div 


id>


div>


<


div 


id>


商品總價：}


div>


<


script


>


var=


newvue(,]}


});var=


newvue(,]},


computed:


for(


vari=0


;i<


++) }})


script


>


body


>


html


>

3、計算屬性快取

在第二章中我們介紹過乙個跟計算屬性功能類似的屬性methods，在methods屬性中同樣可以定義函式實現一樣的功能，那麼為什麼還會有計算屬性這個看似多餘的屬性呢，當然是因為這兩者之間是有區別的，區別就在於methods屬性不會快取計算結果，每一次頁面渲染都會重新呼叫methods屬性中的函式進行計算，而計算屬性則會講計算結果快取起來，只要它依賴的資料沒有變化，無論頁面渲染多少次都不會重新呼叫函式進行計算，因此methods適合用於邏輯簡單，資料量小的場景，而當計算邏輯較為複雜，資料量很大時則需要使用計算屬性講結果快取，提公升使用者體驗。

Pytho基礎 第三章

3.1.1 def語句和引數 在呼叫print 或 len 等函式時，會傳入一些值放於括號中間，在此稱為引數。也可以自行定義接收引數的函式。def hello name print hello name hello yang 在此函式定義中，name為乙個 變元 即可以存放引數以及賦值。值得注意的是...

第三章 語言基礎

它是操作符，不是函式，所以不需要引數 也可以使用引數 let message x console.log typeof message string 以下是乙個特殊情況 console.log typeof null object 因為null被認為是乙個對空物件的引用。0.這個型別只有乙個值 un...

第三章 MapReduce計算模型

3.1 為什麼用mapreduce 分布式 海量資料 3.2 mapreduce計算模型 jobtracker，使用者管理和排程工作 tasktracker，用於執行工作 job，每個個mapreduce任務被初始化為乙個job，每個job又分為兩個階段，分別用map函式和reduce函式表示這兩個...