淺談vue.js的computed

computed意為計算屬性，官方稱任何複雜邏輯，你都可以使用計算屬性。下面就購物車的小例子對computed進行講解。下面看2張執行截圖：

首先我們看js程式碼：

var vm = new Vue({
		el:"#materialTest",
		data:{
		//allMaterialList定義了所有的貨物列表，屬性有id，名稱，數量，單價和是否再購物車中5個屬性
			allMaterialList:[
				{id:0,name:"香蕉",num:1,unitPirce:5,isSelect:false},
				{id:1,name:"蘋果",num:1,unitPirce:1,isSelect:false},
				{id:2,name:"菠蘿",num:1,unitPirce:2,isSelect:false},
				{id:3,name:"桃子",num:1,unitPirce:6,isSelect:false},
				{id:4,name:"番茄",num:1,unitPirce:4,isSelect:false}
			]
		},
		methods:{
		//購物車增加刪除的方法
			changeMaterial:function(item,type){
				if(!item){
					item = this.allMaterialList[0];
				}
				var temp = this.allMaterialList[item.id];
				temp.isSelect = type;
				//注意，這裡改變陣列，或物件，要用下面的方式，簡單的push是不能觸發雙向繫結的。
				Vue.set(this.allMaterialList, item.id, temp);
			}
		},
		computed:{
		//computed計算選中的的物品
			notSelectMaterialList:function(){     
				return this.allMaterialList.filter(function (item) {
				    return item.isSelect === false
				})
			},
			//computed計算未選中的的物品
			isSelectMaterialList:function(){
				return this.allMaterialList.filter(function (item) {
				    return item.isSelect === true
				})
			},
			//computed計算商品總價格
			allCount:function(){
				var count = 0;
				for(var i = 0 ; i < this.isSelectMaterialList.length ; i++){
					count += this.isSelectMaterialList[i].num * this.isSelectMaterialList[i].unitPirce;
				}
				return count;
			}
		},
		created:function(){
			this.changeMaterial('',true);
		}
	})
複製程式碼

上面的js程式碼基本上顯示了整個邏輯，購物車裡面的貨物可以增減，最終allCount來顯示總價格。再看html程式碼：

<div id="materialTest">
		<div class="material-list">
			<p v-show="isSelectMaterialList.length > 0">已經選擇的水果</p>
			<div class="item-list" v-for="item in isSelectMaterialList">
				<span v-text="'品名:'+item.name"></span>
				<span v-text="'單價:'+item.unitPirce"></span>
				<span>數量：<input type="number" v-model="item.num" min="0"></span>
				<span @click="changeMaterial(item,false)">-</span>
			</div>
		</div>
		<div class="all-material-list">
			<p v-show="notSelectMaterialList.length > 0">所有水果</p>
			<div class="item-list" v-for="item in notSelectMaterialList">
				<span v-text="'品名:'+item.name"></span>
				<span v-text="'單價:'+item.unitPirce"></span>
				<span @click="changeMaterial(item,true)">+</span>
			</div>
		</div>
		<p>總價格：${{allCount}}</p>
	</div>
複製程式碼

這裡貼上完整的程式碼供大家參考：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>computed</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.4.4/dist/vue.min.js"></script>
	<style>
		.item-list span:last-child{
			border:1px solid;
			padding:0px 5px;
			cursor: pointer;
		}
		.item-list{
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div id="materialTest">
		<div class="material-list">
			<p v-show="isSelectMaterialList.length > 0">已經選擇的水果</p>
			<div class="item-list" v-for="item in isSelectMaterialList">
				<span v-text="'品名:'+item.name"></span>
				<span v-text="'單價:'+item.unitPirce"></span>
				<span>數量：<input type="number" v-model="item.num" min="0"></span>
				<span @click="changeMaterial(item,false)">-</span>
			</div>
		</div>
		<div class="all-material-list">
			<p v-show="notSelectMaterialList.length > 0">所有水果</p>
			<div class="item-list" v-for="item in notSelectMaterialList">
				<span v-text="'品名:'+item.name"></span>
				<span v-text="'單價:'+item.unitPirce"></span>
				<span @click="changeMaterial(item,true)">+</span>
			</div>
		</div>
		<p>總價格：${{allCount}}</p>
	</div>
	<p>Tips:總結,使用computed計算出了3個變數，notSelectMaterialList、isSelectMaterialList、allCount。大大簡化了程式，computed還會快取計算結果，比watch強。再者，當結果沒發生變化時，並不會觸發函式，但不意味computed沒有觀察到變化。</p>
</body>
<script>
	var vm = new Vue({
		el:"#materialTest",
		data:{
			allMaterialList:[
				{id:0,name:"香蕉",num:1,unitPirce:5,isSelect:false},
				{id:1,name:"蘋果",num:1,unitPirce:1,isSelect:false},
				{id:2,name:"菠蘿",num:1,unitPirce:2,isSelect:false},
				{id:3,name:"桃子",num:1,unitPirce:6,isSelect:false},
				{id:4,name:"番茄",num:1,unitPirce:4,isSelect:false}
			]
		},
		methods:{
			changeMaterial:function(item,type){
				if(!item){
					item = this.allMaterialList[0];
				}
				var temp = this.allMaterialList[item.id];
				temp.isSelect = type;
				//注意，這裡改變陣列，或物件，要用下面的方式，簡單的push是不能觸發雙向繫結的。
				Vue.set(this.allMaterialList, item.id, temp);
			}
		},
		computed:{
			notSelectMaterialList:function(){     //使用計算屬性過濾要顯示的物品
				return this.allMaterialList.filter(function (item) {
				    return item.isSelect === false
				})
			},
			isSelectMaterialList:function(){
				return this.allMaterialList.filter(function (item) {
				    return item.isSelect === true
				})
			},
			allCount:function(){
				var count = 0;
				for(var i = 0 ; i < this.isSelectMaterialList.length ; i++){
					count += this.isSelectMaterialList[i].num * this.isSelectMaterialList[i].unitPirce;
				}
				return count;
			}
		},
		created:function(){
			th-
s.-
hangeMaterial('',true);
		}
	})
</script>
</html>
複製程式碼

後記：適當運用computed能大大簡化我們的程式碼，計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter，不過運用的少。最後歡迎評論，一起探討，共同進步.

**最後可以關注我的個人公眾號，學習更多相關知識，程式設計師們都在這裡，你又在哪裡呢？ **

淺談vue.js的computed

淺談vue.js的computed

相關文章