上述联动的select如何用vue实现呢？
1.1使用watch方法
- 当监听的对象发生变化时，watch里的handler函数会自动调用；监听的对象既可以是data里的，也可以是computed里的计算属性；
- 如果不需要配置deep或immediate属性时，watch里的方法可以简写，如上图；
- deep属性：默认情况下，watch 是浅层的，只观察对象本身（一层）的变化，不会观察对象内部属性的变化。配置上deep后可以检测对象内部值的改变（多层）；
- immediate属性：不设置immediate属性时，它的值默认为false，初始化时不会执行；当 immediate 设置为 true 时，watch 的回调会在初始化时立即执行一次，而不是等到被观察的数据第一次变化时才执行；
- 除了上述写法外，还可以使用命令式的 vm.$watch ，因为我们代码中没有这种写法，故了解即可。
1.2使用computed方法
- 计算属性定义：要用的属性不存在，要通过已有属性计算得到；
- 计算属性里get函数什么时候执行：1：初次读取时会执行一次 2：当依赖的数据发生改变时会再次调用；
- 计算属性什么时候可以简写：不需要用到set函数修改属性值时可以简写，如上图。
- Vue官网-计算属性相关的风格指南：v2.cn.vuejs.org/v2/style-gu…
疑问1：我们为啥要用计算属性computed?
疑问2：为啥Vue2的官网文档上更推荐使用计算属性computed而不是侦听属性watch呢?
上述两张截图来自Vue官网地址：v2.cn.vuejs.org/v2/guide/co…
1.3比较各种情况下使用computed和watch的优缺点
1.3.1以计算调整后额度为例
1.3.1.1使用普通方法实现
改变vue实例data里的任意数据都会重新解析模板，此时vue实例读到
时会调用这个方法
1.3.1.2使用computed实现
与methods实现相比，内部有缓存机制，只有依赖的数据发生改变时才会再次调用，效率更高
**但如果我想一秒后再返回呢？用computed可以吗？
**
大家可以试试，不报错，但是也没有返回，为什么呢？
因为异步操作（如 API 调用、定时器或 Promise）的特性与 computed 属性的这种缓存机制不兼容，异步操作意味着结果不是立即可用的，而是在某个未来的时间点返回，而 computed 属性是期望能够立即返回一个结果。
1.3.1.3使用watch实现
computed可以完成的功能，wach都可以完成
**但如果我想一秒后再计算呢？用可以吗？
**
经验证是可以的，说明watch是允许我们执行异步操作的
computed和watch使用小结
- 1：如果:需要基于已有的属性进行计算并生出一个新的值，那么应该使用 computed
- 2：如果你需要在数据变化时执行异步或开销较大的操作，那么应该使用 watch
- 3：在可能的情况下，尽量使用 computed，因为它提供了更好的缓存机制，可以避免不必要的计算和性能开销。
原文链接：https://juejin.cn/post/7351649413402640436 作者：王小菲
