Home > Article > Web Front-end > The difference between method and computed in Vue

The difference between method and computed in Vue

php中世界最好的语言Original: 2018-03-28 11:48:451373browse

This time I will bring you the difference between method and computed in Vue. What are the precautions for using method and computed in Vue? The following is a practical case, let's take a look.

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.

computed is called a computed attribute. As the name suggests, calculation must return a calculation result. Therefore, when we need to process a large amount of logic, but in the end we want to obtain the final result, we can use computed;

In order to illustrate the difference between method and computed, here 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 calculation. 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('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</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('').reverse().join('')}}</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('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

I compared these two methods. The returned result is the same, but in the method of computed properties, you don’t need to add () when using attributes, while the methods method should be used like a method, and you must add ().

The two methods are also very different in

caching. The computed property is used to bind reverseMessage to the message. The reverseMessage will be triggered only when the message changes, while the methods method requires each time the page is entered. Execute this method, but when using real-time information, such as displaying the current time of entering the page, you must use methods.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

The difference between method and computed in Vue

Related articles