Vue.js 计算属性(computed)
如果在模板中使用一些复杂的表达式，会让模板显得过于繁重，且后期难以维护。对此，vue.js 提供了计算属性（computed），你可以把这些复杂的表达式写到里面。
实例 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 计算属性(computed)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 计算属性(computed)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
a={{ a }}, b={{ b }} <!-- a = 1; b = 2; -->
</div>
<script>
var app= new Vue({
el: '#app',
data: {
a: 1
},
computed: {
b: function () {
return this.a + 1 //返回的值是2 所以b=2;
}
}
})
</script>
</body>
</html>
计算属性 缓存
缓存是计算属性的一大特点，使用计算属性时，每次获取的值是基于依赖的缓存值，也就是说，当数据源未发生变动时，获取的值将一直是缓存值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 计算属性(computed)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 计算属性(computed)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
a={{ a }}, b={{ b }} <!-- a = 1; b = 2; -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: 1
},
computed: {
b: function () {
return this.a + 1 //返回的值是2 ,b=2 因为 b 是依赖于 a 的;
}
}
})
vm.b = 8;
</script>
</body>
</html>
上述实例中，我们对 b 进行了重新赋值，但是没有改变a的值，因为 b 是依赖于 a 的，所以最终 b 的结果还是2。
计算属性与methods的区别
计算属性能实现的功能，使用方法（methods）也能实现，但两者还是有本质的不同，区别如下：
计算属性获取的是缓存值，而methods是直接调用函数进行计算所得。
计算属性中的函数在dom加载后马上执行，并将结果显示在页面上。methods中的函数需要一定的触发条件，否则不会执行。
计算属性 Getter 和 Setter 方法
vue.js 计算属性有两个方法，分别为 getter 和 setter，当没有指明方法时，默认使用 getter。
实例1中 computed 里面的代码也可以写成：
computed: {
b: {
get:function () {
return this.a + 1
}
}
}
运行结果是一样的。
实例 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js 计算属性(computed)</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<title>Vue.js 计算属性(computed)</title>
<script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">{{message}}</div> <!-- 显示为my second lesson -->
<script>
var vm = new Vue({
el: '#app',
data: {
title: 'my first lesson'
},
computed: {
message: {
// getter
get: function () {
return this.title
},
//setter
set: function (newValue) {
this.title = newValue
}
}
}
})
vm.message = 'my second lesson'; // vue.js会执行set方法，从而改变message的值，
//如果不使用set方法，message值为“my first lesson”。
</script>
</body>
</html>
上述实例中，在给message重新赋值时，vue.js会执行set方法，从而改变message的值，如果不使用set方法，message值为“my first lesson”。