Vue實踐--計算屬性

簡單的文本轉換可以通過filters來轉換，但是當涉及到複雜的邏輯的時候就要通過計算屬性完成了

計算屬性都是以函數的形式寫在computed選項中，計算屬性中的this指向Vue實例本身，只要最後有返回的值就行， 

		/* getter與setter (博客上見)*/
		var myApp1 = new Vue({
			el:"#container1",
			data:{
				firstName:"John",
				lastName:"Smith"
			},
			computed:{
				fullName:{
					// getter，默認
					get:function(){
						return this.firstName + " "+ this.lastName
					},
					//setter當改變計算屬性的值的時候纔會觸發
					set:function(newFullName){
						var nameArr = newFullName.split(" ");
						this.firstName = nameArr[0];
						this.lastName = nameArr[nameArr.length-1]
					}
				}
			}
		});
		myApp1.fullName = "Jodan Micale";

每一個計算屬性都包含一個getter，一個setter函數（其實就像上面的那樣），

“當手動修改計算屬性的值就像修改一個普通的數據那樣的時候就會觸發setter函數”，理解這句話對於理解setter的觸發時刻很關鍵，首先修改的是計算屬性的值(而不是其他的值),“就像修改普通數據那樣的時候”（我們知道修改普通數據就像修改firstName：myApp1.firstName = "Blaer"是這樣的，所以修改計算屬性的值的時候也是類似）；
雖然絕大多數情況下，我們只會用到getter方法（此時直接採用默認的計算屬性的寫法就行），但也要知道還有一個setter。

下面我們瞭解一下兩個小技巧：計算屬性可以依賴其他計算屬性，本Vue實例中的計算屬性可以依賴其他Vue實例中的數據（畢竟數據都可以通過實例.屬性訪問數據）

var myApp2 = new Vue({
			el:"#container2",
			data:{
				cat:3,
				mouse:5,
				dog:9,
				wolf:10
			},
			computed:{
				// 計算屬性間的依賴，allAnimals依賴於catAndmouse
				allAnimals:function(){
					return this.dog + this.wolf+this.catAndmouse
				},
				catAndmouse:function(){
					return this.cat+this.mouse
				},
				// 計算屬性，實例間數據的依賴
				others:function(){
					return myApp1.firstName + this.cat
				}
			}
		})

有些功能通過methds也可以實現，計算屬性是基於依賴緩存的（只要計算屬性所依賴的值不發生變化，值就不變）、而methods只要頁面重新渲染就會變（但此時計算屬性不一定會變哦）。那麼到底啥時間用計算屬性，啥時間用methods呢，一個很實用的判斷方法是看你是否需要緩存，當你遍歷大數組和做大量計算的時候，就應當使用計算屬性，除非你不想得到緩存；