computed
computed : 计算属性（别人变化影响我自己）
- 计算属性是由data中的已知值，得到的一个新值。这个新值只会根据已知值的变化而变化，其他不相关的数据的变化不会影响该新值。
- 计算属性不在data中，计算属性新值的相关已知值在data中。
- 计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
computed应用场景
适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed
watch
watch：监听数据的变化（我的变化影响别人）
- 监听data中数据的变化，监听的数据就是data中的已知值，默认情况下, watch只在被监听的属性值发生变化时执行.
- immediate: true选项, 这样它会在组件创建时立即执行
- deep:true, 默认值为: false, 即是否需要开启深度监听,开启的话对象中任何一个属性改变都会触发监听器中的处理函数
watch例子：
export default {
data: () => ({
dog: ""
}),
watch: {
dog(newVal, oldVal) {
console.log(`Dog changed: ${newVal}`);
}
}
};
如上代码所示, 只有当dog的值有发生改变时, watch中的dog函数才会执行.
总结：
功能上：computed是计算属性，也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化，然后执行相对应的函数
使用上：computed中的函数必须要用return返回；watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作，不是必须要用return
性能上：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调
场景上：computed：当一个属性受多个属性影响的时候，例子：购物车商品结算；watch：当一条数据影响多条数据的时候，例子：搜索框
