vue3+ts watch 整理

watch() 一共可以接受三个参数，侦听数据源、回调函数和配置选项

作用：监视数据的变化（和Vue2中的watch作用一致）

特点：Vue3中的watch只能监视以下四种数据：

ref定义的数据。

reactive定义的数据。

函数返回一个值（getter函数）。

一个包含上述内容的数组
ref 定义的数据

<template>
  <div>str===={{ str }}</div>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPerson">点击修改部分属性</el-button>
    <el-button @click="editPersonAll">点击修改全部</el-button>
    <el-button @click="editString">修改基本数据类型</el-button>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
// let str: Ref<string> = ref("AAA"); // 泛型写法
let str = ref("AAA");
let personObj = ref<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPerson = () => {
  personObj.value.name = "bbb";
};
const editPersonAll = () => {
  personObj.value.car = {
    price: 222,
    color: "blue",
  };
};

const editString = () => {
  str.value = "Bbb";
};
// 监听基本数据类型变化
watch(
  () => str.value,
  (newValue, oldValue) => {
    console.log("监听基本数据类型变化newValue");
    console.log(newValue);
    console.log(oldValue);
  }
);
// 监听对象类型某个值的变化
watch(
  () => personObj.value.name,
  (newValue, oldValue) => {
    console.log("personObj.value.name");
    console.log("newValue==" + newValue);
    console.log("oldValue==" + oldValue);
  }
);

/* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象（deep、immediate等等.....） 
  */
watch(
  personObj,
  (newValue, oldValue) => {
    console.log("修改整个车");
    console.log("newValue==");
    let { car, name, age } = toRefs(newValue);
    console.log(car, name.value, age.value);
    console.log("oldValue==");
    // let {car,name,age} = toRefs(oldValue)
    // console.log(car,name,age);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>

reactive 定义的数据

ref 写法

<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPerson">点击修改部分属性</el-button>
    <el-button @click="editPersonAll">点击修改全部</el-button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = reactive<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPerson = () => {
  personObj.name = "bbb";
};
const editPersonAll = () => {
  personObj.car = {
    price: 222,
    color: "blue",
  };
};
//监听基本数据类型的写法
watch(
  () => personObj.name,
  (newValue, oldValue) => {
    console.log("newValue==" + newValue);
    console.log("oldValue==" + oldValue);
  }
);
监听对象类型的写法 (推荐使用这种方法)
// watch(
//   () => personObj.car,
//   (newValue, oldValue) => {
//     console.log("修改整个车");
//     console.log("newValue==" + newValue);
//     console.log("oldValue==" + oldValue);
//   }
// );
监听对象类型的写法
watch(personObj.car, (newValue, oldValue) => {
  console.log("修改整个车");
  console.log("newValue==" + newValue);
  console.log("oldValue==" + oldValue);
});
</script>

监听多个值变化

ref 写法

<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPersonName">点击修改name</el-button>
    <el-button @click="editPersonCarColor">点击修改car-color</el-button>
  </div>
</template>

<script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = ref<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPersonName = () => {
  personObj.value.name = "bbb";
};
const editPersonCarColor = () => {
  personObj.value.car.color = "bule";
};

// 监听对象类型某个值的变化
// 传入的是数组， 获取到的newValue 也是数组，一一对应的关系
watch(
  [() => personObj.value.name, personObj.value.car],
  (newValue, oldValue) => {
    console.log("personObj.value--watch");
    console.log(newValue);
    console.log(oldValue);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>

reactive 写法

<template>
  <div>perosn 的name===={{ personObj.name }}</div>
  <div>Person 的age===={{ personObj.age }}</div>
  <div>Person的Car===={{ personObj.car }}</div>
  <div>Person的Car.color===={{ personObj.car.color }}</div>
  <div>Person的Car.price===={{ personObj.car.price }}</div>
  <div>
    <el-button @click="editPersonName">点击修改name</el-button>
    <el-button @click="editPersonCarColor">点击修改car-color</el-button>
  </div>
</template>

<script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {
  name: string;
  age: number;
  car: {
    price: number;
    color: string;
  };
}
let personObj = reactive<Person>({
  name: "aaa",
  age: 12,
  car: {
    price: 12,
    color: "reds",
  },
});
const editPersonName = () => {
  personObj.name = "bbb";
};
const editPersonCarColor = () => {
  personObj.car.color = "bule";
};

// 监听对象类型某个值的变化
// 传入的是数组， 获取到的newValue 也是数组，一一对应的关系
watch(
  [() => personObj.name, personObj.car],
  (newValue, oldValue) => {
    console.log("personObj.value--watch");
    console.log(newValue);
    console.log(oldValue);
  },
  {
    deep: true,
  }
);
</script>

<style scoped></style>