1、什么是計算屬性
- 如果模板中的表達式存在過多的邏輯，那么模板會變得臃腫不堪，維護起來也異常困難，因此為了簡化邏輯出現了計算屬性；
View Code<template> <div id="example"> <p>{{message.split(" ").reverse().join('!')}}</p> </div> </template> <script> export default { name: "example", data() { return { message : 'i am chinese person' }; }, methods : { }, mounted(){ } }; </script>
上述表達式比較繁瑣，因此我們采用計算屬性實現
- 特點：在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就可以；
View Code
<template> <div id="example"> <p>源數據：{{message}}</p> <p>更改后的數據：{{changeMessage}}</p> </div> </template> <script> export default { name: "example", data() { return { message : 'i am chinese person' }; }, computed : { //getter方法 changeMessage : function(){//無需進行聲明 return this.message.split(" ").reverse().join('!') } } }; </script>
結果為：
- 計算屬性擁有的兩個方法：getter setter 用來實現數據的雙向綁定
View Code
<template> <div id="example"> <p>給定以下三個詞語組成一句話</p> <span>{{combine}}</span> <span>{{mom}}</span> <span>{{dad}}</span> <p style="padding:12px 0">答案為：{{result}}</p> <button @click="btn">改變語句</button> </div> </template> <script> export default { name: "example", data() { return { mom: "媽媽", dad: "爸爸", combine: "組成了一個家" }; }, computed: { result : {//與不寫get set方法的形式有區別 //一個計算屬性的getter get : function(){//三個值變化的時候，result的值會自動更新，也會自動更新DOM結構 return this.mom + this.dad + this.combine }, // 一個計算屬性的setter set : function(newVal){//當設置result的時候，其他的值也會相應的發生改變 this.mom = newVal.substr(0,2); this.dad = newVal.substr(2,2); this.combine = newVal.substr(4) } } }, methods : { btn(){ this.result = "醫生警察為人民服務" } } }; </script>
首次渲染結果為：
點擊按鈕結果為：
2、計算屬性緩存（最大的特點）-----屬性變化才執行getter函數，否則使用緩存 默認為true使用緩存
- 作用：如果頻繁的使用計算屬性，而計算屬性方法中有大量的耗時操作（例如getter中循環一個大的數組以執行很多操作），會帶來一些性能問題；
View Code
<template> <div id="example"> <p>給定以下三個詞語組成一句話</p> <span>{{combine}}</span> <span>{{mom}}</span> <span>{{dad}}</span> <p style="padding:12px 0">答案為：{{result}}</p> <button @click="btn">改變語句</button> </div> </template> <script> export default { name: "example", data() { return { mom: "媽媽", dad: "爸爸", combine: "組成了一個家" }; }, computed: { result : {//與不寫get set方法的形式有區別 //一個計算屬性的getter cache: true,//打開緩存 get : function(){//三個值變化的時候，result的值會自動更新，也會自動更新DOM結構 return new Date().getTime() + this.mom + this.dad + this.combine }, // 一個計算屬性的setter set : function(newVal){//當設置result的時候，其他的值也會相應的發生改變 this.mom = newVal.substr(0,2); this.dad = newVal.substr(2,2); this.combine = newVal.substr(4) } } }, methods : { btn(){ this.result = "醫生警察為人民服務" } } }; </script>
3、使用過程中遇到的問題
- 計算屬性getter不執行的場景
- 當包含計算屬性的節點被移除並且模板當中其他地方沒有在引用該屬性時，對應的getter不會再執行；
View Code
<template> <div id="example"> <button @click="btn">總價格的顯示隱藏</button> <p v-if="showTotal">總價格是：{{totalPrice}}</p> </div> </template> <script> export default { name: "example", data() { return { showTotal : true, basePrice : 100, }; }, computed: { totalPrice : { get : function(){ return this.basePrice * 99 } } }, methods: { btn(){ this.showTotal = !this.showTotal } } }; </script>
在本程序中，p元素移除后，計算屬性在別的地方不會再被使用，因此getter方法不會被執行；若每次都不執行，請加入緩存cache:false
- 當節點移除，其他地方使用計算屬性時：
View Code
<template> <div id="example"> <p>{{totalPrice}}</p> <button @click="btn">總價格的顯示隱藏</button> <p v-if="showTotal">總價格是：{{totalPrice}}</p> </div> </template> <script> export default { name: "example", data() { return { showTotal : true, basePrice : 100, }; }, computed: { totalPrice : { cache : false, get : function(){ console.log(1) return this.basePrice * 99 } } }, methods: { btn(){ this.showTotal = !this.showTotal } } }; </script>
每次都執行getter
- 當包含計算屬性的節點被移除並且模板當中其他地方沒有在引用該屬性時，對應的getter不會再執行；