srcmini在上一节中，我们学习了VueJS组件的用法，Vue的组件可以使用全局注册和本地注册，以及还可以使用动态组件。到此，我们已经学习了Vue实例和Vue组件的使用，在本节中，我们讨论更详细的Vue使用computed计算属性的内容，computed属性和methods类似，但是有一些不同，在下面的讨论中我们可以看到。在我们学完本节后，我们将可以知道什么时候该用methods什么时候该用computed。
1、VueJS自动计算属性computed
下面我们一起看一个使用computed的例子，HTML代码：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VueJS计算属性computed</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="computed">
昵称：<input type="text" v-model="nickname"/> <br/><br/>
邮箱：<input type="text" v-model="email"> <br/><br/>
<h1>我的昵称和邮箱为：{{nickname}} {{email}}</h1>
<h1>使用computed计算属性：{{getfullinfo}}</h1>
</div>
<script src="js/computed.js"></script>
</body>
</html>
computed.js文件的代码如下：
var user = {};
user.nickname = "半瓶木";
user.email = "srcmini@163.com";
var v = new Vue({
el: "#computed",
data: user,
computed: {
getfullinfo: function(){
return "[" + this.nickname + " " + this.email + "]"
}
}
});
在html文件中创建了两个文本输入框input，并分别使用v-model将文本框和nickname和email两个属性绑定。注意，v-model用于绑定属性。
在这里计算属性方法为getfullinfo，该方法返回输入的昵称和邮箱，如下代码：
computed: {
getfullinfo: function(){
return "[" + this.nickname + " " + this.email + "]"
}
}
当在输入框中输入内容时，nickname和email会被更新，相应地会通过该函数返回新的值。因而使用computed进行属性计算，我们不需要显式指定任何东西，例如不用手动调用方法（在methods中需要）。使用computed属性计算方法，当内部的属性值改变时，它会调用自身进行更新操作并返回值。
你可以使用上面的代码实现，在输入框中输入不同的内容时，下面的文本会跟着进行更新，下面是在浏览器中的显示效果：
2、computed和methods的区别
下面我们来看一下自动计算属性computed和方法methods的区别，其中它们都是对象，都是在对象中定义一些方法，然后返回值。
在methods中我们可以将它称为方法（调用要加括号），而对象computed我们将其称为属性（因为使用时不需要按照方法调用的方式写，也就是不用加括号），使用下面的例子，我们来看看methods和computed的区别：
<div id = "diff">
<h1 style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
<h1>来自methods的随机数: {{getrandomno1()}}</h1>
<h1>来自methods的随机数 : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
<h1>来自methods的随机数: {{getrandomno1()}}</h1>
<h1>来自methods的随机数: {{getrandomno1()}}</h1>
</div>
<script>
var ex = new Vue({
el: "#diff",
data: {
name: "VueJS"
},
methods: {
getrandomno1: function(){
return Math.random();
}
},
computed: {
getrandomno: function(){
return Math.random();
}
}
});
</script>
在上面的代码中，我们创建了一个在methods中的方法getrandomno1，以及在computed中的属性getrandomno，它们都是使用Math.random()函数返回随机数。
下面是在浏览器中的显示效果，computed属性和methods方法被调用了好几次：
从上面的显示我们可以看到，调用多次computed属性返回的随机数都是相同的，与调用次数无关，而使用methods中的方法则每次显示的随机数都不同。因为每次对于methods中的方法来说，它们都是方法，自然每次调用都会返回不同的值。而对于computed来说，它相当于一个属性，自然每次都是取到相同的值，它只有在内部发生改变时，才会重新调用该方法更新值。
3、自动计算属性computed中的get和set函数
在这个小节中，我们将会学习computed中的get和set函数，下面我们看一个例子：
<div id="app">
<input type="text" v-model="account"/>
<h1>{{firstname}}</h1>
<h1>{{lastname}}</h1>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
firstname: "Van Gogh",
lastname: "La Oreja De"
},
methods: {},
computed: {
account: {
get: function(){
return this.lastname + " " + this.firstname;
}
}
}
});
</script>
上面的代码中，我们定义了一个输入框，使用v-model将这个输入框和account绑定，在这里account是一个计算属性，它返回一个叫get的函数，提供firstname和lastname的拼接。并且定义两个h1使用表达式显示这两个属性。
这里是使用了v-model绑定了输入框和account，当时，当输入框中的值改变时，下面的两个h1不会跟着更新，显示如下：
下面的代码在computed计算属性中添加set函数：
set: function(name){
var fname = name.split(" ");
this.firstname = fname[0];
this.lastname = fname[1];
}
其中参数name为输入框中的文本，当运行该代码时，因为set函数提供了更新操作，所以当你输入文本时，下面的两个h1会进行相应的更新，像第一个例子那样。
评论前必须登录！
注册