什么是计算属性
如下，对于任何复杂逻辑，应当使用计算属性。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>计算属性-01</title>
</head>
<body>
<div id="app">
<p>
firstName: <input type="text" v-model="firstName">
</p>
<p>
lastName: <input type="text" v-model="lastName">
</p>
<p>
fullNameByComputed: {{fullNameByComputed}}
</p>
<p>
fullNameByMethod: {{fullNameByMethod()}}
</p>
<p>
now: {{now}}
</p>
<p>
now1: {{now1()}}
</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
firstName: 'pxy',
lastName: 'amos'
},
methods: {
fullNameByMethod: function() {
return this.firstName + '.' + this.lastName;
},
now1: function () {
return Date.now();
}
},
<!-- 计算属性 -->
computed: {
fullNameByComputed: function () {
return this.firstName + '.' + this.lastName;
},
now: function () {
return Date.now();
}
}
});
})();
</script>
</body>
</html>
为什么不用methods代替Computed
在上示例中，计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName 或者 lastName 还没有发生改变，多次访问 fullNameByComputed 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，每当触发重新渲染时，调用methods将总会再次执行函数。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
上示例中，在输入框中输入内容时，页面上now的值不会改变，但是now1的值会跟着变动。如下↓↓↓：
计算属性的getter和setter
绝大多数情况下，我们只会用默认的 getter 方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>计算属性-02</title>
</head>
<body>
<div id="app">
<p>
firstName: <input type="text" v-model="firstName">
</p>
<p>
lastName: <input type="text" v-model="lastName">
</p>
<p>
fullName: <input type="text" v-model="fullName">
</p>
<p>
fullName1: <input type="text" v-model="fullName1">
</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
firstName: 'pxy',
lastName: 'amos'
},
computed: {
fullName: {
get: function () {
return this.firstName + '-' + this.lastName;
},
<!-- 当fullName变化时，firstName和lastName也会变化 -->
set: function(newVal) {
var names = newVal.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
},
<!-- 默认就是上边fullName中get-->
fullName1:function(){
return this.firstName + '-' + this.lastName;
}
}
});
})();
</script>
</body>
</html>