本文章首更于掘金賬號，主要是為了方便自己以后復(fù)習(xí)和回憶裁蚁，有錯誤或不合理之處還請大家指正。
計算屬性：computed
作用
- 減少模板中的計算邏輯
- 進(jìn)行數(shù)據(jù)緩存
- 依賴固定的數(shù)據(jù)類型
使用
- 在computed屬性對象中定義計算屬性的方法
- 在頁面中使用{{方法名}}來顯示計算的結(jié)果
- 通過getter/setter實現(xiàn)對屬性數(shù)據(jù)的顯示和監(jiān)視
注意點
- 計算屬性是基于它們的依賴進(jìn)行緩存的检眯，只有相關(guān)的依賴發(fā)生改變時才會重新求值厘擂。只要相關(guān)的依賴未改變，只會返回之前的結(jié)果锰瘸，不會執(zhí)行函數(shù)刽严。
- computed依賴監(jiān)控自己定義的變量，computed不能計算已經(jīng)在data里面定義過的值避凝，該變量在computed里面定義舞萄，然后可以在頁面上進(jìn)行數(shù)據(jù)綁定
- computed比較適合對多個變量或者對象進(jìn)行處理后返回一個結(jié)果值，也就是數(shù)多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化
實例
<template>
<div>
<label>姓：<input type="text" placeholder="請輸入姓氏" v-model="firstName"></label><br/>
<label>名：<input type="text" placeholder="請輸入名字" v-model="lastName"></label>
// 可以直接綁定計算屬性
<label>姓 名：<input type="text" placeholder="請輸入姓名" v-model="fullName"></label>
</div>
</template>
<script>
export default {
name: "ComputedAndWatch",
data(){
return {
firstName:'',
lastName:'',
}
},
computed:{
fullName:{
get(){
return this.firstName + '·' + this.lastName
}
}
}
}
實現(xiàn)雙向綁定
set(value){
console.log(`${value}`); // 測試：使用字符串拼接只能使用“ ` ”
let names = value.split('·');
this.firstName = names[0];
this.lastName = names[1];
}
使用場景
-
computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響
image
偵聽器：Watch
作用
- 主要用于監(jiān)控vue實例的變化管削，監(jiān)控的變量必須在data里面聲明才可以
- 可以監(jiān)控一個變量或者一個對象倒脓，但是只能監(jiān)控整個對象或單個變量、
- 依賴于固定的數(shù)據(jù)類型（響應(yīng)式數(shù)據(jù)）
使用
- 通過vm對象的$watch()或watch配置來監(jiān)視指定的屬性
- 當(dāng)屬性變化時含思，回調(diào)函數(shù)自動調(diào)用崎弃，在函數(shù)內(nèi)部進(jìn)行計算
- watch不能雙向的綁定值
實例
watch:{
// 監(jiān)聽firstName
firstName(value){
console.log(`watch監(jiān)視到firstName發(fā)生改變：${value}`);
//更新fullName
this.fullName = value + '·' + this.lastName
},
// 監(jiān)聽lastName
lastName(value){
console.log(`watch監(jiān)視到lastName發(fā)生改變：${value}`);
this.fullName = this.firstName + '·' + value
}
}
使用場景
- watch一般用于監(jiān)控路由、input輸入框的值特殊處理等等含潘，它比較適合的場景是一個數(shù)據(jù)影響多個數(shù)據(jù)
image
總結(jié)
- 能用computed的地方饲做，盡可能使用computed
- computed是計算一個新的屬性，并將該屬性掛載到vm上遏弱，而watch是監(jiān)聽已經(jīng)存在且已掛載VM上的數(shù)據(jù)盆均，所以用watch同樣可以監(jiān)聽computed計算屬性的變化
- computed本質(zhì)上一個惰性求值的觀察者，具有緩存性漱逸，只有當(dāng)依賴變化后泪姨，第一次訪問computed屬性游沿，才會計算新的值，而watch則是當(dāng)數(shù)據(jù)發(fā)生變化便會調(diào)用執(zhí)行函數(shù)
- 從使用場景上說肮砾，computed使用一個數(shù)據(jù)被多個數(shù)據(jù)影響诀黍，而watch適用一個數(shù)據(jù)影響多個數(shù)據(jù)
