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

一．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教程请参考：

Vue.js框架快速入门简明教程（二）：v-if条件语句和v-for循环语句使用分析详解