What is the difference between method and computed in Vue?-JS Tutorial-php.cn

What is the difference between method and computed in Vue?

php中世界最好的语言

Release： 2018-04-12 10:49:36

Original

1478 people have browsed it

This time I will bring you the difference between using method and computed in Vue. What are the precautions when 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 lot of logic, but finally 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 Operation. 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>

Copy after login

In this case, the template is no longer simple and clear. You have to confirm a second time before realizing that this is a reverse message. When you want to display multiple times in reverse in a template message , the problem will get worse. 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>

Copy after login

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. Using computed properties is to reverseMessage is bound to message. ReverseMessage will only be triggered when the message changes. The methods method is to execute this method every time you enter the page. However, when using real-time information, such as displaying the current time of entering the page, you must use the methods method. .

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!