vue3中的watch函数

刽子手发艺2024-07-18 12:04

watch函数

作用：监听数一个或者多个数据的变化，数据变化时执行回调函数，两个额外的参数：1、immediate（立即执行）2、deep（深度监听）

监听单个数据：

javascript 复制代码

<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
  count.value++
}
watch(count,(newVal,oldVal) => {
  console.log('count变化了',newVal,oldVal)
})
</script>
<template>
  <div>
    <button @click="setCount">{{ count }}</button>
  </div>
</template>

监听多个数据：

javascript 复制代码

<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const changeCount = () => {
  count.value++
}
const name = ref('con')
const changeName = () => {
  name.value = 'pc'
}

watch(
  [count,name],
  (
    [newCount,newName],
    [oldCount,oldName]
  ) => {
    console.log('有值发生变化了',[newCount,newName],
      [oldCount,oldName]
    )
  }
)
</script>

immediate：在监听器创建时立即触发回调，响应式数据变化之后继续执行回调

javascript 复制代码

watch(count,() =>{
	console.log('count变化了')
},{
	immediate: true
})

deep

通过watch监听的ref对象默认是浅层监听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

javascript 复制代码

const state = ref({ count:0 })
watch(state,() => console.log('数据变化了'))
const changeStateByCount = () => {
//直接1修改属性 -> 不会触发回调
state.value.count++
}

//深度监听
watch(state,() => {
    console.log('count变化了')
},{
    deep: true
})

deep开启之后，对象中的任意一个属性发生了变化以后都会触发回调

精确监听对象的某个属性：

在不开启deep的前提下，监听age的变化，只有age发生变化的时候才会发生回调

javascript 复制代码

const info = ref({
	name: 'cp',
	age: 18
})
watch(
//监听具体某一属性
	() => info.value.age,
	() =>console.log('age发生变化了')
)

总结：

1、作为watch函数的第一个参数，ref对象不需要添加.value

2、watch可以监听多个数据，使用数组封装

3、不开启deep，直接修改嵌套属性不会触发回调

4、不开启deep，想在某个层次比较深的属性变化时执行回调：可以把第一个参数写成函数的写法，这次要监听具体的属性