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

最新推荐文章于 2025-02-26 17:58:10 发布

Grimoire_ll

最新推荐文章于 2025-02-26 17:58:10 发布

阅读量290

点赞数

分类专栏：学习Vue遇坑之路文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_42264597/article/details/114235855

版权

学习Vue遇坑之路专栏收录该内容

15 篇文章

订阅专栏

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、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；