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

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

1，ref 定义的数据。

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

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

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

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

image

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>

image

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声明的数据https://www.naquan.com/，如果你使用了点value。那么会报错的哈。

image

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定义的【对象】数据类型时，监听的是对象的地址。

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

image

如果想要：地址不发生改变时，也触发 ，需要开启：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>

image

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

image

因为：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>

image

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

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

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

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

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

image

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>

image

有的文章会说：这种深度监听你是无法通过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>

image

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>

image

const person = ref({

  age:18,

  name:'张三',

  car:{

    c1:'电动车',

    c2:'燃油车'

  }

});

watch(person.value.name, (newValue,oldValue)=>{

  console.log('newValue', newValue)

  console.log('oldValue', oldValue)

})

image

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

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

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

// 因为这个属性值不是对象类型时，所以写成了函数形式

watch(()=> person.age, (newValue,oldValue)=>{

  console.log('新值：',newValue,'旧值：', oldValue)

})

image

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>

image

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

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)

})

image

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

<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>

image

终极的解决办法

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 })

image

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

总结：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>

image

什么时候需要深度监听？

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

再次说明：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>