六、【vue3】侦听器watch的五种场景

1、watch是什么？

在Vue 3中，watch 是一个用于侦听数据变化的选项，当数据变化时可以执行一些特定的操作。watch 选项可以接受一个对象，该对象包含要侦听的数据和对应的回调函数。

作用：监视数据的变化（同Vue2中的watch）

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

• ref定义的数据。
• reactive定义的数据。
• 函数返回一个值（getter函数）。
• 一个包含上述内容的数组。

有以下五种应用场景

场景一：监听ref定义的基本类型数据

监听ref定义的基本类型数据：直接写数据名即可，监视的是其value值的改变。

<template>
  <div class="box">
    <h3>场景一：监听[ref]定义的基本类型数据</h3>
    <h4>当前求和为：{{ sum }}</h4>
    <button @click="addSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="HelloWorld">
import { ref, watch } from 'vue'
let sum = ref(0)
function addSum() {
  sum.value += 1
}
// 监听`ref`定义的基本类型数据：直接写数据名即可，监视的是其`value`值的改变。
watch(sum, (newValue, oldValue) => {
  console.log('sum数据名变化了~~', 'new:  ' + newValue + 'old:' + oldValue)
})
</script>

场景二：监听ref定义的对象类型数据

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

• 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象
• 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了

<template>
  <div class="box">
    <h3>场景二：监视【ref】定义的【对象类型】数据</h3>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="HelloWorld">
import { ref, watch } from 'vue'
let person = ref({
  name: '菜鸟~Hardy',
  age: 18
})

function changeName() {
  person.value.name += '~'
}
function changeAge() {
  person.value.age += 1
}
function changePerson() {
  person.value = { name: 'cainiao~hardy', age: 26 }
}
watch(person, (newValue, oldValue) => {
  console.log('person变化了', newValue, oldValue)
}, { deep: true })
// 语法：
 //watch的第一个参数是：被监视的数据
 //watch的第二个参数是：监视的回调
 //watch的第三个参数是：配置对象（deep、immediate等等.....） 
</script>

场景三：监听reactive定义的对象类型数据

监听reactive定义的【对象类型】数据，且默认开启了深度监视（可以是多层嵌套）。

<template>
  <div class="box">
    <h3>场景三：监听【reactive】定义的【对象类型】数据</h3>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="HelloWorld">
import { reactive, watch } from 'vue'
let person = reactive({
  name: '菜鸟~Hardy',
  age: 18
})

function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changePerson() {
  Object.assign(person,{ name: 'cainiao~hardy', age: 26 })
}
watch(person, (newValue, oldValue) => {
  console.log('person变化了~~~', newValue, oldValue)
})
</script>

场景四：监听ref或reactive定义的对象类型数据中的某个属性

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

• 若该属性值不是【对象类型】，需要写成函数形式
• 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数
  结论：监视的要是对象里的属性，那么最好写函数式，
  注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template>
  <div class="box">
    <h3>场景四：监听【reactive】定义的【对象类型】数据</h3>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <h4>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="HelloWorld">
import { reactive, watch } from 'vue'
let person = reactive({
  name: '菜鸟~Hardy',
  age: 18,
  car: {
    c1: '凯迪拉克',
    c2: '沃尔沃'
  }
})

function changeName() {
  person.name += '~'
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = '奥迪'
}
function changeC2() {
  person.car.c2 = '大众'
}
function changeCar() {
  person.car = { c1: 'XIAOMI', c2: 'BYD' }
}

// 监听，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
watch(() => person.name, (newValue, oldValue) => {
  console.log('person.name变化了', newValue, oldValue)
})

// 监听，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
watch(() => person.car, (newValue, oldValue) => {
  console.log('person.car变化了', newValue, oldValue)
}, { deep: true })
</script>

场景四：监听上述的多个数据

<template>
  <div class="box">
    <h3>场景一：监听【reactive】定义的【对象类型】数据</h3>
    <h4>姓名：{{ person.name }}</h4>
    <h4>年龄：{{ person.age }}</h4>
    <h4>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script lang="ts" setup name="HelloWorld">
import { reactive, watch } from 'vue'
let person = reactive({
  name: '菜鸟~Hardy',
  age: 18,
  car: {
    c1: '凯迪拉克',
    c2: '沃尔沃'
  }
})

function changeName() {
  person.name += 'cainiao~hardy'
}
function changeAge() {
  person.age += 1
}
function changeC1() {
  person.car.c1 = 'BYD'
}
function changeC2() {
  person.car.c2 = 'XIAOMI'
}
function changeCar() {
  person.car = { c1: '红旗', c2: '长安' }
}

// 监视上述的多个数据
watch([() => person.name, person.car], (newValue, oldValue) => {
  console.log('person.car变化了', newValue, oldValue)
}, { deep: true })
</script>