What is the difference between computed and methods in Vue.js? (with examples)

The content of this article is about what is the difference between computed and methods in Vue.js? (With examples), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

It has been explained in the official documents. I will record my understanding here.

Usage scenarios of computed

For complex logical expressions in HTML templates, in order to prevent the logic from being too heavy and difficult to maintain, the relevant logic should be put into calculated attributes.

Such as this

<div id="root">
     <p>Reversed message: "{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}"</p>
</div>

In this place, the template is no longer simple declarative logic. Here is the flipped string that wants to display the variable message. Such expressions that contain complex logic processing should use calculated properties.

The difference between computed and methods

1. computed is an attribute call, while methods is a function call

This means that in HTML interpolation# The method defined by

##computed is called in the form of attribute access, such as {{reversedMessageComputed}}

methodsThe method defined must be called by adding (), such as {{reversedNameMethod() }}, otherwise the following content will be rendered in the view

function () { [native code] }

2. computed has a caching function, but methods are not

Here Let me quote the official documentation

Computed properties are cached based on their dependencies. They are only re-evaluated when related dependencies change.

e84a645d77f16f01a552f36f010f7960
f5b3ebc4cb932b9ccb69ea74d4ca8dd7
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedNameMethod() }}"94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedMessageComputed }}"94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

In the above example, caching means that as long as the message has not changed, accessing the reversedMessageComputed calculated property multiple times will immediately return the previous calculation result without having to execute the function again. The reversedNameMethod() method will re-execute the function every time it is called.

But at the same time, it is important to note that this also means that the following calculated properties will no longer be updated, because Date.now() is not a reactive dependency:

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

The value of now will be in the Vue instance It is generated upon transformation and never changes.

In contrast, the calling method will always execute the function again whenever a re-render is triggered.

Other instructions for computed

Computed and methods cannot have the same name

Vue will proxy all the things in methods and data to the object generated by Vue, which will Overriding attributes with duplicate names in computed

The above is the detailed content of What is the difference between computed and methods in Vue.js? (with examples). For more information, please follow other related articles on the PHP Chinese website!