The difference between computed and method in vue

The difference between computed and method in Vue

Computed and method are the two core concepts used to process data and logic in Vue.js. While both return reactive values, there are some key differences in their purpose, implementation, and responsiveness:

Purpose:

• computed: Used to calculate reactive values, usually based on changes in other reactive data.
• method: Used to perform operations and change status. The returned value is not necessarily responsive.

Implementation:

• computed: Defined in the form of a getter function, which returns the calculated result.
• method: Defined as a regular function and can contain any JavaScript code.

Responsiveness:

• computed: Responsive, its value will automatically update as dependencies change .
• method: Non-responsive, its value will not be updated automatically.

Performance:

• computed: It will only be recalculated when its dependencies change, so the performance is relatively better.
• method: Each call will be re-executed, and the performance may be worse.

Applicable scenarios:

• computed: When responsive values ​​need to be calculated, especially when used in rendering templates hour.
• method: When an action needs to be performed or state changed, such as handling a form submission or triggering an HTTP request.

Example:

<code class="javascript">// computed，计算全名
fullName() {
  return this.firstName + ' ' + this.lastName;
}

// method，改变状态
updateName(newName) {
  this.fullName = newName;
}</code>

In short, computed is used to calculate responsive values, and method is used to perform operations and change state. It is important to choose the right tool based on specific needs to ensure the efficiency and maintainability of the application.

The above is the detailed content of The difference between computed and method in vue. For more information, please follow other related articles on the PHP Chinese website!