一．Vue.js计算属性
1、什么是计算属性
在Vue模版语法教程和实例中我们讨论过，Vue.js提供了完全的 JavaScript 表达式支持，所以可以在模版的 {{ }} 花括号或者属性绑定内书写JavaScript 语句。那么问题来了，在模板中放入太多的逻辑会让模板过重且难以维护，所以就有了计算属性，目的是为了在模板中绑定表达式是非常便利的。
例如说某宝上有一件衣服100块，老板需要计算利润。
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
//衣服信息
}
})
<div>
上线价：{{ clothes.price }}
</div>
<div>利润：【这里需要填写利润】</div>
利润需要减去成本和运费：
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
cost:30,//成本
freight:5,//运费
}
})
这时候，利润：
<div>利润：{{clothes.price * clothes.count-clothes.count*cost-clothes.count*freight}}</div>随着费用的增加，计算利润的表达式会越来越长，这时候视图层（view）的逻辑越来越复杂，代码会越来越臃肿，变得难以维护。
2、计算属性的具体用法
Vue.js计算属性中可以运用各种逻辑运算，函数调用等，最终会返回一个结果，就是计算属性后得到的结果，这个过程简化了在vue.js模版中使用过多的JavaScript 语句计算过程。在vue.js里面，所有的计算属性都写在 vue 实例的 computed 属性中，这个计算属性就是一个函数，返回值为最后属性的值。
同是上面的例子：
<div id="app">
<div>
上线价：{{ clothes.price }}
</div>
<div>利润：{{profit}}</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
cost:30,
freight:5
},
computed:{
profit(){
return this.clothes.price * this.clothes.count - this.clothes.count * this.cost - this.clothes.count * this.freight;
}
}
})
</script>
使用vue.js的属性计算，使得View层的代码会变的非常精简，且容易维护。
3、计算属性的缓存问题
而computed 的特点是计算属性是依赖进行缓存的。也就是说，使用computed 计算属性只有在它的相关依赖发生改变时才会重新取值。而也可以使用 methods 来替代 computed，效果上两个都是一样的，但是把计算属性放在methods 方法里面计算时，当相关依赖发生改变时，methods会重新渲染函数总会重新调用执行。所以耗费资源问题上要视情况而定，选择最适合高效率的方法。
同样也是刚刚的例子：现在该用methods计算成本的高低。
<p>{{profit()}}</p>
<script>
new Vue({
el: '#app',
data:{
clothes:{id:1,price:100,name:'衣服',count:1},
cost:30,
freight:5
},
methods:{
profit:function (){
if (this.cost>30){
return "成本过高";
}
else if(this.cost===30){
return "成本=30";
}
else {
return "成本过低";
}
}
}
})
</script>
二．Vue.js 监听属性 watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的监听器。在vue.js中用watch属性来监听和响应数据的变化。Watch属性的用法可以大致分为三种。
1、普通用法
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Luara',
lastName: 'luo',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
</script>
初始化的时候如图，函数没有执行，当监听到依赖有数据变化时才执行：
2、Handler和immediate
Watch属性有个特点，就是在第一次绑定值得时候不会执行函数，只有当watch监听到值发声改变时才会促发函数执行。既然这样，那当想要初次绑定的时候就执行函数，那该怎么办呢？Vue.js用immediate属性在初次传值时就执行函数。
watch: {
firstName:{
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
immediate: true
}
}
初始化的时候函数就执行了一次：
用法：Watch监听的数据后面写成对象的形式，Handler和immediate成对出现，immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
3、deep属性
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。只需要把属性deep: true
watch: {
firstName: {
handler(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
},
immediate: true,
deep: true,
}
}
数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。
以上是vue.js的属性计算和使用watch监听属性的教程，在学习过程中需要多动手才能有所体会，希望本文章中的例子和解析能给你带来启发。
更多vue.js教程请参考：
