Vue中computed 和 watch 的区别和运用的场景?

        computed:计算属性,依赖于其他属性,并且computed的值有缓存。只有它依赖的属性值(响应式依赖)发生变化,下一次获取computed的值时才会重新计算computed的值。

        watch:更多的是【观察】的作用,类似于某些数据的监听回调,每当监听的数据发生变化时,都会执行回调进行后续操作。

        运用场景:

  • computed:当我们要进行数值计算,并且依赖于其他数据时,这时应该使用computed,因为利用computed的缓存特性,可以避免每次获取值时都重复计算。
  • watch: 当我们在数据发生变化时执行异步或开销较大的操作时,应该使用watch,使用watch选项允许我们执行一步操作(访问一个API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些是computed(计算属性)无法实现的
<div id="app">
  <p>message: "{{ message }}"</p>
  <p>message加上计算属性之后: "{{ reversedMessage }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message + '变化了'
    }
  }
})

// 输出结果
message:Hello
message加上计算属性之后: Hello变化了
</script>

计算属性中的缓存机制与methods中的方法

        我们可以通过在表达式中调用方法来达到同样的效果:

<div id="app">
  <p>message: "{{ message }}"</p>
  <p>message调用methods中的方法: "{{ reversedMessage() }}"</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  methods:{
    reversedMessage: function () {
      return this.message + '变化了'
    }
  }

})
// 输出结果
message:Hello
message调用methods中的方法: Hello变化了
</script>

        我们可以将同一函数定义为一个methods中的方法而不是computed计算属性,两种方式得到的结果都是完全相同的。但不同的是计算属性是基于它们的响应式依赖进行缓存的。只有相关响应式依赖发生变化时才会重新求值。这就意味着只要data中的message没发生变化,多次访问reversedMessage计算属性就会立即返回之前的计算结果,而不会再次执行计算属性。相反,methods中方法没执行一次就会重新计算一次。

下面的计算属性将不在更新,因为其中没有响应式依赖

computed:{
    totalNum(){
        return  1+1;
    }
}

// 返回的结果一直为2。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值