一：【watch】监视`ref`定义的【基本类型】数据
-
作用：监视数据的变化（和
Vue2中的watch作用一致） -
特点：
Vue3中的watch只能监视以下四种数据：
ref定义的数据。
reactive定义的数据。函数返回一个值（
getter函数）。一个包含上述内容的数组。
我们在Vue3中使用watch的时候，通常会遇到以下几种情况 ，
在一定情况下，停止监控：stopWatch
watch(第一个参数，第二个参数） // 第一个参数是监控谁 ，第二个参数是回调函数
<template>
<div class="person">
<h1>情况一：监视【ref】定义的【基本类型】数据</h1>
<h2>当前求和为：{
{sum}}</h2>
<button @click="changeSum">点我sum+1</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let sum = ref(0)
// 方法
function changeSum(){
sum.value += 1
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum,(newValue,oldValue)=>{
console.log('sum变化了',newValue,oldValue)
if(newValue >= 10){
stopWatch()
}
})
</script>二：【watch】监视`ref`定义的【对象】数据
监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。
注意：
若修改的是
ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象。若修改整个
ref定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。
注意：
{deep:true,immediate:true})
// deep:true 深度监视
// mmediate:true 立即监视
<template>
<div class="person">
<h1>情况二：监视【ref】定义的【对象类型】数据</h1>
<h2>姓名：{
{ person.name }}</h2>
<h2>年龄：{
{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {ref,watch} from 'vue'
// 数据
let person = ref({
name:'张三',
age:18
})
// 方法
function changeName(){
person.value.name += '~'
}
function changeAge(){
person.value.age += 1
}
function changePerson(){
person.value = {name:'李四',age:90}
}
/*
监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
watch的第一个参数是：被监视的数据
watch的第二个参数是：监视的回调
watch的第三个参数是：配置对象（deep、immediate等等.....）
*/
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
},{deep:true})
</script>* 情况三
监视reactive定义的【对象类型】数据，且默认开启了深度监视。
// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
<template>
<div class="person">
<h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
<h2>姓名：{
{ person.name }}</h2>
<h2>年龄：{
{ person.age }}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changePerson">修改整个人</button>
<hr>
<h2>测试：{
{obj.a.b.c}}</h2>
<button @click="test">修改obj.a.b.c</button>
</div>
</template>
<script lang="ts" setup name="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18
})
let obj = reactive({
a:{
b:{
c:666
}
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changePerson(){
Object.assign(person,{name:'李四',age:80})
}
function test(){
obj.a.b.c = 888
}
// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
watch(person,(newValue,oldValue)=>{
console.log('person变化了',newValue,oldValue)
})
watch(obj,(newValue,oldValue)=>{
console.log('Obj变化了',newValue,oldValue)
})
</script>* 情况四
监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：
-
若该属性值不是【对象类型】，需要写成函数形式。
-
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
<template>
<div class="person">
<h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
<h2>姓名：{
{ person.name }}</h2>
<h2>年龄：{
{ person.age }}</h2>
<h2>汽车：{
{ person.car.c1 }}、{
{ person.car.c2 }}</h2>
<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="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
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:'雅迪',c2:'爱玛'}
}
// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
/* 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="person">
<h1>情况五：监视上述的多个数据</h1>
<h2>姓名：{
{ person.name }}</h2>
<h2>年龄：{
{ person.age }}</h2>
<h2>汽车：{
{ person.car.c1 }}、{
{ person.car.c2 }}</h2>
<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="Person">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
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:'雅迪',c2:'爱玛'}
}
// 监视，情况五：监视上述的多个数据 // [()=>person.name,()=>person.car.c1] // 针对单独的属性
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>
