Vue3中 watch、watchEffect 详解

在 Vue 3 中,watch API 得到了增强和重新设计,以提供更加灵活和强大的响应式数据监听能力。Vue 3 引入了 Composition API,其中 watch 函数是 Composition API 的一部分,允许你在 setup() 函数中直接监听响应式引用(ref)或响应式对象(reactive)的变化。

基本用法

在 Vue 3 的 Composition API 中,watch 函数的基本用法如下:

复制代码

javascript复制代码

|---|----------------------------------------------------------|
| | import { ref, watch, onMounted } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const count = ref(0); |
| | |
| | // 监听 count 的变化 |
| | watch(count, (newValue, oldValue) => { |
| | console.log(`count 从 ${oldValue} 变成了 ${newValue}`); |
| | }); |
| | |
| | // 可以在 onMounted 中启动异步操作,并在完成后更新 count |
| | onMounted(() => { |
| | setTimeout(() => { |
| | count.value++; |
| | }, 1000); |
| | }); |
| | |
| | return { |
| | count, |
| | }; |
| | }, |
| | }; |

监听多个源

watch 也可以同时监听多个响应式引用或响应式对象,当它们中的任何一个发生变化时,都会执行回调函数。

复制代码

javascript复制代码

|---|-------------------------------------------------------------------------------------------------|
| | import { ref, watch } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const firstName = ref('John'); |
| | const lastName = ref('Doe'); |
| | |
| | watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => { |
| | console.log(`名字从 ${oldFirstName} ${oldLastName} 变成了 ${newFirstName} ${newLastName}`); |
| | }); |
| | |
| | return { |
| | firstName, |
| | lastName, |
| | }; |
| | }, |
| | }; |

深度监听

默认情况下,watch 只会监听响应式引用的值的变化,而不会深入监听对象内部属性的变化。如果你需要深度监听一个响应式对象,可以传递第三个参数 { deep: true }

复制代码

javascript复制代码

|---|----------------------------------------------------|
| | import { reactive, watch } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | const user = reactive({ |
| | name: 'John Doe', |
| | age: 30, |
| | }); |
| | |
| | watch(user, (newValue, oldValue) => { |
| | // 注意:这里不会触发,因为 user 对象引用没有变 |
| | // 除非使用深度监听 |
| | }, { deep: true }); |
| | |
| | // 深度监听 user 对象内部属性的变化 |
| | watch(() => user.name, (newName, oldName) => { |
| | console.log(`名字从 ${oldName} 变成了 ${newName}`); |
| | }); |
| | |
| | return { |
| | user, |
| | }; |
| | }, |
| | }; |

立即执行

如果你希望在监听开始时立即执行回调函数,可以传递 { immediate: true } 作为 watch 的第四个参数。

复制代码

javascript复制代码

|---|-------------------------------------------|
| | watch(count, (newValue, oldValue) => { |
| | // ... |
| | }, { immediate: true }); |

停止监听

watch 函数返回一个停止监听的函数。你可以调用这个函数来停止监听响应式数据的变化。

复制代码

javascript复制代码

|---|-------------------------------------------------------------|
| | const stopWatch = watch(count, (newValue, oldValue) => { |
| | // ... |
| | }); |
| | |
| | // 停止监听 |
| | stopWatch(); |

这些是使用 Vue 3 中 watch 函数的基本和高级用法。通过灵活使用这些功能,你可以有效地管理组件中的响应式数据变化。

相关推荐
博客zhu虎康40 分钟前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海1 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏1 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码2 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby2 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹2 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel2 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh2 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富2 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的3 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#