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

相关推荐
jessezappy3 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林84330 分钟前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐41 分钟前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq42 分钟前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing1 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风1 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟1 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript