vue3中监视 Reactive对象中的属性

  watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组

一、框架：

<template>
  <div class="divBox">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.brand1 }} 、 {{ person.car.brand2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarName">修改汽车名称</button>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeCar">修改汽车</button>
  </div>
</template>

二、数据源：

<script setup name="watchReactive">
import { ref, reactive, watch } from "vue";

const person = reactive({
  name: "张三",
  age: 18,
  car: { brand1: "奔驰", brand2: "奥迪", price: 100000 },
});

function changeName() {
  person.name = person.name + "~";
}
function changeAge() {
  person.age = person.age + 1;
}
function changeCarName() {
  person.car.brand1 = person.car.brand1 + "~";
}
function changeCarPrice() {
  person.car.brand2 = person.car.brand2 + "$";
}
function changeCar() {
  person.car = { brand1: "爱玛电动车", brand2: "小刀就是好", price: 88888 };
}

</script>

三、数据、方法

监听（Watch）

单个数据的属性值

可以使用以下方式：

1.数据为String/number属性值

<script setup name="watchReactive">

//现在开始进行监视,不能监视对象的属性，只是一个字符串
// watch(person.name,(newValue,oldValue) => {
//     console.log("newValue",newValue);
//     console.log("oldValue",oldValue);
// });

//成功监视！

watch(()=>{return person.name},(newValue,oldValue) => {
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
});

//推荐指数****
watch(()=> person.name,(newValue,oldValue) => {
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
});

</script>

2.监听的数据为Object对象时

当我们监听函数中的对象时：

<script setup name="watchReactive">

//不能使用这种方式进行监视，他只是一个字符串
 watch(person.car.brand1,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 })

<script/>

系统提示：

<script setup name="watchReactive">

/**可以使用这种方式进行监视，
 * 但是只能监视对象中的属性，不能监视对象本身
 * 对象本身，已经不是响应式的对象了，被重新赋值了
 */
 watch(person.car,(newValue,oldValue) =>{
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
})

<script/>

 以下这种方式，我们只能监视数据对象整体，并不能监视到数据对象中的属性！！！

<script setup name="watchReactive">

//我们尝试监听数据中的对象属性
 watch(()=> person.car,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 })

</script>

上面虽然可以监视数据中的对象属性，但是并不是最优的，因为其并不能监视对象本身本修改的情况，下面是推荐使用的监听方式 ，既可以监听到对象中的属性，又可以监听到数据本身

<script setup name="watchReactive">

//推荐程度*******
 watch(()=> person.car,(newValue,oldValue) =>{
     console.log("newValue",newValue);
     console.log("oldValue",oldValue);
 },{deep:true})

</script>

监听单个数据的多个属性值

当我们进行监听数据的多个属性值时：

我们可以整体返回一个对象数组，用来监听不同的数据类型：

<script setup name="watchReactive">

/**
 * 监视对象内部多个属性
 */
// watch(()=>{return [person.name,person.car.brand1]},(newValue,oldValue) =>{
//     console.log("newValue",newValue);
//     console.log("oldValue",oldValue);
// },{deep:true})

watch(()=>[person.name,person.car.brand1],(newValue,oldValue) =>{
    console.log("newValue",newValue);
    console.log("oldValue",oldValue);
},{deep:true})
</script>

也可以这样书写：

<script setup name="watchReactive">

//推荐程度*******
watch([() => person.name, () => person.car.brand1],
  (newValue, oldValue) => {
    console.log("newValue", newValue);
    console.log("oldValue", oldValue);
  },{ deep: true });
</script>

好处在于，我们可以针对没个属性进行监视！！！

vue3官方文档：

侦听数据源类型​

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

注意，你不能直接侦听响应式对象的属性值，例如:

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`Count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数：

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`Count is: ${count}`)
  }
)

deep谨慎使用

深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。