计算属性的声明
computed:{
}
<body>
<div id="box">
<p>{{fullname}}</p>
<p>{{age}}</p>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
firstname: 'hello',
lastname: 'kit',
age: 25
},
computed: {
fullname: function () {
console.log("调用一次")
return this.firstname + " " + this.lastname
}
}
});
</script>
</body>
通过methodsj进行计算
<body>
<div id="box">
<p>{{fullname()}}</p>
<p>{{age}}</p>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
firstname: 'hello',
lastname: 'kit',
age: 25
},
methods:{
fullname(){
console.log("调用一次")
return this.firstname + " " + this.lastname
}
}
});
</script>
</body>
通过这两个不同的代码方法，分析缓存的作用
（1）通过方法methods,实现计算，在浏览器中调试，发现每更改一次age的值，fullname()都会被调用一次，而firstname和lastname的值并没有发生改变。
（2）计算属性computed。通过浏览器进行调试。不改变firstname或lastname的值，计算属性将不会被调用
调试发现，计算属性里含有缓存概念。为什么需要缓存呢？假设有一个性能开销比较大的计算属性A，它需要遍历一个很大很大的数组并且做大量计算，还有可能其他计算属性依赖于A。如果没有缓存，将不可避免的多次执行A的getter方法。引入缓存，将极大的提高产品性能。
另外还有一个侦听器 watch
<div id="box">
<p>{{fullname}}</p>
<p>{{age}}</p>
</div>
<script>
var vm = new Vue({
el: '#box',
data: {
firstname: 'hello',
lastname: 'kit',
fullname:'hello kit',
age: 25
},
//侦听器
watch:{
firstname:function(){
console.log('计算了一次')
this.fullname=this.firstname+""+this.lastname
},
lastname:function(){
console.log('计算了一次')
this.fullname=this.firstname+""+this.lastname
}
}
});
</script>
通过浏览器调试发现，他也有缓存机制
弊端：通过对比methods和computed，发现watch的代码量很大，更好的想法是使用计算属性而不是命令式的watch回调。