vue3中watch（监听）的五种情况

前端小侯不是候

已于 2024-01-11 12:24:21 修改

阅读量1.5w

点赞数 39

文章标签： vue.js 前端 javascript

于 2024-01-11 10:44:59 首次发布

本文链接：https://blog.csdn.net/weixin_59233142/article/details/135507159

版权

本文详细解释了Vue3中watch函数的使用场景，重点介绍了如何监听ref和reactive定义的数据，以及对象类型数据的浅层和深层变更，包括对象属性修改的触发条件和深度监听的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：监听数据的变化（和Vue2中的watch作用一致）

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

1. ref 定义的数据

2. reactive 定义的数据

3. 函数返回的一个值

4. 一个包含上述内容的数组

情况一：监视【ref】定义的【基本类型】数据

watch接收两个参数
第一个：要监听的值
第二个：函数，接收两个参数：新的值与旧的值

watch返回一个函数，函数作用是停止监听

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

   let sum = ref(1);

   let changeSun = ()=>{
      sum.value++;
   }
    
   // watch 接收两个参数
   // 第一个是要监听的值
   // 第二个是监听的值发现变化要执行的函数
   // watch 返回一个函数，函数作用是停止监听
   const stopWatch = watch(sum, (newValue,oldValue)=>{
      // newValue 是新的值
      // oldValue 是旧的值
      if(newValue>=10){
         stopWatch()
      }
   })
 
</script>

情况二：监视【ref】定义的【对象类型】数据

当监视【ref】定义的【对象类型】数据时：

1. 修改对象里的某个属性时是不会触发监听的

2. 只有修改整个对象的时候才会触发

如果要修改对象里的某个属性时也触发监听侧需要传递第三个参数

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

let person = ref({
   name: "张三",
   age: 18
});

// 监听 person
const stopWatch = watch(person, (newValue, oldValue) => {
   console.log(newValue, oldValue)
})

// 修改name不会触发监听
let changeName = () => {
   person.value.name += "-"
}
// 修改整个对象才会触发监听
let changePerson = () => {
   person.value = {
      name: "李四",
      age: 19
   };
}
</script>

<template>
      姓名：{{ person.name }}
      年龄：{{ person.age }}
      <button @click="changeName">修改姓名</button>
      <button @click="changePerson">都改</button>
</template>

如果要修改对象里的某个属性时也触发监听侧需要传递第三个参数
第三个参数是一个配置对象：{deep: true}

可选值：

1. immediate：在监听创建时立即触发回调，第一次调用时旧值是undefined

2. deep：如果监听的值是对象，强制使用深度遍历，一遍在深层级变更时触发回调

3. flush：调整回调函数的刷新时机

'pre' ：在组件更新更新前运行，默认为'pre'

'post'：在组件更新更新后运行

'sync'：强制效果始终同步触发。然而，这是低效的，应该很少需要。

4. onTrack / onTrigger：调试监听的依赖

onTrack(e) {

// 当监听的值被追踪为依赖时触发

debugger

},

onTrigger(e) {

// 当监听的值被更改时触发

debugger

}

注意：只修改对象中的某个属性时新值与旧值是一样的，只有修改整个对象时新值与旧值才正确

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

let person = ref({
   name: "张三",
   age: 18
});

const stopWatch = watch(person, (newValue, oldValue) => {
   console.log(newValue, oldValue)
},{deep: true})
// 加上{deep: true}则修改person中的name属性也会触发监听
let changeName = () => {
   person.value.name += "-"
}
let changePerson = () => {
   person.value = {
      name: "李四",
      age: 19
   };
}
</script>

<template>
      姓名：{{ person.name }}
      年龄：{{ person.age }}
      <button @click="changeName">修改姓名</button>
      <button @click="changePerson">都改</button>
</template>

情况三：监视【reactive】定义的【对象类型】数据

1. 监听时默认开启了深度监视，并且关不掉

2. 只修改对象中的某个属性时新值与旧值是一样的，只有修改整个对象时新值与旧值才正确

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

let person = reactive({
   name: "张三",
   age: 18
});
// 能监听到
let btn1 = () => {
   person.name += "-"
}
// 能监听到
let btn2 = () => {
   Object.assign(person, {
      name: "李四",
      age: 19
   });
}
// 监听不到
let btn3 = () => {
   person = {
      name: "李四",
      age: 19
   };
}

// 默认开启深度监视
const stopWatch = watch(person, (newValue, oldValue) => {
   console.log(newValue, oldValue)
})

情况四：监视【ref、reactive】定义的【对象类型】数据中的某个属性

1. 监听的属性是基本数据类型，则需要写成函数返回值

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

let person = reactive({
   name: "张三",
   age: 18
});

// 能触发监听
let btn1 = () => {
   person.name += "-"
}
// 不能触发监听
let btn2 = () => {
   person.age++
}

// 监听的值写成函数返回值，只能监听到 name 的改变
watch(()=>person.name, (newValue, oldValue) => {
   console.log(newValue, oldValue)
})

</script>

2. 监听的属性是一个对象，则可以直接写或者写成函数返回值

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

let person = reactive({
   cra:{
      c1:"奔驰",
      c2:"宝马"
   }
});

// 只能监听到 c1、c2的变化，整个 cra 对象改变监听不到
watch(person.cra, (newValue, oldValue) => {
   console.log("直接写")
})

// 只能监听到整个 cra 对象改变，c1、c2的变化监听不到
watch(()=>person.cra, (newValue, oldValue) => {
   console.log("函数形式")
})

// cra、c1、c2 都能监听到，推荐写法
watch(()=>person.cra, (newValue, oldValue) => {
   console.log("函数形式+深度监听")
},{deep:true})

</script>

情况五：监视上述多个数据

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

let person = reactive({
   name: "张三",
   age: 18,
   cra: {
      c1: "奔驰",
      c2: "宝马"
   }
});

// 监视上述多个数据
watch([()=>person.name,person.cra], (newValue,oldValue) => {
   console.log("监视上述多个数据",newValue,oldValue)
})

// 可以监听到
let btn1 = () => {
   person.name += "-"
}
// 可以监听到
let btn2 = () => {
   person.cra.c1 ="宝马123"
}
// 不可以监听到，要是不明白这里为什么可以监听到在回去看看情况四
let btn3 = () => {
   person.cra = {
      c1: "奔驰123",
      c2: "宝马123"
   }
}

</script>