vue3中的watch函数

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,想在某个层次比较深的属性变化时执行回调:可以把第一个参数写成函数的写法,这次要监听具体的属性

相关推荐
四喜花露水7 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy16 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust1 小时前
css:基础
前端·css
帅帅哥的兜兜1 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园1 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称1 小时前
购物车-多元素组合动画css
前端·css
编程一生1 小时前
回调数据丢了?
运维·服务器·前端
丶21362 小时前
【鉴权】深入了解 Cookie:Web 开发中的客户端存储小数据
前端·安全·web