一文搞懂Vue中watch侦听器的用法
更新时间：2023年11月02日 09:56:30 作者：森呼吸。
在Vue.js中,您可以使用watch选项来创建侦听器,以侦听特定属性的变化,侦听器可以在属性发生变化时执行相关的逻辑,本文给大家详细讲讲Vue中watch侦听器的用法,需要的朋友可以参考下
watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用
watch第一个参数监听源
watch第二个参数回调函数cb（newVal,oldVal）
watch第三个参数一个options配置项是一个对象{
immediate:true //是否立即调用一次
deep:true //是否开启深度监听
flush:“pre” // 更新时机
}
flush配置项
| pre | sync | post |
|---|---|---|
| 组件更新前执行（默认） | 强制效果始终同步触发 | 组件更新后执行 |
1. 监听Ref 案例
import { ref, watch } from 'vue'
let message = ref({
nav:{
bar:{
name:""
}
}
})
watch(message, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
},{
immediate:true,
deep:true
})
监听多个ref 注意变成数组
import { ref, watch ,reactive} from 'vue'
let message = ref('')
let message2 = ref('')
watch([message,message2], (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
})
2. 监听Reactive
使用reactive监听深层对象开启和不开启deep 效果一样
import { ref, watch ,reactive} from 'vue'
let message = reactive({
nav:{
bar:{
name:""
}
}
})
watch(message, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
})
监听reactive 单一值
import { ref, watch ,reactive} from 'vue'
let message = reactive({
name:"",
name2:""
})
watch(()=>message.name, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
}
以上就是一文搞懂Vue中watch侦听器的用法的详细内容，更多关于Vue watch侦听器的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
原生 JavaScript 实现,模拟 Vue 3 的 v-model 功能,包括表单元素和组件支持,我们将逐步构建代码,并提供使用示例,对vue v-model原理解析感兴趣的朋友一起看看吧2025-04-04
Vue 中ref()和 reactive()响应式数据的使用方法
article介绍Vue3中ref()和reactive()函数的使用方法,ref()用于创建基本数据类型的响应式引用,reactive()用于创建响应式对象,本文介绍Vue中ref()和reactive()响应式数据的使用方法,感兴趣的朋友一起看看吧2025-01-01
Uniapp打包到线上,会出现双标题问题,原因是：通过地址链接访问时,会有个浏览器自身的标题,和uniapp自身的导航栏标题重复,本文给大家介绍了uniapp如何解决H5页面双标题,需要的朋友可以参考下2024-10-10
vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量,这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量,感兴趣的朋友一起看看吧2024-07-07
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于Vue3中vuex的基本使用方法,需要的朋友可以参考下2022-04-04
解决创建vue项目后没有vue.config.js文件的问题
这篇文章给大家主要介绍如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件，文中有详细的解决方法，感兴趣的朋友可以参考阅读下2023-07-07
Ant Design Vue resetFields表单重置不生效问题及解决
这篇文章主要介绍了Ant Design Vue resetFields 表单重置不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了Vue使用emit传参,父组件接收不到数据的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
vue最强table vxe-table 虚拟滚动列表 前端导出问题分析
最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧2023-10-10
最新评论