计算属性
将Maustache(插值中的)复杂的逻辑使用计算属性来代替 将插值模板中的表达式的复杂逻辑放入计算属性 计算属性以函数的形式定义
举个列子
<body>
<div id="app">
<p>原始字符串:{{message}}</p>
<p>表达式实现反转:{{message.split('').reverse().join('')}}</p>
<p>计算属性反转:{{reversedMessage}}</p>
<p>在Vue的方法中实现：{{reversedMessageMethod()}}</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "Hello World"
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
},
methods: {
reversedMessageMethod() {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
例子2: 将计算属性定义为：对象属性包含getter和setter
通过getter收集依赖，setter响应变化 (响应式系统的核心：Object.definePorperty() + 发布订阅模式)
<body>
<div id="app">
<p>First Name: <input type="text" v-model="firstName"></p>
<p>Last Name: <input type="text" v-model="lastName"></p>
<p>{{fullName}}</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "Smith",
lastName: "Will"
},
computed: {
fullName: {
get: function() {
return this.firstName + ' ' + this.lastName;
},
set: function(newValue) {
const [first, last] = newValue.split(' ');
this.firstName = first;
this.lastName = last;
}
}
}
})
</script>
</body>
v-if & v-for 组合使用的替代：计算属性
<body>
<div id="app">
<p>
<h3>待完成:</h3>
<ul>
<li v-for="complete in completedPlans">
{{complete.content}}
</li>
</ul>
</p>
<p>
<h3>已完成:</h3>
<ul>
<li v-for="incomplete in completedPlans">
{{incomplete.content}}
</li>
</ul>
</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
plans: [{
content: "写作业",
isComplete: true
}, {
content: "买菜",
isComplete: true
}, {
content: "跑步",
isComplete: false
}]
},
computed: {
completedPlans() {
return this.plans.filter(plan => plan.isComplete);
},
inCompletedPlans() {
return this.plans.filter(plan => !plan.isComplete);
}
}
})
</script>
</body>
使用计算属性的优点：
使用计算属性可以使用它的特性基于响应式缓存，只有计算属性的相关响应式依赖发生变化时才会重新求值。而方法的话是调用一次求值一次，没有缓存。 （依赖：可以理解为使用调用了那个直接就是产生了依赖）
计算属性练习demo
https://github.com/suckitfa/cart-demo-computed-attrs
参考
- 《Vue.js从头入门到实战》
- 《Vue.js深入浅出》
