上一篇：

vue3 computed计算属性https://blog.csdn.net/qq_42543244/article/details/122180340?spm=1001.2014.3001.5501即上一篇写完computed属性之后，今天来记录 watch监听函数，我打算写成两个部分（ref & reactive，在vue3中毫无疑问，watch也被放到了组合式api ！具体请看下方代码

<template>
  <h1>ref基础数据类型监听</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button @click="name = '李四'">改变姓名</button>
  <button @click="age += 1">改变年龄</button>
</template>

<script>
import { ref, watch } from "vue";
export default {
  name: "Demo",
  setup() {
    let name = ref("张三");
    let age = ref(18);

    /* watch 接收三个参数
            1.要监听的对象
            2.监听的数据变化的回调函数
            3.监听函数的一些配置（deep,immediate ,flush ...）
    */

    // 1.监听ref基本数据类型 --单个数据
    watch(name, (newVal, oldVal) => {
      console.log("name变化了：", newVal, oldVal);
    });
    watch(age, (newVal, oldVal) => {
      console.log("age变化了：", newVal, oldVal);
    });

    //2.监听ref多个值得变化
    watch([name, age], (newVal, oldVal) => {
      console.log("[name,age]变化了：", newVal, oldVal);
    });

    return {
      name,
      age,
    };
  },
};
</script>

下一篇：

vue3 watch监听函数（reactive篇）https://blog.csdn.net/qq_42543244/article/details/122281029