Methods vs Computed vs Watch

Methods

• Use with event binding OR data binding
• Data binding: Method is executed for every "re-render" cycle of the component
• Use for events or data that really needs to be re-evaluated all the time

 

Computed

• Use with data binding
• Computed properties are only re-evaluated if one of their "used values" changed
• Use for data that depends on other data

 

Watch

• Not used directly in template
• Allows you to turn any code in reaction to some changed data
  (e.g. send HTTP request etc.)
• Use for any non-data update you want to make

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: '',
      lastName: ''
    };
  },

  watch: {
    counter(value) {
      if (value > 50) {
        setTimeout(() => {
          this.counter = 0
        }, 2000);
      }
    }
  },

  computed: {
    fullName() {
      console.log('computed property는 똑똑합니다.')
      if (this.name === '' || this.lastName === '') {
        return ''
      } else {
        return this.name + ' ' + this.lastName
      }
    }
  },

  methods: {
    add(num) {
      this.counter = this.counter + num;
    },
    reduce(num) {
      this.counter = this.counter - num;
    },
    resetInput() {
      this.name = '';
    }
  }
});

app.mount('#events');