vue3中的watch的用法和几种常见情况

最新推荐文章于 2025-04-30 08:44:18 发布

晓蓝

最新推荐文章于 2025-04-30 08:44:18 发布

阅读量1.1w

点赞数 8

分类专栏： vue学习文章标签：前端框架 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44437816/article/details/124641625

版权

vue学习专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue3中watch函数的使用，包括基本用法、数组和对象监听、配置项、深度监视以及针对不同场景的应用实例。重点讲解了如何监听数值、对象属性及嵌套结构的变化，并展示了配置immediate选项和深度监听的重要性。

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

vue3中的watch是一个组合式的API使用时需要引入

watch函数收三个参数：

需要进行监听的数据的数组，
监听的数据发生改变时的回调
配置项

情况一（监视一个数字的变化）

let count = ref(0) 
watch(count,(newV,oldV)=>{
    console.log(newV,oldV);
})

情况二（监听俩个数据的变化）

let year = ref(2000) 
let age = ref(22) 
function count(){
    year.value++
    age.value++
}
watch([year,age],(newV,oldV)=>{
    console.log(newV,oldV);
})

加入配置项参数

let year = ref(2000) 
let age = ref(22) 
function count(){
    year.value++
    age.value++
}
watch([year,age],(newV,oldV)=>{
    console.log(newV,oldV);
},{immediate:true})  //设置立即监听

会立即监听一次

情况三（监听reactive管理的对象的变化）

const student = reactive({
       name:'张三',
       age:20,
       a:{
           b:{
               salary:'20k'
           }
       }
  })
function changeName(){
    student.name = student.name + '@'
}
function changeAge(){
    student.age ++
}
function changeSalary(){
    student.a.b.salary = "50k"
}
watch(student,(newV,oldV)=>{
    console.log(newV,oldV);
})

注意：此时的oldValue失效，在监听深层次的数据时依旧可以监听到变化，可以看出vue3默认开启了深度监视

情况4（监听对象中的某个属性）

//上方代码watch改写为
watch(()=>student.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
})

监听对象的某个属性需要将watch函数的第一个参数写为一个函数需要监听的属性作为返回值，可以正确的获得oldValue

情况5（监听对象的某些属性）

//watch改写为
watch([()=>student.name,()=>student.age],(newValue,oldValue)=>{
    console.log(newValue,oldValue);
})

监听对象的一些属性传入的第一个参数是存放返回对象属性的函数的数组，oldValue有效

情况6（监听对象套很深的对象的属性）

const student = reactive({
  a: {
    b: {
      salary: "20k",
    },
  },
});
function changeSalary() {
  student.a.b.salary = "50k";
}
watch(
  () => student.a,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  },
  { deep: true }
);