Vue.js 从零开始：watch

`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，才会正常运行。