Home > Article > Web Front-end > 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('').reverse().join('') }}"</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 viewfunction () { [native code] }2. computed has a caching function, but methods are notHere Let me quote the official documentationComputed 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.
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!