浅谈 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;
        }
    },

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值