前面兩篇介紹了computed和watch的基本使用
- watch篇
- computed篇
兩者的差別,繼續通過代碼實作的方式具體去了解
html
<li>最開始的value值:{{ name }}</li>
<li>computed計算後的值:{{ computedName }}</li>
<li>
watch修改後的值:{{ watchName }}
<input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber">修改名字</button></li>
JS
data() {
return {
name: "zhangsan",
watchName: "張三",
};
},
watch: {
watchName(newVal, oldVal) {
console.log("舊的值---->", newVal);
console.log("新的值---->", oldVal);
console.log("watch下所有的狀态都會監聽this.name---->", this.name);
console.log(
"watch下所有的狀态都會監聽this.computedName---->",
this.computedName
);
this.watchName = newVal;
},
},
computed: {
computedName: function (currentThis) {
console.log(
"和計算屬性無關的狀态發生更改時,不會執行,隻要依賴的狀态發生更改,緩存才會更新",
currentThis
);
return `依賴于name,:${this.name}`;
},
},
methods: {
handleNumber() {
this.name = "lisi";
},
},
差別
依賴值: computed依賴于所使用的狀态,類似在data中聲明的name,
而watch中監聽的值不依賴于某個值,隻要元件狀态發生更改,監聽的值就實時擷取最新值,
computed的實作使用的是getter和setter擷取值,屬于同步操作。
使用方法:
- computed最後需要進行return處理傳回值,并且可以使用更深層次的getter和setter,具體參考computed篇
- watch除了callback回調函數外,還有兩個屬性值為布爾值的屬性,用于首次綁定immediate,以及對對象的深度監聽deep
- 兩者相同點就是可以通過方法參數擷取新值,結合其他狀态處理相關的業務
**補充##
在官方文檔中,除了在元件中使用的watch外,官方文檔中,還有對于示例中watch的介紹
具體用法可以在官網中:
https://cn.vuejs.org/v2/api/#vm-watch
$watch基礎使用--來自官方文檔例子
官方文檔提示:
注意:在變更 (不是替換) 對象或數組時,舊值将與新值相同,因為它們的引用指向同一個對象/數組。Vue 不會保留變更之前值的副本。
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做點什麼
})
// 函數
vm.$watch(
function () {
// 表達式 `this.a + this.b` 每次得出一個不同的結果時
// 處理函數都會被調用。
// 這就像監聽一個未被定義的計算屬性
return this.a + this.b
},
function (newVal, oldVal) {
// 做點什麼
}
)
需要注意的是,如果使用vm.$watch,那麼使用unwatch有助于我們取消對某個狀态的監聽,減少不必要的監聽和互動開銷
var unwatch = vm.$watch('a', cb)
// 之後取消觀察
unwatch()
結尾
- watch篇
- computed篇
花了三個篇幅去介紹watch和computed的使用方法,以及這兩個鈎子函數的差別,在實際的企業項目開發中,使用的場景和次數較多,是以盡量寫的稍微詳細一些,同時也将筆記的代碼放在了開源倉庫,希望對大家在開發vue2.x的項目中有所幫助
-
碼雲 https://gitee.com/lewyon/vue-note
-
githup https://github.com/akari16/vue-note