0%

Vue 筆記 - Computed 與 Watch

vue.js

如果想要偵測資料的變動時,可以使用 Watch 來追蹤其變化,使用 watch,是用物件呈現1應將要觀察的屬性帶入函式使用。

練習範例 - watch

HTML

欲顯示於網頁的樣式

1
<div id="app">{{ fullName }}</div>

Vue

先設定一組資料 data,透過 watch 來觀察其變化,透過 watch 觀察 firstNamelastName, 而 firstNamelastName 兩個函式所帶入的參數,就是自己的值,並加上另外要組合的函式,所以只要 data 資料變更, watch 就會接收到,並顯示於網頁上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var vm = new Vue({
el: "#app",
data: {
firstName: "Foo",
lastName: "Bar",
fullName: "Foo Bar",
},
watch: {
firstName: function (val) {
this.fullName = val + " " + this.lastName;
},
lastName: function (val) {
this.fullName = this.firstName + " " + val;
},
},
});

computed 改寫

但這個範例使用 watch,就不太聰明,可以改用 computed,原因是組合名字,是馬上就可以得到的資料,不需要特別觀察後再給予值,若用 computed 改寫後會如下方呈現,直接組合起來即可。

1
2
3
4
5
6
7
8
9
var vm2 = new Vue({
el: "#app2",
data: { firstName: "Foo", lastName: "Bar" },
computed: {
fullName: function () {
return this.firstName + " " + this.lastName;
},
},
});

透過 watch 觀察物件後使其恢復原來狀態

watch 有趣的地方就可以改變後的結果,例如:我點擊一個按鈕讓網頁元素有個正方形可以旋轉 45 度,透過 watch 讓正方形自動三秒後轉回原本的樣子。

HTML

首先在 .box 綁定 class 名稱與其變數,button 綁定 @click 事件,效果設定為 true

1
2
<div class="box" :class="{'rotate': trigger }"></div>
<button class="btn btn-outline-primary" @click="trigger =true">Counter</button>

Vue

  1. data 資料中給予預設的 trigger 變數為 false
  2. 為了讓 .box 在三秒鐘後自動回復原狀,所以透過 watch 觀察 trigger 這個變數。
  3. 並宣告一個 vm 變數為 this,指的就是 trigger 自己。
  4. 使用到時間關係的動作,就會想到 setTimeout,並透過這個函式,使 trigger 這個變數本身,於三秒後變為 false,也就是原本的狀態。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var app = new Vue({
el: "#app",
data: {
trigger: false,
},
watch: {
trigger() {
var vm = this;
setTimeout(() => {
vm.trigger = false;
}, 3000);
},
},
});