Vue 方法与计算属性

Vue2 方法与计算属性

上一篇文章中总结了Vue中的构造函数，生命周期钩子函数和数据的双向绑定，本篇文章接着上一篇，总结Vue中的methods与computed。

（1）Vue实例中的方法——methods

了解Vue实例中的methods选项，就要先了解一下v-on指令。
指令是Vue.js模板中常用的一项功能，它们带有v-前缀，在前一篇文章中我们使用了v-html和v-pre，具体的关于指令的内容将会在接下来的文章中总结。在这之前，先来了解一下v-on指令，它主要用来绑定事件监听器，下面是一个示例：

<div id="app">
<div>{{a}}</div>
<div v-on:click="a='hello!'">点击这里可以改变上面的文字</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
a:"你好！"
}
});
</script>

v-on可以监听原生的DOM事件，如click、dbclick、keyup、mouseover等。v-on:click=后面的表达式可以是内联语句，如上面代码所示，点击之后改变了a的值。

表达式还可以是一个方法名，这个方法可以是一个函数，定义在Vue实例的methods选项中。函数中的this指向的是Vue实例，所以下面代码中this.a可以得到data中a的值。

<div id="app">
<div v-on:click="alert">点击将会弹出提示框！</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
a:"你好！"
},
methods:{
alert:function(){
alert(this.a);
}
}
});
</script>

函数中的this指向的是Vue实例，可以通过this在函数中调用另一个函数：

<div id="app">
<div v-on:click="click">点击将会弹出提示框！</div>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
a:"你好！"
},
methods:{
click:function(){
this.alert();
},
alert:function(){
alert(this.a);
}
}
});
</script>

var app = new Vue({
el: "#app",
data: {
a: "你好！"
},
methods: {
init: function () {
console.log(this.a);
}
},
mounted: function () {
this.init();
//你好！
}
});
app.init();
//你好！

语法糖指的是在不影响功能的前提下，添加某种方法，更加方便程序员使用，增加可读性、减少出错率等。
v-on中提供了语法糖，也就是缩写：

<div v-on:click="click">点击将会弹出提示框！</div>
<div @click="click">点击将会弹出提示框！</div>

上面两个的写法是等价的，也就是说可以省略v-on:而用@代替。

（2）Vue实例中的计算属性——computed

模版内的表达式非常便利，但是它们适用于简单计算。不便在双大括号内放过多的逻辑。
对于一些复杂逻辑，应该使用计算属性：

<div id="app">
<div>{{message}}</div>
<div>如果right的值为true，message会增加10，否则会增加100</div>
<div>{{judge}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: 1,
right: true
},
computed: {
judge: function () {
if (this.right) {
return this.message + 10;
}
else {
return this.message + 100;
}
}
}
})
</script>

在一个计算属性里，可以完成各种复杂的逻辑，包括运算、函数调用等，最终返回一个结果。计算属性可以依赖多个Vue实例的数据，只要其中任何一个数据变化，计算属性就会重新执行，视图也会更新，例如：

<div id="app">
<div>{{total}}</div>
<div v-on:click="add1">点击这里将data1增加1:{{data1}}</div>
<div v-on:click="add2">点击这里将data1增加1:{{data2}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
data1: 1,
data2: 2
},
methods: {
add1: function () {
this.data1++;
},
add2: function () {
this.data2++;
},
},
computed: {
total: function () {
return this.data1 + this.data2
}
}
});
</script>

上面代码也使用v-on绑定了方法。因为计算属性total依赖data1和data2，所以当通过点击将data1或者data2增加时，计算属性会重新执行，视图也会更新。

1.计算属性的getter与setter

每个计算属性都包含一个getter和setter，上面的两个示例都是计算属性的默认用法，只是利用了getter属性。计算属性默认只有 getter ，不过在需要时可以提供一个 setter，来修改计算属性的值。
下面代码就是默认用法，只有getter，在这种情况下不能改变计算属性的值，会报错：

<div id="app">
<div>{{total}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
first: "a",
last: "b"
},
computed: {
total: function () {
return this.first +" "+ this.last
}
}
});
</script>

接下来为计算属性加上setter，改变total的写法，写成对象的形式

<div id="app">
<div>{{total}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
first: "a",
last: "b"
},
computed: {
total: {
get:function(){
return this.first +" "+ this.last
},
set:function(value){
var names=value.split(" ");
this.first=names[0];
this.last=names[1];
}
}
}
});
</script>

为计算属性加上setter之后就可以改变计算属性的值了。当执行app.total="c d"的时候，setter就被调用，数据first和last也会相应更新，视图也会更新。
一般情况下，很少用到setter属性，一般可以直接采用默认写法。

2.计算属性还可以依赖其他计算属性

<div id="app">
<div>{{add}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
first: 1,
last: 2
},
computed: {
total: function(){
return this.first + this.last
},
add:function(){
let a=this.total;
return a+1;
}
}
});
</script>

3.计算属性还可以依赖其他实例的数据

<div id="app"></div>
<div id="app1">
<div>{{total}}</div>
</div>
<script>
var app=new Vue({
el: "#app",
data: {
first: 1,
last: 2
},
});
var app1 = new Vue({
el: "#app1",
data: {
first1: 3,
last1: 3
},
computed: {
total: function(){
return this.first1 + this.last1+app.first+app.last;
},
}
});
</script>

4.方法与计算属性在缓存上的不同

注意到，我们将同一个函数定义为方法而不是计算属性也可以达到相同的效果：

<div id="app">
<div>{{message}}</div>
<div>如果right的值为true，message会增加10，否则会增加100</div>
<div>{{judge()}}</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: 1,
right: true
},
methods: {
judge: function () {
if (this.right) {
return this.message + 10;
}
else {
return this.message + 100;
}
}
}
})
</script>

然而，将函数定义为方法或者定义为计算属性，两者是不同的：
计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时，它们才会重新求值，也就是说，对于上面的计算属性中的函数，只要message没有发生改变，多次访问judge就会返回之前的计算结果，而不会再次执行函数。
方法则不是这样，方法中的函数不会有缓存。每次调用方法中的函数，都会重新计算。

参考：《Vue.js实战》