简单了解Vue computed属性及watch区别

下面就是“简单了解Vue computed属性及watch区别”的完整攻略。

一、computed属性

在Vue中，computed属性是一个带有缓存的计算属性，也就是说，computed属性只会在它依赖的数据发生变化时才会重新计算一次，否则会直接返回之前缓存的结果。

1.1 定义computed属性

computed属性的定义类似于Vue的数据属性，你可以通过computed属性实现一些对原始数据的逻辑处理，例如数据过滤、转换、计算等。在Vue组件中，你可以使用computed关键字来定义计算属性：

<script>
  export default {
    data() {
      return {
        num: 2,
        message: 'hello, Vue!'
      };
    },
    computed: {
      // 计算属性例1：计算num的平方
      numSquared() {
        return this.num * this.num;
      },
      // 计算属性例2：将message转换为大写字母
      messageUpperCase() {
        return this.message.toUpperCase();
      }
    }
  };
</script>

上面的例子中，我们定义了两个计算属性：numSquared和messageUpperCase。当num或message的值发生变化时，numSquared和messageUpperCase属性会自动更新。

1.2 计算属性的缓存特性

计算属性的一个重要特性就是它具有缓存机制，比如说在上面的例子中，numSquared这个计算属性的值由num计算得出，如果num的值没有改变，那么这个计算属性就不会重新计算。如果多个计算属性依赖同一个数据，那么只有在该数据变化时，才会重新计算这些计算属性的值。

<script>
  export default {
    data() {
      return {
        num: 2
      };
    },
    computed: {
      numSquared() {
        console.log("num计算了一次");
        return this.num * this.num;
      },
      numCubed() {
        console.log("num计算了一次");
        return this.num * this.num * this.num;
      }
    }
  };
</script>

在上面的例子中，当num的值变化时，计算属性numSquared和numCubed都被重新计算了一次。如果再次修改num的值，只有关联到num的计算属性才会重新计算：

// 修改num的值
this.num = 3; // num计算了一次

1.3 计算属性和methods的区别

在Vue组件中，除了computed属性外，还可以使用methods来实现一些逻辑处理。那么，这两者有何区别呢？

首先，computed属性和methods都可以实现逻辑处理，但是computed属性比methods具有更优秀的性能。因为computed属性具有缓存机制，只有它所依赖的数据发生变化时才会重新计算一次，而methods则在每次调用时都会执行一次函数。

<script>
  export default {
    data() {
      return {
        num: 2
      };
    },
    computed: {
      numSquared() {
        console.log("num计算了一次");
        return this.num * this.num;
      }
    },
    methods: {
      numSquared() {
        console.log("num执行了一次");
        return this.num * this.num;
      }
    }
  };
</script>

上面的例子中，我们在computed和methods中都定义了一个numSquared函数，当我们调用这两个函数时可以看到不同的输出结果：

// 调用numSquared函数
this.numSquared // computed: num计算了一次
               // methods: num执行了一次

其次，computed属性只有在它所依赖的数据发生变化时才会重新计算一次，因此它的结果具有缓存性质，而methods则完全没有缓存机制。

最后，computed属性的值可以像普通属性一样直接使用，而methods必须在模板中通过函数调用才能使用。

二、watch选项

在Vue中，watch选项可以用来监听某些数据的变化，并在数据变化时执行某些指定的函数或操作。

2.1 监听数据的变化

我们可以在Vue组件中使用watch选项来监测数据的变化，并在数据变化时执行一个函数。例如，我们可以定义一个watch来监测num属性的变化：

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  watch: {
    num(newValue, oldValue) {
      console.log(`num的值由${oldValue}变为了${newValue}`);
    },
  },
  methods: {
    increase() {
      this.num++;
    },
  },
};
</script>

在上面的例子中，我们定义了一个watch选项来监测num属性的变化，并在变化时输出一个信息，然后通过一个按钮调用increase方法来改变num的值：

<template>
  <div>
    <p>num的值为{{ num }}</p>
    <button @click="increase">递增</button>
  </div>
</template>

每当我们点击按钮时，num的值都会递增1，并且watch选项中定义的函数也会被触发，输出一个变化信息。

2.2 watch的特点

watch选项的特点是：监听数据的变化，并在数据变化时执行指定的操作。

watch选项的作用类似于计算属性，但不同的是，watch选项可以在数据变化时执行任何指定的操作，而计算属性则只能在原始数据变化时进行计算和处理。

由于watch选项在数据变化时会执行指定的操作，因此如果监听的数据量很大，就会非常耗费性能，因此在使用watch选项时我们需要注意使用频率和数据量，避免影响性能。

总结

在Vue组件中，computed属性和watch选项是两种非常常见的数据处理方式。它们的作用分别是计算属性和监听数据的变化，常用于实现数据逻辑处理、数据过滤等功能。

computed属性具有缓存机制，可以提高性能，但只对于简单的函数处理比较有用；而watch选项则可以实现任何你想实现的操作，但在监听大量数据时会影响性能，因此使用时需要谨慎。