Vue中computed、methods与watch的区别总结

Vue中computed、methods与watch的区别总结

在Vue中，computed、methods和watch是开发过程中常用的三个属性之一。它们都是Vue实例可以拥有的属性，但是它们的使用方式和作用有所不同。

Computed

computed属性是一个函数，用于计算Vue实例中的一个值，这个值可以根据依赖于其他数据计算出来。computed属性会根据依赖的数据自动更新。computed属性适用于那些根据其他数据计算出来的值，并且这些值的计算比较消耗性能的情况。

以下是一个computed属性的例子：

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
};
</script>

在上面的Vue组件中，fullName是一个computed属性，它依赖于firstName和last name两个数据，computed属性的计算结果是这两个数据的拼接。

Methods

methods属性也是一个函数，但它不返回任何值。methods属性被用来定义Vue实例中的方法。methods属性中的方法可以用来处理行为逻辑并且可以根据组件的状态来触发某些行为。

以下是一个methods属性的例子：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="reverseMessage">Reverse Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World',
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    },
  },
};
</script>

在上面的Vue组件中，methods属性中的reverseMessage()方法用来翻转message的值。

Watch

watch属性允许我们监听Vue实例中某个数据的变化，然后执行一些操作。当监听到数据的变化时，watch方法被调用并且可以执行具体的操作。

以下是一个watch属性的例子：

<template>
  <div>
    <p>{{ fullName }}</p>
    <form>
      <label for="first-name">First Name:</label>
      <input v-model="firstName" id="first-name" />
      <br />
      <label for="last-name">Last Name:</label>
      <input v-model="lastName" id="last-name" />
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      fullName: '',
    };
  },
  watch: {
    firstName(value) {
      this.fullName = `${value} ${this.lastName}`;
    },
    lastName(value) {
      this.fullName = `${this.firstName} ${value}`;
    },
  },
};
</script>

在上面的Vue组件中，watch属性监听了firstName和lastName两个数据的变化，并且根据数据的变化重新计算fullName的值。

在总结一下：

computed属性适用于需要根据其他数据计算出的值，而且这些计算结果比较消耗性能的情况。

methods属性适用于定义Vue实例中的方法，该方法可以处理行为逻辑并且可以根据组件的状态来触发某些行为。

watch属性可以用来监听Vue实例中某个数据的变化，并且可以触发一些具体的操作。