文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中的计算属性与监听属性

2024-04-02 19:55

关注

一、为什么要使用计算属性

什么是计算属性

计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用：

在数据量比较大的时候，计算属性可以帮助我们提高性能，因为计算属性只会在数据变化的时候才会计算。

在讲解计算属性之前先来看下面的一个例子：

需求：外卖套餐A每份15元，客户点了3份，总价打八折，配送费5元，要求在界面显示总价，代码如下：

<template>
    <div>
        <div>您购买了{{info.name}}共{{info.count}}份</div>
        <h1>总价：{{info.count*info.price*info.sale+info.freight}}元</h1>
    </div>
</template>

<script>
export default {
    name:'Test',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            }
        }
    }
}
</script>

界面运行效果：

看了上面的例子，可能有人会问：使用这种方式已经实现了需求，那为什么还要使用计算属性呢？我们知道，vue中模板内的表达式非常便利，设计的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重而且难以维护，看上面的代码：

<h1>总价：{{info.count*info.price*info.sale+info.freight}}元</h1>

在这段代码中，模板不在是简单的声明式逻辑，而是复杂的逻辑计算，如果想要在多处引用总价的时候，就会难以维护。所以，对于任何复杂的逻辑，都应当使用计算属性。

看下面使用计算属性的例子：

<template>
    <div>
        <h1>计算属性</h1>
        <div>您购买了{{info.name}}共{{info.count}}份</div>
        <!--使用计算属性：和绑定普通属性一样-->
        <h1>总价：{{totalPrice}}元</h1>
    </div>
</template>

<script>
export default {
    name:'ComputedDemo',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            }
        }
    },
    computed:{
        // 定义计算属性totalPrice
        totalPrice:function(){
            return this.info.count*this.info.price*this.info.sale+this.info.freight
        }
    }
}
</script>

界面显示效果：

注意：计算属性是一个属性，不是方法，不能写在methods中，放在computed属性里面。

上面计算属性的写法也可以使用ES6的写法：

// 使用ES6写法
totalPrice(){
    return this.info.count*this.info.price*this.info.sale+this.info.freight
}

二、计算属性和方法的区别

1、区别

上面的例子除了使用计算属性，还可以使用方法实现：

<template>
    <div>
        <h1>计算属性</h1>
        <div>您购买了{{info.name}}共{{info.count}}份</div>
        <!--使用计算属性：和绑定普通属性一样-->
        <h1>使用计算属性获取总价：{{totalPrice}}元</h1>
        <h1>使用方法获取总价：{{getTotalPrice()}}元</h1>
    </div>
</template>

<script>
export default {
    name:'ComputedDemo',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            }
        }
    },
    computed:{
        // 定义计算属性totalPrice
        // totalPrice:function(){
        //     return this.info.count*this.info.price*this.info.sale+this.info.freight;
        // }
        // 使用ES6写法
        totalPrice(){
            return this.info.count*this.info.price*this.info.sale+this.info.freight;
        }
    },
    methods:{
        getTotalPrice(){
            return this.info.count*this.info.price*this.info.sale+this.info.freight;
        }
    }
}
</script>

界面显示效果：

通过上面的例子可以看出：计算属性和方法实现的最终效果是相同的。那么计算属性和方法有什么区别呢？计算属性是基于它们的响应式依赖进行缓存的，只有在响应式依赖发生改变时才会重新求值。这就意味着只要响应式依赖没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算。相比之下，调用方法总会再次执行函数。总价计算属性和方法的区别如下：

看下面的例子：

<template>
    <div>
        <h1>计算属性</h1>
        <!-- <div>您购买了{{info.name}}共{{info.count}}份</div> -->
        <!-- 使用计算属性：和绑定普通属性一样 -->
        您购买了<input type="text" v-model="info.name" />
        数量<input type="text" v-model="info.count" />
        
        <h1>使用计算属性获取总价：{{totalPrice}}元</h1>
        <button @click="getTotalPrice">计算属性</button>
        <h1>使用方法获取总价：{{data}}元</h1>
    </div>
</template>

<script>
export default {
    name:'ComputedDemo',
    data(){
        return{
            info:{
                userId:1,
                price:15,
                name:'套餐A',
                count:3,
                sale:0.8,
                freight:5
            },
            data:0
        }
    },
    computed:{
        // 定义计算属性totalPrice
        // totalPrice:function(){
        //     return this.info.count*this.info.price*this.info.sale+this.info.freight;
        // }
        // 使用ES6写法
        totalPrice(){
            console.log('计算属性');
            return this.info.count*this.info.price*this.info.sale+this.info.freight;
        }
    },
    methods:{
        getTotalPrice(){
            console.log('方法');
            this.data= this.info.count*this.info.price*this.info.sale+this.info.freight;
        }
    }
}
</script>

当依赖发生改变时会多次打印“计算属性”，而方法需要在点击按钮的时候才会发生改变。依赖不发生改变时点击按钮，也会打印“方法”。如下图所示：

2、计算属性使用场景

假如我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算，然后我们可能有其他的计算属性依赖于计算属性A。如果不使用计算属性，那么将不可避免的多次进行计算，会消耗很大的性能，这种情况下就需要使用计算属性。

三、修改计算属性的值

在上面的例子中都是使用的获取后的计算属性的值，那么如何修改计算属性的值呢？看下面的例子：

<template>
    <div>
        <h1>修改计算属性</h1>
        <h2>num:{{num}}</h2>
        <h2>计算属性num2:{{num2}}</h2>
        <button @click="change">改变计算属性的值</button>
    </div>
</template>

<script>
export default {
    name:'ComputedDemo2',
    data(){
        return{
            num:100
        }
    },
    computed:{
         num2(){
             return this.num-10;
         }
    },
    methods:{
        change(){
            this.num2=60;
        }
    }
}
</script>

效果：

这时会发现直接修改计算属性的值报错了，因为不能直接修改计算属性的值，如果要修改计算属性的值，需要修改其依赖项的值，看下面的代码：

<template>
    <div>
        <h1>修改计算属性</h1>
        <h2>num:{{num}}</h2>
        <h2>计算属性num2:{{num2}}</h2>
        <button @click="change">改变计算属性的值</button>
    </div>
</template>

<script>
import { get } from 'http';
export default {
    name:'ComputedDemo2',
    data(){
        return{
            num:100
        }
    },
    computed:{
         num2:{
             // 当计算属性要修改时先触发set方法
             // 读取当前计算属性中的值,get方法可以隐藏，默认进入的是get方法
             get:function(){
                return this.num-10;
             },
             set:function(val){
                 this.num=val;
             }
         }
    },
    methods:{
        change(){
            // 计算属性不能直接修改
            this.num2=60;
        }
    }
}
</script>

修改前的效果：

修改后的效果：

总结

计算属性的值不能修改，如果要修改计算属性的值，要通过计算属性里面的set方法修改其依赖项的值才能修改计算属性的值。

四、监听属性

监听属性(watch)是用来监听data中的数据是否发生变化，一般是监听data中的某个属性。

1、监听普通属性

看下面的代码：

<template>
    <div>
        <h1>监听属性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年龄：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 监听userName的变化
        // 有两个参数，newValue表示变化后的值，oldValue表示变化前的值
        userName:function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        },
        // 监听age的变化
        age:function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        }
    }
}
</script>

界面效果：

2、监听属性和计算属性的区别

监听属性和计算属性的区别主要有下面几点：

计算属性性能更优。一个监听属性只能监听一个属性的变化，如果要同时监听多个，就要写多个监听属性，而计算属性可以同时监听多个数据的变化。监听属性可以获取改变之前的属性值。计算属性能做的，watch都能做，反之则不行。能用计算属性尽量用计算属性。

需求：userName或age改变的时候打印出当前的userName和age值。

用监听属性实现：

<template>
    <div>
        <h1>监听属性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年龄：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <h1>{{info}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:''
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 监听userName的变化
        // 有两个参数，newValue表示变化后的值，oldValue表示变化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        },
        // 监听age的变化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        }
    }
}
</script>

如果要实现上述的需求，则需要对userName和age都进行监听，监听属性里面的代码都是重复的，如果有多个，那么就要写多个监听属性。在看计算属性：

<template>
    <div>
        <h1>监听属性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年龄：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用计算属性-->
        <h1>{{getUserInfo}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:''
        }
    },
    methods:{
        change(){

        }
    },
    // watch:{
    //     // 监听userName的变化
    //     // 有两个参数，newValue表示变化后的值，oldValue表示变化前的值
    //     userName:function(newValue,oldValue){
    //         // console.log('修改前的值：'+oldValue);
    //         // console.log('修改后的值：'+newValue);
    //         this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
    //     },
    //     // 监听age的变化
    //     age:function(newValue,oldValue){
    //         // console.log('修改前的值：'+oldValue);
    //         // console.log('修改后的值：'+newValue);
    //         this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
    //     }
    // }
    computed:{
        getUserInfo(){
            return '我的姓名:'+ this.userName+',年龄:'+this.age;
        }
    }
}
</script>

如果使用计算属性则只需要写一次就可以实现上面的需求了。

3、监听复杂对象

上面的例子中是监听的普通属性，那么如何监听对象里面的属性呢？看下面的代码：

<template>
    <div>
        <h1>监听属性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年龄：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用计算属性-->
        <h1>{{getUserInfo}}</h1>
        <!--监听对象属性-->
        <h1>监听对象属性</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:'',
           // 对象
           obj:{
               name:'123'
           }
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 监听userName的变化
        // 有两个参数，newValue表示变化后的值，oldValue表示变化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        },
        // 监听age的变化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        },
        // 监听对象中属性的变化
        'obj.name':function(newValue,oldValue){
            console.log('修改前的值：'+oldValue);
            console.log('修改后的值：'+newValue);
        }
    },
    computed:{
        getUserInfo(){
            return '我的姓名:'+ this.userName+',年龄:'+this.age;
        }
    }
}
</script>

效果：

能不能执行监听对象呢？答案是可以的，看下面代码：

<template>
    <div>
        <h1>监听属性</h1>
        姓名：<input type="text" v-model="userName"/>
        <h1>{{userName}}</h1>
        年龄：<input type="text" v-model="age"/>
        <h1>{{age}}</h1>
        <!--打印userName和age的值-->
        <!-- <h1>{{info}}</h1> -->
        <!--使用计算属性-->
        <h1>{{getUserInfo}}</h1>
        <!--监听对象属性-->
        <h1>监听对象属性</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
        <!--监听对象-->
        <h1>监听对象</h1>
        姓名：<input type="text" v-model="obj.name"/>
        <h1>{{obj.name}}</h1>
    </div>
</template>

<script>
export default {
    name:'watchDemo',
    data(){
        return{
           userName:"abc",
           age:23,
           info:'',
           // 对象
           obj:{
               name:'123'
           }
        }
    },
    methods:{
        change(){

        }
    },
    watch:{
        // 监听userName的变化
        // 有两个参数，newValue表示变化后的值，oldValue表示变化前的值
        userName:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        },
        // 监听age的变化
        age:function(newValue,oldValue){
            // console.log('修改前的值：'+oldValue);
            // console.log('修改后的值：'+newValue);
            this.info= '我的姓名:'+ this.userName+',年龄:'+this.age;
        },
        // 监听对象中属性的变化
        // 'obj.name':function(newValue,oldValue){
        //     console.log('修改前的值：'+oldValue);
        //     console.log('修改后的值：'+newValue);
        // }
        // 直接监听对象
        obj:{
            // handler表示默认执行的函数
            handler(newValue,oldValue){
                console.log('修改前的值：')
                console.log(oldValue);
                console.log('修改后的值：');
                console.log(newValue);
            },
            // 表示深度监听 
            // true：表示handler函数会执行
            // false：表示handler函数不会执行
            deep:true
        }
    },
    computed:{
        getUserInfo(){
            return '我的姓名:'+ this.userName+',年龄:'+this.age;
        }
    }
}
</script>

效果：

GitHub代码地址：https://github.com/JiangXiaoLiang1988/computed.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

Vue中的计算属性与监听属性

前端开发2024-04-02

Vue监听属性和计算属性

前端开发2024-04-02

Vue中的计算属性与监听属性怎么用

前端开发2023-06-29

关于Vue中的计算属性和监听属性详解

前端开发2023-05-20

Vue监听属性和计算属性怎么使用

前端开发2023-06-25

JavaScript计算属性与监视(侦听)属性的使用

前端开发2023-05-14

Vue计算属性与监视(侦听)属性的使用深度学习

前端开发2022-11-13

简单聊聊Vue中的计算属性和属性侦听

前端开发2024-04-02

Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

前端开发2024-04-02

Vue计算属性与监视属性详细分析使用

前端开发2022-11-13

Vue计算属性与监视属性实现方法详解

前端开发2024-04-02

详解Vue的监听属性

前端开发2024-04-02

Vue中监视属性和计算属性区别解析

前端开发2022-11-13

Vue中如何watch监听属性

前端开发2023-06-21

Vue中的 watch监听属性详情

前端开发2024-04-02

Vue中监视属性和计算属性的区别是什么

前端开发2023-07-04

聊聊Vue中的计算属性、方法与侦听器

前端开发2023-05-14

JavaScript计算属性与监视属性怎么使用

前端开发2023-07-04

Vue的计算属性

前端开发2023-06-03

Vue.js中的计算属性、监视属性与生命周期详解

前端开发2024-04-02
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯