[30天 Vue學好學滿 DAY7] 監聽器(Watch)

2021 iThome 鐵人賽

DAY 7

Modern Web

前端我又來了 - 30天 Vue學好學滿系列第 7 篇

13th鐵人賽 vue.js

蘇

2021-09-07 23:43:53

1207 瀏覽

分享至

Watch 監聽器

具比較傳(old & new)
無回傳值(return)
監聽變數發生異動-> 觸發
監聽變數無實際異動(true -> true)，不進行觸發

Key

監聽目標

Value

callback 函數

實做

HTML

<button @click="addValue">add</button>
<h3>{{ count }}</h3>
<h3>{{ showValue }}</h3>

定義變數

count: 0,
equalsFive: false,
showValue: "",

定義方法: 按下按鈕 count + 1

addValue: function () {
    this.count += 1;
},

監聽器

watch: {
    // 監聽count 
    count: function (val) {
      console.log(val); // 預設 new value
      this.equalsFive = (val == 5);
    },
    // equalsFive
    equalsFive: function (newVal, oldValue) {
      console.log('old value : ' + oldValue);
      console.log('new value : ' + newVal);
      this.showValue = "It's Five Now";
    },
},

執行測試:初始畫面，不進行任何觸發

按4次按鈕:count觸發4次，equalsFive未進行觸發

按第5次按鈕:count & equalsFive 進行觸發

物件形式 handler、deep

handler:欲進行的處理
deep:深度觀察，call by reference。

調整 count HTML

<h3>{{ obj.count }}</h3>

調整變數 count

obj:{
    count: 0,
},

監聽器

obj: function (val) {
    console.log(val)
      this.equalsFive = (val.count == 5);
},

進行測試:無監聽效果

將監聽器加上handler並設定deep

obj: {
    handler: function (val) {
        console.log(val);
        this.equalsFive = val.count == 5;
    },
    deep: true

進行測試:觸發成功

immediate

初始化即觸發handler

調整監聽器

obj: {
    handler: function (val) {
        console.log('immediate!');
        this.equalsFive = val.count == 5;
    },
    deep: true,
    immediate: true
},

進行測試:初始即觸發