Home>Article>Web Front-end> What are the differences between computed and method in Vue?
This article will introduce to you the difference between computed and method in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
1. The two core differences between computed and method
In the official document, it is emphasized that the most important difference between computed and method is Two points
computed is a property call, while methods are function calls
computed has a caching function, but methods are not
OK, let’s look at a specific example
let vm = new Vue({ el: '#app', data: { message: '我是消息,' }, methods: { methodTest() { return this.message + '现在我用的是methods' } }, computed: { computedTest() { return this.message + '现在我用的是computed' } } }){{message}}
{{methodTest}}
{{methodTest()}}
{{methodTest()}}
{{methodTest()}}
{{computedTest}}
{{computedTest}}
2. Computed attribute call
Careful friends may have discovered it. In HTML interpolation
we call the method defined by computed in the form of attribute access, {{computedTest}}
but methods We must add () to call the defined method, such as {{methodTest()}}, otherwise, the view will appear test1, as shown in the figure below
3. The caching function of computed
First of all, we need to understand what the cache is used for?
Compared with everyone knows that HTTP caching, its core function is to reuse some resources that have not been updated on the server, avoid some unnecessary requests, and optimize the user experience
The same is true for computed Same:
In the above example, the methods defined by methods are accessed in the form of function calls, then test2-1, test2-2, test2-3 repeatedly run the methodTest method for three times. Again, if we encounter a scenario that requires 1,000 methodTest return values, then there is no doubt that this will inevitably cause a lot of waste.
What’s even more terrifying is that if you change the value of message, then these 1,000 Each methodTest method will be recalculated. . . .
Therefore, the official document repeatedly emphasizes that for any complex logic, you should use calculated properties
computed depends on the data in data, and only when its related dependent data changes
As in the above example, when Vue is instantiated, computed defines the computedTest method to do a calculation and return a value. In subsequent code writing, as long as the computedTest method depends on The message data does not change, and the computedTest method will not recalculate. That is to say, test3-1 and test3-2 get the return value directly, not the result of recalculation by the computedTest method.
The benefits of this are also obvious. Similarly, if we encounter a scenario that requires 1000 computedTest return values, then there is no doubt that this will greatly save memory compared to methods
Even if you change the value of message, computedTest will only be calculated once
4. Other instructions for computed
computed In fact, it can be accessed both as an attribute and as a method.
The origin of computed is an important reason, which is to prevent the logic in text interpolation from being too heavy and making it difficult to maintain
Related recommendations:
2020 front-end vue interview questions summary (with answers)
vue tutorial Recommended: The latest 5 vue.js video tutorial selections in 2020
For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of What are the differences between computed and method in Vue?. For more information, please follow other related articles on the PHP Chinese website!