vue3 watch 初始值

Vue3 的 `watch` 函数主要用于监听某个值的变化并执行相应的操作。对于初始值的处理方式，`watch` 默认只会在组件初始化时调用一次回调函数来处理初始值。

### Vue3 Watch 初始值示例

#### 示例 1: 监听数组元素总数

假设我们有一个名为 `nums` 的数组：

const nums = [1, 2, 3];
watch(nums, () => {
    // 当数组发生变化时会执行此操作
});

这里 `watch` 对象本身不会直接访问 `nums` 数组的内容；它仅仅在 `nums` 数组改变时触发回调。对于初始值，它只会执行一次。

#### 示例 2: 监听对象的属性变化

当我们关注的是对象的一个特定属性时，同样可以使用 `watch`:

const demo = {
    name: "Alice"
};

watch(() => demo.name, (newValue, oldValue) => {
    // 当 `demo.name` 发生变化时会执行此操作
});

在这个例子中，当 `demo.name` 属性改变时，`watch` 回调函数会被调用。

### 如何监听对象的子属性？

如果要监听对象的子属性，可以通过解构（destructuring）来实现更细粒度的监听：

const demo = {
    name: "Alice",
    age: 30
};

watch(() => ({
    ...demo
}), (newValue, oldValue) => {
    // 这里能访问到整个对象的变更情况
});

// 如果只想监听 name 属性的变化：
watch(() => demo.name, (newValue, oldValue) => {
    // 只监听 name 属性的变化
});

### 注意事项：

- **初始值处理**：默认情况下，`watch` 不会对初始值做特殊处理，只会在之后的值变动时触发。若需要针对初始值执行额外操作，通常需要手动编写逻辑来覆盖这种情况。
- **性能考虑**：频繁地使用 `watch` 可能会影响应用的性能。合理利用生命周期钩子或其他优化策略来管理依赖和更新逻辑可能更为高效。

---