Vue中计算属性computed和侦听属性watch的区别

水深无声 2021-09-07 06:13 499阅读 0赞

### Vue中计算属性computed和侦听属性watch的区别 ###

1、计算属性：computed

（1）使用场景：

模板中的表达式常用于简单的运算，当模板中的表达式过长或者其逻辑复杂时，会难以维护，计算属性就是解决该类问题

（2）用法：

简单用法：在一个计算属性中可以完成各种复杂的逻辑，包括计算、函数调用，只要最终返回一个计算结果即可。

复杂一丢丢的用法：计算属性可以依赖多个Vue实例的数据，只要其中任一个数据发生变化，计算属性就会重新执行，视图也会更新。

例如：

<div style="float: right">
                <span>总件数：{
       { totalNum }}</span>
                <span>总价：{
       { totalPrice }}</span>
              </div>

以上是购物车中选择商品时，总件数和总价的变化

computed: {
        totalNum: function () {
          let total = 0;
          console.log(total);
          for (let i = 0; i < this.carts.length; i++) {
            console.log(total);
            if (this.carts[i].checked) {
              let item = this.carts[i];
              console.log(item);
              total += item.num;
              console.log(total);
            }
          }
          //   console.log(total);
          return total;
        },
    
        totalPrice: function () {
          let total = 0;
          for (let i = 0; i < this.carts.length; i++) {
            if (this.carts[i].checked) {
              let item = this.carts[i];
              total += item.price * item.num;
            }
          }
          //   console.log(total);
          return total.toFixed(2);
        },
      },

当购物车中任何一个商品有变化，比如购买数量或者增删商品时，计算属性computed就会自动更新，视图中的总件数和总价就会发生变化

每一个计算属性都包含一个getter和一个setter，上面的购物车使用的计算属性的默认用法，只是利用getter来读取。

（3）区别

a、支持缓存，只有依赖数据发生改变，才会重新进行计算

b、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化

c、computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

d、如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

e、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

2、侦听属性：watch

a、不支持缓存，数据变，直接会触发相应的操作；

b、watch支持异步；

c、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；