Vue3中watch监听写法

  
侦听ref和reactive
 
const state = reactive({
	count: 0
})
 
// 侦听reactive中属性，需要包裹在箭头函数中
watch(() => state.count, (newVal, oldVal) => {
	
})
 
// watch直接接受ref作为监听对象，并且在回调函数返回解包后的值
const count = ref(0);
watch(count, (newVal, oldVal) => {
	
})
 
// 监听props上属性的变化
watch(() => props.msg, (newVal, oldVal) => {
	console.log(newVal, oldVal);
})

posted @ 2023-05-17 21:16 Felix_Openmind 阅读(103) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue3综合使用案例

· 计算属性和侦听器

· vue3中watch的写法大合集。

· vue3 watch 监听注意事项

· vue3 watch使用方式，如何监听reactive子属性 ref数据等

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Vue3中watch监听写法

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜


	侦听ref和reactive

	const state = reactive({
	count: 0
	})

	// 侦听reactive中属性，需要包裹在箭头函数中
	watch(() => state.count, (newVal, oldVal) => {

	})

	// watch直接接受ref作为监听对象，并且在回调函数返回解包后的值
	const count = ref(0);
	watch(count, (newVal, oldVal) => {

	})

	// 监听props上属性的变化
	watch(() => props.msg, (newVal, oldVal) => {
	console.log(newVal, oldVal);
	})