个性化阅读
专注于IT技术分析

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>

初始化的时候如图,函数没有执行,当监听到依赖有数据变化时才执行:

vue-watch实例-01

2、Handler和immediate

Watch属性有个特点,就是在第一次绑定值得时候不会执行函数,只有当watch监听到值发声改变时才会促发函数执行。既然这样,那当想要初次绑定的时候就执行函数,那该怎么办呢?Vue.js用immediate属性在初次传值时就执行函数。

watch: {
    firstName:{
        handler(newName, oldName) {
            this.fullName = newName + ' ' + this.lastName;
        },
        immediate: true
    }

}

初始化的时候函数就执行了一次:

vue-watch实例-02

用法: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循环语句使用分析详解

赞(0) 打赏
未经允许不得转载:srcmini » vue.js框架快速入门简明教程(三):计算属性和属性监听
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏