浅谈 Computed和Watch的区别

computed

计算属性

类似于过滤器，对绑定到试图的数据进行处理，并监听变化进而执行对应的代码

基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用methods时，在重新渲染的时候，函数总会重新调用执行

computed属性默认的只有getter

watch

监听属性

通过watch来响应数据的变化

• watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态

用法异同

computed和watch都起到监听/依赖一个数据，并进行处理的作用

computed主要用于对同步数据的处理，watch主要用于观测某个值的变化去完成一段开销较大的复杂业务逻辑。能用computed的时候优先用computed，避免了多个数据影响其中某个数据时调用watch的尴尬情况。

• computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变后，下一次获取computed的值时才会重新调用对应的getter来计算

• watch在每次监听的值变化时，都会执行回调。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值得变化（一对多），用watch更加方便一些

watch的回调里面会传入监听属性的新旧值，通过这两个值可以做一些特定的操作；computed通常是简单的计算

实践 运用

示例一

根据路由的变化 获取id去重新请求接口并展示数据（本质上就是watch路由的变化）

watch:{
  $route(){
    this.getList()//这里为触发请求新列表的函数
  }
}

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

分析：只监听一个值得变化，然后重新去计算

示例二

进入页面之后要从store（vuex）里面去获取一个异步请求回来的数据（你不能确认开始获取是存在的）

    computed: {
        ...mapGetters([
            'getRightOrderId',
            'getUserInfo'
        ]),
        getOrderId() {
            return {
                businessId: this.$route.query.id
            }
        }
    },
    watch: {
        getOrderId: function () {
            this.getOrderAreaData();//获取动态表单
            this.totalPrice=0;
        }
    },