Vue计算属性和侦听器的使用和区别

xiaoyu 2019-02-14 ⋅ 12 阅读

在Vue.js中,计算属性和侦听器都是用于处理数据变化的方法。它们都可以响应式地更新视图,但它们的使用方式和区别略有不同。本文将介绍计算属性和侦听器的使用方法以及它们之间的区别。

一、计算属性的使用

计算属性是基于它们的依赖关系进行缓存的。只有在它的相关依赖发生改变时才会重新求值。这就意味着只要依赖不改变,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。

例如:

<template>
  <div>
    <p>总数:{{ total }}</p>
    <p>平均值:{{ average }}</p>
  </div>
</template>


export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    total() {
      return this.numbers.reduce((prev, curr) => prev + curr, 0);
    },
    average() {
      return this.total / this.numbers.length;
    }
  }
};

在上面的例子中,我们定义了两个计算属性:total和average。当numbers数组发生变化时,只有与numbers相关的依赖发生变化时才会重新求值。因此,如果numbers数组没有发生变化,那么多次访问total和average属性会立即返回之前的计算结果,而不必再次执行函数。

二、侦听器的使用

侦听器则是在被侦听的对象发生变化时触发回调函数。每当被侦听对象发生变化时,侦听器都会执行回调函数以响应更改。与计算属性不同的是,侦听器不支持缓存。每次触发回调函数时,都会重新执行函数。

例如:

<template>
  <div>
    <p>总数:{{ total }}</p>
    <p>平均值:{{ average }}</p>
  </div>
</template>


export default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  watch: {
    numbers(newVal, oldVal) {
      this.total = newVal.reduce((prev, curr) => prev + curr, 0);
      this.average = this.total / newVal.length;
    }
  },
  computed: {
    total() {
      return this.numbers.reduce((prev, curr) => prev + curr, 0);
    },
    average() {
      return this.total / this.numbers.length;
    }
  }
};

在上面的例子中,我们使用watch选项来监听numbers数组的变化。每当numbers数组发生变化时,watch选项中的回调函数就会被执行。在回调函数中,我们重新计算了total和average的值,并将它们赋值给对应的计算属性。由于每次触发回调函数时都会重新执行函数,因此每次访问total和average属性都会重新计算它们的值。


全部评论: 0

    我有话说: