vue.js框架快速入门简明教程(三)（计算属性和属性监听） _vue计算属性

一．Vue.js计算属性1、什么是计算属性
【vue.js框架快速入门简明教程(三)（计算属性和属性监听）】在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(){ returnthis.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教程请参考：
Vue.js框架快速入门简明教程（二）：v-if条件语句和v-for循环语句使用分析详解