先看computed和watch的使用

data: {
    firstName: '张',
    lastName: '三',
    fullName: '张三'
},
watch: {
    // 侦听器以函数的形式定义,函数名称就是监视的数据的名称,参数就是数据变化后的新值
    firstName(val) {
        console.log(val);
        this.fullName = val + this.lastName;
    },
    lastName(val) {
        console.log(val);
        this.fullName = this.firstName + val;
    }
}
computed: {
    // 计算属性在某些场景下(此示例),要比侦听器代码精简。
    fullName() {
        return this.firstName + this.lastName;
    }
}

区别如下:

  • computed是计算属性,watch是监听,监听data中的数据变化
  • computed支持缓存,当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行
  • computed不支持异步,有异步操作时无法监听数据变化;watch支持异步操作
  • computed第一次加载就监听,watch默认第一次加载时不见听
  • computed中的函数必须调用return,watch不是

使用场景:

computed:一个属性受到多个属性影响,如:购物车商品结算(商品数量种类等决定总价)

watch:一个数据影响多条数据,如:搜索数据(搜索条件的改变改变许多结果)

分类: Vue

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注