技術標籤：vue

計算屬性 computed

computed(多個值變化，影響到一個結果) 屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算。他是函式主要當作屬性來使用，邏輯簡單。

computed是屬性呼叫，而methods是函式呼叫
computed帶有快取功能，而methods不是
computed可以監控物件，而methods不是

computed:{//前面的數值變化影響到結果---》get
			'fullname':function(){
					return this.firstname+this.lastname;
			}
				fullname(){
					return this.firstname+this.lastname;
				}
			}
       

       fullname:{ //雙向數值修改(前面變化影響到後面，後面變化影響到前面)  get+set
					get:function(){
						return this.firstname+"-"+this.lastname;
					},
					set:function(newval){
						//console.log(newval);
						var arr=newval.split('-');
						//console.log(arr);
						this.firstname=arr[0];
						this.lastname=arr[1];
					}
				}
 

監視屬性 watch

watch(一個值變化，影響到多個結果改變)一個物件，鍵是需要觀察的表示式，值是對應回撥函式。主要用來監聽某些特定資料的變化（watch監控路由物件‘$route’），從而進行某些具體的業務邏輯操作；可以看作是computed和methods的結合體；

watch可以監控物件，而methods不是

Watch:{
            'obj':{
						handler(newval){
							console.log(newval);
						},
						deep:true,
						immediate: true
					}
}

watch和computed均可以監控程式設計師想要監控的物件，

watch監控自身屬性變化(重新編譯，效能差)
watch監控路由物件(一個值變化，影響到多個結果改變)
資料變化時來執行非同步操作，這時watch是非常有用的。

計算屬性computed的特點(多個值變化，影響到一個結果)
計算屬性會依賴於他使用的data中的屬性，只要是依賴的屬性值有改變，則自動重新呼叫一下計算屬性；如果他所依賴的這些屬性值沒有發生改變，那麼計算屬性的值是從快取中來的，而不是重新編譯，那麼效能要高一些，所以vue中儘可能使用computed替代watch