Home > Article > Web Front-end > Detailed explanation of the difference between method and computed in Vue (detailed tutorial)

Detailed explanation of the difference between method and computed in Vue (detailed tutorial)

亚连Original: 2018-06-01 11:12:461737browse

Both computed and methods in the configuration parameters of new Vue can handle a large amount of logic code, but when to use which attribute, you need to distinguish carefully to use vue correctly. This article mainly introduces the difference between method and computed in Vue. Friends who need it can refer to

Both computed and methods in the configuration parameters of new Vue can handle a large amount of logic code, but when to use which one? Attributes need to be distinguished carefully to use vue correctly.

computed is called a computed attribute. As the name suggests, calculation must return a calculation result. Therefore, when we have to process a lot of logic, but finally want to obtain the final result, we can use computed;

In order to illustrate the difference between method and computed, I would like to first take a look at what the computed attribute says on the Vue official website: Expressions in templates are very convenient, but they are actually only used for simple operations. Putting too much logic into a template can make it overweight and difficult to maintain.

Let’s look at an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

In the above case, the template is no longer simple and clear. You have to confirm a second time before realizing that this is a reverse message. The problem gets worse when you want to display the message in reverse multiple times in the template. This is why for any complex logic you should use computed properties. Below I will use method and computed to compare:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

I compared these two methods. The returned result is the same, but in the method of calculating calculated properties, you do not need to add () when using attributes, while the methods method must be used like a method, and you must add ().

The two methods are also very different in terms of caching. The computed attribute is used to bind the reverseMessage to the message. The reverseMessage will only be triggered when the message changes. The methods method is to execute the method every time the page is entered, but in When using real-time information, such as displaying the current time of entering the page, methods must be used.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Javascript coding convention (coding specification)

##The difference between document.write and document.writeln in js

Detailed explanation of the relationship between prototype and __proto__ in Javascript

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JS+CSS3 to realize image zooming in and out in response to mouse movementNext article：How to use JS+CSS3 to realize image zooming in and out in response to mouse movement

See more

Detailed explanation of the difference between method and computed in Vue (detailed tutorial)

Related articles