vue3 watch 深度侦听
时间: 2023-08-17 18:11:22 浏览: 65
在 Vue 3 中,可以通过 `watch` 函数来进行深度侦听。深度侦听是指在对象或数组的嵌套属性发生变化时触发回调函数。
下面是一个示例:
```javascript
import { watch } from 'vue';
watch(
() => obj.nestedProp,
(newValue, oldValue) => {
// 当 obj.nestedProp 发生变化时会触发回调函数
// newValue 是新的值,oldValue 是旧的值
},
{ deep: true }
);
```
在上面的示例中,我们使用 `watch` 函数监视 `obj.nestedProp` 的变化,并在发生变化时触发回调函数。通过传递 `{ deep: true }` 选项,我们可以实现深度侦听。
需要注意的是,深度侦听会带来一些性能开销,因为 Vue 需要递归地遍历整个对象或数组。因此,建议只在需要深度侦听时才使用深度选项。
希望能帮到你!如果还有其他问题,请随时提问。
相关问题
vue watch侦听器
Vue中的watch是一个侦听器,用于监听数据的变化,并在数据变化时执行相应的操作。通过watch,我们可以监听某个数据的变化,并在数据变化时执行一些特定的逻辑,例如发送网络请求、更新UI等。
watch的语法如下:
```javascript
watch: {
// 监听的数据
someData: function (newValue, oldValue) {
// 在数据变化时执行的操作
// newValue为新值,oldValue为旧值
}
}
```
可以通过watch监听单个数据的变化,也可以监听多个数据的变化:
```javascript
watch: {
// 监听单个数据的变化
someData: function (newValue, oldValue) {
// 在数据变化时执行的操作
},
// 监听多个数据的变化
anotherData: function (newValue, oldValue) {
// 在数据变化时执行的操作
}
}
```
watch还可以使用深度监听来监听对象或数组中的属性变化:
```javascript
watch: {
// 监听对象中某个属性的变化
'obj.prop': function (newValue, oldValue) {
// 在属性变化时执行的操作
},
// 监听数组中某个元素的变化
'arr.0': function (newValue, oldValue) {
// 在元素变化时执行的操作
}
}
```
除了监听数据的变化,watch还可以监听路由参数的变化:
```javascript
watch: {
// 监听路由参数的变化
$route: function (to, from) {
// 在路由参数变化时执行的操作
}
}
```
总之,watch是Vue中非常重要的一个功能,它可以帮助我们监听数据、路由参数等的变化,并在变化时执行相应的操作,从而实现更加复杂的应用逻辑。
vue3watch 配置
在Vue 3中,watch函数的配置有以下几种方式:
1. 监视ref(监视基本类型):
```javascript
const money = ref(100);
watch(money, (newVal, oldVal) => {
console.log("money变化了", newVal, oldVal);
});
```
2. 监视reactive(监视复杂类型):
```javascript
const state = reactive({
money: 100,
car: { brand: "宝马" }
});
watch(state, (newVal, oldVal) => {
console.log("state变化了", newVal, oldVal);
});
```
3. 监视对象里面的属性,属性的值是基本类型:
```javascript
const state = reactive({
money: 100,
car: { brand: "宝马" }
});
watch(() => state.money, (newVal, oldVal) => {
console.log("state.money变化了", newVal, oldVal);
});
```
4. 监视对象里面的属性,属性的值是复杂类型:
```javascript
const state = reactive({
money: 100,
car: { brand: "宝马" }
});
watch([() => state.car.brand], (newVal, oldVal) => {
console.log("state.car.brand变化了", newVal, oldVal);
});
```
5. 监视reactive定义的响应式数据中的某些属性:
```javascript
watch([() => person.job, () => person.name], (newValue, oldValue) => {
console.log('person的job或name变化了', newValue, oldValue);
}, { immediate: true, deep: true });
```
在以上示例中,watch函数的第一个参数可以是一个ref、reactive对象,也可以是返回需要监视的属性的函数。第二个参数是回调函数,用于处理属性的变化。可以通过配置对象作为watch函数的第三个参数,进行额外的配置,如immediate和deep参数。其中immediate参数表示立即侦听(页面一刷新就会监听),deep参数表示深度侦听。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3之watch](https://blog.csdn.net/qq_52421092/article/details/131067716)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [【vue笔记】vue3中的watch函数配置功能以及两个小坑](https://blog.csdn.net/ONLYSRY/article/details/125725832)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]