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

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

d、当一个属性发生变化时,需要执行对应的操作;一对多;

e、监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

​ immediate:组件加载立即触发回调函数执行,

deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页