Vue学习笔记：methods,computed,watch的区别

在Vue.js中，methods、computed和watch是三个非常重要的特性，它们可以帮助我们创建更复杂和响应式的应用程序。但是，这三个特性之间有什么区别呢？什么时候应该使用它们呢？

本篇文章将对这三个特性进行详细的比较，并通过实际的例子来演示它们的用法。

异

• methods ：方法是Vue实例上的函数，可以被模板和组件调用。方法可以执行任何操作，比如改变数据、调用API或触发事件。
• computed ：计算属性是Vue实例上的属性，它依赖于其他属性。当依赖项发生改变时，计算属性会自动更新。计算属性只能返回一个值，不能执行任何操作。
• watch ：侦听器是Vue实例上的函数，它监听数据属性的变化。当被监听的数据属性发生改变时，侦听器函数就会被触发。侦听器函数可以执行任何操作，比如改变数据、调用API或触发事件。

同

• 函数化 ：methods、computed和watch都是以函数为基础的。这意味着它们可以被传递作为参数，并可以在其他地方被调用。
• 响应式 ：methods、computed和watch都是响应式的。这意味着当它们的依赖项发生改变时，它们都会自动更新。

• 使用methods ：
  • 当你想要执行一个操作时，比如改变数据、调用API或触发事件。
  • 当你想要创建一个不依赖于其他属性的函数时。
• 使用computed ：
  • 当你想要创建一个依赖于其他属性的属性时。
  • 当你想要创建一个只读属性时。
• 使用watch ：
  • 当你想要监听数据属性的变化时。
  • 当你想要在数据属性发生改变时执行一个操作时。

以下是一些使用methods、computed和watch的实际例子：

• methods ：

  export default {
    methods: {
      changeName() {
        this.name = 'John Doe';
      },
      callApi() {
        fetch('https://example.com/api')
          .then(response => response.json())
          .then(data => this.data = data);
      },
      triggerEvent() {
        this.$emit('my-event');
      }
    }
  }
  

• computed ：

  export default {
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      },
      age() {
        return new Date().getFullYear() - this.yearOfBirth;
      }
    }
  }
  

• watch ：

  export default {
    watch: {
      name(newValue, oldValue) {
        console.log(`Name changed from ${oldValue} to ${newValue}`);
      },
      age(newValue, oldValue) {
        console.log(`Age changed from ${oldValue} to ${newValue}`);
      }
    }
  }
  

methods、computed和watch都是Vue.js中非常重要的特性，它们可以帮助我们创建更复杂和响应式的应用程序。理解这三个特性的区别以及如何使用它们对于Vue.js开发人员来说非常重要。

希望这篇文章能帮助您更好地理解methods、computed和watch。如果您还有任何问题，请随时留言。