watch監聽器

監聽data裡面的值，當值有變化時，就會觸發事件。

watch監聽一個變數：

<div id="app">
    <h3>watch 監聽單一變數</h3>
    <label for="name">監聽變數：</label>
    <input type="text" id="name" v-model="tempName">
    <P>大於五個字: {{ big }}</P>
    <p>小於五個字: {{ small }}</p>
</div>

wacth監聽tempName裡面的值。

const App = {
  data() {
    return {
      small: "",
      tempName: "",
    };
  },
  watch: {
    tempName(a, b) {
      console.log(a, b);
      if(a.length > 5 ){
        this.big = `文字超過${b.length}個字`;
      }else {
        this.small = `文字未超過${a.length}個字`;
      }
    },
  }
};
Vue.createApp(App).mount("#app");

觀察console.log，參數a為新的值，b為舊的值，一開始還沒輸入input框，b會是一個空值。

watch與computed不同的地方

watch

• 監聽單一變數

computed

• 監聽多個變數數發事件
• 產生一個值

<div id="app">
    <label for="store">店家名稱</label>
    <input type="text" v-model="store">
    <br>
    <label for="productName">商品名稱</label>
    <input type="text" v-model="productName">
    <br>
    <label for="productPrice">商品價格</label>
    <input type="number" v-model.number="productPrice">
    <p>computed: {{ comVale }}</p>
    <p>watch: {{ watchValue }}</p>
</div>

const App = {
  data() {
    return {
      watchValue: "",
       // 單一產品
      store:"高雄",
      productName: "褲子",
      productPrice: 500,
    };
  },
  computed: {
    comVale() {
      return `${this.store},${this.productName},${this.productPrice}`
    }
  },
  watch: {
    store() {
      this.watchValue = `${this.store},${this.productName},${this.productPrice}`
    },
    productName() {
      this.watchValue = `${this.store},${this.productName},${this.productPrice}`
    },
    productPrice() {
      this.watchValue = `${this.store},${this.productName},${this.productPrice}`
    },
  }
};
Vue.createApp(App).mount("#app");

第一次進入畫面computed會先執行一次，而watch則是等待被觸發。watch一次只能監聽一個變數，所以這邊就必須寫三個函式來使用，如果變數有更動，就會觸發函式。如果要監聽多個變數產生一個值建議使用computed，會比較適合。

使用watch監聽多個變數

<div id="app">
  <label for="store">店家名稱：</label>
  <input type="text" v-model="product.store"><br>
  <label for="productName">商品名稱：</label>
  <input type="text" v-model="product.name"><br>
  <label for="productPrice">商品價格：</label>
  <input type="number" v-model.number="product.price">
  <p>value: {{ value }}</p>
</div>

const App = {
  data() {
    return {
      product: {
        store:"高雄",
        name: "褲子",
        price: 500,
      },
    };
  },
  watch: { 
    product: {
      handler(n, o) {
        console.log(n, o);
        this.value = `${this.product.store},${this.product.name},${this.product.price}`
      },
      deep: true,
    }
  }
};
Vue.createApp(App).mount("#app");

使用watch做到多個變數的監聽，data就要改為物件，watch裡面改為handler函式來做觸發，deep也要改為true，才會正常運行。

參考資料

六角學院
Lai 認識監聽器