Vue3：watch(监听事件)

---

一、基本概述

在项目的开发过程中，我们经常会遇到监听值或者对象的变化，然后进行后续逻辑操作的场景，Vue3为我们提供了watch监听方法。

二、watch监听值

在Vue3中，监听值的语法格式：

watch(input, (newValue, oldValue) => {console.log("新值", newValue)console.log("旧值", oldValue)
})

案例：在我们修改输入框里面的内容时，打印修改之前和修改之后的值。

<template><view class="box"><page-head title="变量监听"></page-head><view class="box-container"><input type="text" v-model="input" placeholder="请输入..."><view>输入内容：{{input}}</view></view></view>
</template>
<script setup>
import { ref, watch } from 'vue';const input = ref("")
watch(input, (newValue, oldValue) => {console.log("新值", newValue)console.log("旧值", oldValue)
})
</script>

三、watch监听对象

在Vue3中，监听对象的语法格式一共有两种：

方法一：监听对象中的某一个属性的变化

watch(() => person.value.name, (newValue, oldValue) => {console.log("新值", newValue)console.log("旧值", oldValue)
})

方法二：监听整个对象的变化

属性	含义	备注
deep	深度监听	如果是监听整个对象，必填
immediate	在监听器创建时，立即执行	在特定的场景中会使用到

watch(person, (newValue) => {console.log("新值", JSON.stringify(newValue))
}, {deep: true, immediate: true})

案例：在我们修改用户对象的姓名时，监听对象中值的变化。

<template><view class="box"><view class="box-container"><input type="text" v-model="person.name" placeholder="请输入..."><view>输入内容：{{person}}</view></view></view>
</template><script setup>
import { ref, watch } from 'vue';const person = ref({name: "张三", age: 12})
// watch(() => person.value.name, (newValue, oldValue) => {
//   console.log("新值", newValue)
//   console.log("旧值", oldValue)
// })watch(person, (newValue) => {console.log("新值", JSON.stringify(newValue))
}, {deep: true, immediate: true})</script>