计算属性的认识
在模板中可以直接通过插值语法显示一些data中的数据。 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}} ，这样就很杂糅，因此我们可以使用计算属性来写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Lee',
lastName: 'Geneyee'
},
// computed: 计算属性()
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
上述代码中，我们可以发现无论是mustache语法，或者是计算属性，或者methods。那么，computed与methods有怎样的不同点呢。
computed与methods
computed里的方法在初始化执行过后，只要任何值有更新，那么所有在computed计算属性里和其相关的值都会更新。methods只有在调用的时候才会执行对应的方法，不会自动同步数据。
computed计算属性跟methods在内部的函数写起来没有什么区别，只是在调用的时候不一样。
计算属性的缓存
我们依旧可以拿上面的例子，来试试。我们在div当中多次使用fullName与getFullName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Li',
lastName: 'Jingyi'
},
// computed: 计算属性()
computed: {
fullName: function () {
console.log("computed")
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName() {
console.log("methods")
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
</html>
总而言之，computed计算属性的缓存原理在我们处理大量数据的时候使用可以大大提高效率，不必在数据没有发生改变的时候重新获取数据的值，可直接获取到结果，并且只执行绑定依赖的方法。methods里方法在依赖的值改变后，只有设置触发才会重新执行methods里相关的方法。
关于computed的一些使用
使用了计算属性以后，觉得这个真的非常好用，在写小demo的时候。记得有个小demo是一个书籍购物车的书写，其中有个功能为计算出最后购物车的总价，这里就使用了计算属性来写，非常简洁。
const app=new Vue({ el: "#app", data: { books: [ {id: 1, name: "《算法导论》", date: 2006.9, price: 85.00, count: 1}, {id: 2, name: "《UNIX编程艺术》", date: 2006.2, price: 59.00, count: 1}, {id: 3, name: "《编程》", date: 2006.10, price: 39.00, count: 1}, {id: 4, name: "《代码大全》", date: 2006.3, price: 128.00, count: 1} ] }, computed:{ totalprice:function( ){ let result=0; for(let i=0;i<this.books.length;i++){ result +=this.books[i].price*this.books[i].count } return result } }, filters:{ pri:function(obj){ return '¥'+obj.toFixed(2) } } })
