JIYIK CN >

When calculating variables in Vue, we usually use two methods: methods and computed. Although both can be used to calculate variables, there are still some differences in their use. This article will introduce in detail the differences between methods and computed and which method to use in what circumstances.

methods：

Methods can be understood as a method library of Vue, in which we can define some methods and then call these methods in the template. When we need to calculate some more complex variables, we can use methods to perform a series of calculations. For example, the following example:

<template>
  <div>
    <p>{{reverseMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    reverseMsg(){
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

In the above example, we want to reverse the string of message, so we define a reverseMsgmethod to achieve this function. Calling the method in the template reverseMsgcan get the reversed string.

computed：

Computed can be understood as a calculated property of Vue. We can define some calculated properties in it and then call these calculated properties in the template. When we need to calculate some data-related variables, we can use computed to calculate. For example, the following example:

<template>
  <div>
    <p>{{reversedMsg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'hello'
    }
  },
  computed: {
    reversedMsg() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

In the above example, we also want to reverse the string of message, but we use computed to achieve this function. We define reversedMsg as a computed property, and then call it in the template to get the reversed string.

Which is better, methods or computed?

Both methods can be used to calculate variables, but in actual use, you still have to choose according to the specific situation. If we need to do more complex calculations, or need to perform some asynchronous operations, we need to use methods to implement them. If we need to do some simpler calculations, or need to monitor the changes of a certain attribute to refresh the variable in real time, we need to use computed to implement it.

In general, if you can use computed to calculate variables, use computed as much as possible , because computed will automatically update the calculation after the data changes, while methods will re-call the method. However, in some special cases, such as asynchronous operations, it is more convenient to use methods .

Summarize

In Vue, both methods and computed variables can be used to achieve our needs, but we still have to choose which method to use based on the specific situation. The difference between methods and computed properties mainly exists in the calculation process. Computed properties will cache the calculation results and implement responsive updates based on the properties, while methods will re-execute the calculation.