ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

2026/9/24 14:18:13 拓冰建站 浏览量
Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用,如何监听一个对象中的属性值的变化

由 vue2 转到 vue3 + ts + vite 之后都不会写这些玩意了。搜了下,找到了答案:

vue2 的 watch

<script>export default {watch: {'$route.query.id'(newValue){// 可以这样监听路由的变化},'formUser.address'(){// 可以这样监听一个对象内的属性的变化}}}
</script>

vue3 + ts + vite 的 watch

vue3 的 watch 改成了,监听的对象是 ref() 值,或者一个返回实际值的 方法

<script lang="ts" setup>
const formUser = ref({address: '一个地方',age: 34
})watch(formUser, newValue => {// 监听 formUser 的变化// newValue 的值就是 formUser 的真实值 === formUser.value
})
watch(()=> formUser.value.address, newValue => {// 监听 formUser.adress 值的变化// newValue === formUser.value.adress
})</script>

在这里插入图片描述