vue3 watch immediate
时间: 2024-08-09 17:01:05 浏览: 52
### Vue 3 中 `watch` 属性 `immediate`
在 Vue 3 中,`watch` 属性中的 `immediate` 参数用于控制回调函数何时执行。默认情况下,`watch` 函数会在每次数据更新时调用回调函数。然而,通过设置 `immediate` 为 `true`,你可以指定回调函数只在初始数据加载完毕后的第一次渲染阶段执行。
#### 示例:
假设我们有一个名为 `state` 的对象,其中包含了我们需要监控的状态属性 `name`。
```javascript
const state = {
name: 'Alice'
};
// 使用 watch 监听并立即执行回调
watch({
name: function(newName, newNameOld) {
console.log(`Initial name was ${newNameOld} and now it's ${newName}`);
},
immediate: true
});
```
在这段代码中:
1. 我们定义了一个 `state` 对象,包含属性 `name`。
2. 我们创建了一个 `watch` 函数,关注 `name` 属性的变化。
3. 设置了 `immediate: true` 表示我们在 `name` 初始赋值时就应该执行回调函数。
运行上述代码时,你会看到控制台输出:
```
Initial name was undefined and now it's Alice
```
这是因为 `immediate: true` 引导了在 `name` 初始化赋值时执行了回调函数,打印出了初始化前后的状态变化信息。
#### 注意点:
- `immediate` 应仅在确实需要在初始化完成后立即执行某些特定逻辑的情况下启用。过度使用可能导致不必要的性能损耗。
- 如果 `immediate` 设置为 `false`(默认情况),则回调函数将在每次 `name` 更新时执行。
---
##