vue中的watch

在Vue中，可以使用watch来监视data数据的变化。当被监视的数据发生变化时，watch中定义的相关方法会被调用。有两种方法可以使用watch语法。

第一种方法是不需要配置项，只需一个handler。可以通过以下方式定义watch：
watch: {
key: function(newVal, oldVal) {},
"obj.key": function(newVal, oldVal) {}
}
其中，key为所要监视的属性名，名称要与data中的属性名对应。newVal和oldVal是自动传递的参数，不需要手动传递。newVal表示当前属性改变后的值，oldVal表示当前属性改变前的值。

第二种方法是需要配置项的方式。可以通过以下方式定义watch：
watch: {
key: {
deep: false,
handler: function(newVal, oldVal) {}
},
"obj.key": {
deep: false,
handler: function(newVal, oldVal) {}
}
}
在这种方法中，可以通过配置项来设置监视器的行为。deep属性表示是否深度监视，handler是监视器的回调函数。

举个例子，如果想要监听对象中的某一项，可以这样写：
<template>
<div>
<div>
<input type="text" v-model="obj.something">
</div>
</div>
</template>

<script>
export default {
name: "AboutView",
components: {},
data() {
return {
obj: {
something: ""
}
}
},
watch: {
"obj.something": {
handler(newVal, oldVal) {
console.log(`新的值: ${newVal}`);
console.log(`旧的值: ${oldVal}`);
console.log("hello world");
}
}
}
}
</script>

另外，如果想要监听对象中的属性，可以这样写：
data: {
obj: {
message: 'i love china'
}
},
watch: {
"obj.message": function() {}
}
这样就可以在obj.message属性发生变化时调用相应的回调函数。
#### 引用[.reference_title]
- *1* *3* [Vue中的watch(监听)](https://blog.csdn.net/qq_44998582/article/details/122333475)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [VUE中watch的详细使用教程](https://blog.csdn.net/qq_59917539/article/details/128082707)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]