用“Watch”来属性变化·简单来说·它有点像是一个计算器专门用来计算并返回一个值
一、用“Watch”来监听属性变化
在 Vue 的世界里，如果你想让子组件在属性变化时自动做点什么，使用 watch 就是个不错的选择。简单来说，就是给子组件加个“监视器”，专门盯着某个属性。下面来具体看看怎么操作： 1. 接收父组件的属性：在子组件里定义一些你想要的属性，就像这样： ```javascript props: ['someProp'] ``` 2. 监视属性变化：然后在子组件的 `watch` 选项里，定义一个和属性名一样的函数，这样当属性值一变动，这个函数就会跳出来工作： ```javascript watch: { someProp(newValue, oldValue) { console.log('属性值变了，新值是：', newValue, '旧值是：', oldValue); } } ``` 3. 执行操作：在这个函数里，你可以写上你需要执行的复杂逻辑。举个例子
```javascript{{ someProp }}
```
在这个例子中，每当组件被挂载到 DOM 上时，就会执行 `initialize` 方法。
四、不同方法的适用场景对比
| 方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| watch | 需要执行复杂逻辑 | 灵活，适用于复杂逻辑 | 代码可能较冗长 |
| computed | 需要对属性进行计算并展示 | 简洁，适用于简单逻辑 | 仅适用于计算和展示 |
| 生命周期钩子 | 需要在属性变化时进行初始化操作 | 使用方便，适用于初始化操作 | 不能单独监听某个属性变化 |