VueJS计算属性computed用法全解教程

在上一节中，我们学习了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="http://img.readke.com/220411/0Z3496158-0.jpg">< /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="http://www.srcmini.com/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> < h1style = "background-color:gray; ">来自computed的随机数: {{getrandomno}}< /h1> < h1style = "background-color:gray; ">来自computed的随机数: {{getrandomno}}< /h1> < h1style = "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不会跟着更新，显示如下：