vue3中的watch详细讲解保证看的明明白白

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

1，ref 定义的数据。

2，一个响应式对象（如：reactive 定义的数据）。

3，函数的返回一个值（getter函数）。getter函数其实就是：能返回一个值的函数

4，由以上类型的值组成的数组

地址：https://cn.vuejs.org/api/reactivity-core.html#watch

vue3中watch监听 ref定义的基本数据类型

<template>
  <div class="box">
   姓 <input v-model="xingValue" /> <br>
     <button @click="changeHandler">更改值</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch } from 'vue';
const xingValue = ref('Zhang');
function changeHandler(){
  xingValue.value = 'Li';
}

watch(xingValue, (newValue,oldValue)=>{
  console.log('watch监听到的值新值：',newValue,'旧值：', oldValue)
})
</script>

watch监听ref声明的数据，第1个参数是不需要点value

如果我们使用watch监听ref声明的数据，第1个参数是不需要点value的。

const age = ref(1);
// watch监听ref声明的数据，第1个参数是不需要点value
watch(age, (newValue,oldValue)=>{
  console.log('watch监听到的值新值：',newValue,'旧值：', oldValue)
})

如果你使用ref声明的数据，如果你使用了点value。那么会报错的哈。

watch监听ref定义的对象数据类型

watch监听ref定义的【对象】数据类型时，监听的是对象的地址。

若是想要监听【对象内部属】性的变化，也就是细枝末节的变化。首要手动开启deep：true。

若是不开启deep：true，则监听不到。

watch监听ref定义的【对象】数据类型时，若是不开启deep：true，则监听不到对象内部属性的变化。

<template>
  <div class="box">
     <p>{{ perosn }}</p>
     <button @click="changeHandler">更改值</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch } from 'vue';
const perosn = ref({
  name: 'zhangsan',
  age: 18
});
function changeHandler(){
 perosn.value.age+=1
}
watch(perosn, (newValue,oldValue)=>{
  console.log('watch监听到的值新值：',newValue,'旧值：', oldValue)
})
</script>

为啥更改ref定义的【对象】的属性时不会触发。

因为：watch监听ref定义的【对象】数据类型时，监听的是对象的地址。

地址没有发生改变，因此就不会触发。



如果想要：地址不发生改变时，也触发 ，需要开启：deep:true

watch开启deep:true监听ref对象内部属性的变化

watch开启deep:true监听ref对象内部属性的变化

<template>
  <div class="box">
     <p>{{ perosn }}</p>
     <button @click="changeHandler">更改值</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch } from 'vue';
const perosn = ref({
  name: 'zhangsan',
  age: 18
});
function changeHandler(){
 perosn.value.age+=1
}
watch(perosn, (newValue,oldValue)=>{
  console.log('watch监听到的值新值：',newValue,'旧值：', oldValue)
},{
  deep: true
})
</script>

watch监听ref定义的对象内部属性变化时，开启deep:true 新值和旧值是一样的

因为：watch监听ref定义的【对象】数据类型时，监听的是对象的地址。他们的地址是没有发生改变的。

watch监听ref定义的对象时，修改整个对象，newValue 和 oldValue 是不一样的

<template>
  <div class="box">
     <p>{{ perosn }}</p>
    <button @click="allHandler">更改整个属性</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch } from 'vue';
const perosn = ref({
  name: 'zhangsan',
  age: 18
});

function allHandler(){
  // 若修改整个ref 定义的对象,这个时候地址发生变化了。
  // 如果你多次点击，会多次触发。
  perosn.value = {
    name: 'wangmazi',
    age: 30
  }
}
watch(perosn, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
},{
  deep: true
})
</script>

总结：watch监听ref声明对象类型的数据时

watch监视 ref 定义的【对象类型】数据时，直接写数据名，监视的是对象的【地址值】

若想监视对象内部的数据，要手动开启深度监视

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

若修改整个ref 定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了

watch监视【reactive】定义的【对象类型数据】，默认是开启深度监视的

只要我们使用watch去监听reactive定义的对象类型数据

无论数据层级有多么深，watch都是可以监听到的，并且它默认是开启了深度监听的。

无论内部变化的是某个属性，还是对象，都可以监听到。

监听这种是最省心的，因为无论怎么变化，都是可以监听到的哈哈。

<template>
  <div>
    <h1>{{  person }}</h1>
    <button @click="allHandler">更改car这个对象</button>
    <button @click="oneNameHandler">更改某个属性name</button>
  </div>
</template>
<script lang="ts" setup>
import { watch,reactive } from 'vue';
const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});
function allHandler(){
  person.car = {
    c1:'小米',
    c2:'Su7'
  }
}
function oneNameHandler(){
  person.name = '李四';
}
// watch监视【reactive】定义的【对象类型数据】,默认是开启深度监视的
// 无论内部变化的是某个属性，还是对象，都可以监听到。
watch(person, (newValue,oldValue)=>{
   console.log('新值：',newValue)
   console.log('旧值：', oldValue)
})
</script>

有的文章会说：这种深度监听你是无法通过deep：false来进行关闭的。

这种说法不太正确，在现在的vue3.5版本中。

通过deep：false是可以关闭监听的。

<template>
  <div class="box">
     <p>{{ person }}</p>
    <button @click="allHandler">更改整个属性</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch, reactive } from 'vue';
const person = reactive({
  a:{
    b:{
      c: 1
    }
  }
});
function allHandler(){
  person.a.b.c +=1
}
 watch(person, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
},{
  deep: false,
})
</script>

watch监视 ref 或 reactive定义的【对象类型】数据中的某个属性

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

1,若该属性值是【对象类型】，可直接写数据源，也可写成函数(建议写成函数)。并且推荐开启深度监听。

2,若该属性值不是【对象类型】，需要写成函数形式。否则会在控制台产生告警。

若该属性值不是【对象类型】，需要写成函数形式

<template>
  <div class="box">
     <p>{{ person }}</p>
    <button @click="allHandler">更改整个属性</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch, reactive } from 'vue';
const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});
function allHandler(){
  person.age+=1
}
// 监听person.age属性,会产生警告。
 watch(person.age, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
})
</script>

const person = ref({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});
watch(person.value.name, (newValue,oldValue)=>{
  console.log('newValue', newValue)
  console.log('oldValue', oldValue)
})

现在有警告。为啥会警告。

因为：watch监视 ref 或 reactive定义的【对象类型】数据中的某个属性时。

如果这个属性值不是对象类型时，需要写成函数形式。【重点】

// 因为这个属性值不是对象类型时，所以写成了函数形式
 watch(()=> person.age, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
})

watch监听reactive定义的对象，监听的属性是对象（写成数据源形式），你替换整个对象，监听不到。

<template>
  <div class="box">
     <p>{{ person }}</p>
      <button @click="allOneHandler">更改某个属性</button>
      <button @click="allHandler">更改整个对象</button>
  </div>
</template>
<script setup lang="ts">
import {  ref, computed, watch, reactive } from 'vue';
const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});

function allOneHandler(){
  person.car.c1 = '--我的电动车--';
}
function allHandler(){
  person.car = {
    c1:'--电动车--',
    c2:'--燃油车--'
  }
}
 watch(person.car, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
})
</script>

为什么上面的直接更改整个监听对象，监听不到。

person.car = {
  c1:'--电动车--',
  c2:'--燃油车--'
}
watch(person.car,()=>{})

因为：当你替换整个car的时候，已经不再是原来的car。因此无法监听到。

怎么让它也可以监听到呢？写成函数形式。

const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});

function allHandler(){
  person.car = {
    c1:'--电动车--',
    c2:'--燃油车--'
  }
}

 watch(()=>person.car, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
})

写成函数形式，监听整某个具体属性又不行了。

<template>
  <div>
    <h1>{{  person }}</h1>
    <button @click="allHandler">更改car这个对象</button>
    <button @click="allOneHandler">更改某个属性</button>

  </div>
</template>

<script lang="ts" setup>
import { watch,reactive } from 'vue';

const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});

function allHandler(){
  person.car = {
    c1:'--电动车--',
    c2:'--燃油车--'
  }
}
function allOneHandler(){
  person.car.c1 += '--我的电动车--';
}
 watch(()=>person.car, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
})
</script>

终极的解决办法

const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});

function allOneHandler(){
  person.car.c1 += '--我的电动车--';
}
function allHandler(){
  person.car = {
    c1:'--电动车--',
    c2:'--燃油车--'
  }
}

watch(()=>person.car, (newValue,oldValue)=>{
  console.log('新值：',newValue,'旧值：', oldValue)
},{ deep: true })

这样无论是更改整个对象还是对象内部的属性变化。都可以监听到啦。

总结：watch监听reactive/ref定义的内部属性时，监听的属性是对象，推荐写成函数形式，并且开启深度监听。

watch的数据源写成一个数组

有些时候，我们需要监听一个对象中的几个属性或者好几个不同的对象。

这个时候我们可以写成一个数组的形式

<template>
  <div>
    <h1>{{  person }}</h1>
    <button @click="allHandler">更改car这个对象</button>
    <button @click="oneNameHandler">更改某个属性name</button>
  </div>
</template>
<script lang="ts" setup>

import { watch, reactive } from 'vue';
const person = reactive({
  age:18,
  name:'张三',
  car:{
    c1:'电动车',
    c2:'燃油车'
  }
});
function allHandler(){
  person.car = {
    c1:'小米Su7',
    c2:'小米Yu7'
  }
}
function oneNameHandler(){
  person.name = '李四';
}

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

什么时候需要深度监听？

明明人家监听的是地址的变化，结果你想要监听某个值的变化

再次说明：watch为啥新值和旧值一样？

因为监听的是地址，你更改属性时，地址没有发生变化。

Object.assign更改时，也是只更改了属性，并没有产生新的地址。

相当于你新装修房子，你只换了灯，床，房子的地址没有发生变化。

因此：新值和旧值是一样的。

取消watch监听

将watch赋值给一个变量，调用这个变量。就可以停止监听了。

import {  ref, computed, watch } from 'vue';
const age = ref(1);
function changeHandler(){
  age.value +=1
}
let stopWatch =  watch(age, (newValue,oldValue)=>{
  console.log('watch监听到的值新值：',newValue,'旧值：', oldValue)
  if(newValue>3){
    stopWatch()
  }
})
</script>