vue3學習之watch

僅記錄筆記

<template>
  <div>
    <h2>當前求和為:{{num}}</h2>
    <button @click="sum++">點我加1</button>
    <br />
    <h2>watch監聽多個ref聲明:{{msg}}</h2>
    <button @click="msg+'!'">點我加1</button>
    <br />
    <h2>姓名:{{person.name}}</h2>
    <h2>年齡:{{person.age}}</h2>
    <h2>薪水:{{person.job.j1}} k</h2>
    <button @click="person.name+'!'">修改姓名</button>
    <button @click="person.age++">年齡加1</button>
    <button @click="person.job.j1++">加錢</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from "vue";
export default {
  setup() {
    // 聲明
    let num = ref(0);
    let msg = "watch";
    let person = {
      name: "張三",
      age: 18,
      job: {
        j1: {
          money: 10
        }
      }
    };
    // 使用watch
    // watch 可以接收三個參數  第一個是要監聽的對象 第二個是數據處理變化,第三個是配置項  immediate:true是剛一進去就監聽一次
    // 情況一:監視ref所定義的一個響應式數據
    watch(
      sum,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      { immediate: true }
    );

    // 情況二:監視多個ref所聲明的響應式數據
    // 多個的話是第一個參數是 用數組傳遞 也可以調用多次watch(因為在vue3里面watch是一個函數)
    watch(
      [num, msg],
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      { immediate: true }
    );

    // 情況三:監視reactive所定義的一個響應式數據的全部屬性
    /*
      1.注意:使用reactive定義的數據 無法正確獲取oldValue
      2.注意:強制開啟了深度檢測(deep配置無效)
     */
    watch(
      person,
      (newValue, oldValue) => {
        console.log("person變化了", newValue, oldValue);
      },
      { deep: true } //此處配置的deep無效
    );

    // 情況四:監視reactive所定義的一個響應式數據的一個屬性
    watch(
      () => person.age,
      (newValue, oldValue) => {
        console.log("person.age變化了", newValue, oldValue);
      }
    );

    // 情況五:監視reactive所定義的一個響應式數據的一些屬性
    // 使用數組 把情況四要監視的屬性放到數組內
    watch([() => person.age, () => person.name], (newValue, oldValue) => {
      console.log("person.age變化了", newValue, oldValue);
    });

    //特殊情況
    //當監視的聲明的對象內的屬性 還是一個對象,因為不是用reactive直接聲明的
    watch(
      () => person.job,
      (newValue, oldValue) => {
        console.log("person.job變化了", newValue, oldValue);
      },
      { deep: true }//此處由於監視的是reactive定義的對象內的某個屬性,所以deep配置有效
    );
    return {
      num,
      msg,
      person
    };
  }
};
</script>