Vue 的计算属性(computed)

最新推荐文章于 2024-06-04 14:56:26 发布

可期！

最新推荐文章于 2024-06-04 14:56:26 发布

阅读量248

点赞数

分类专栏：前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_52915467/article/details/121741169

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

今天有事努力的一天！！！
如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。

上知识！

在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性

比如说我们在下面举一个例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>methods实现</title>
    <script src="../vue.js/vue.js"></script>
</head>

<body>
    <h1>购物车</h1>
    <div id="root">
        商品单价：<input type="text" v-model="oneprice">
        <br /><br />
        商品数量：<input type="text" v-model="quantity">
        <button @click="add">+</button> <button @click="sub">-</button>
        <br /><br />
        商品总价：<span>{{totalprice}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            //属性
            data: {
                oneprice: 29,
                quantity: 1
            },
            methods:{
                add:function(){
                    this.quantity++
                },
                sub:function(){
                    this.quantity--
                }
            },
            // 计算属性
            computed: {
                totalprice: {
                    get() {
                        return this.oneprice * this.quantity
                    },
                    set(value){
                        console.log('set',value)
                        const arr = value.split('-')
                        this.oneprice = arr[0]
                        this.quantity = arr[1]
                    }
                }
            }
        })
    </script>
</body>

</html>

由以上代码我们可知oneprice和quantity属性是已知的，但是totalprice属性是不存在的。但是我们可以通过computed 计算属性计算得到totalprice属性。即通过已有的属性计算得到不存在的属性。
以下代码：通过oneprice * quantity 得到 totalprice

data: {
                oneprice: 29,
                quantity: 1
            }

此处我们在data中定义了oneprice和quantity的初始值，那么他们就充当的已存在的属性，然后我们绑定点击事件就可以实现用户控制商品数量的加减。

methods:{
                add:function(){
                    this.quantity++
                },
                sub:function(){
                    this.quantity--
                }
            }

这里我们使用add()函数和sub()函数，可以简单的计算控制quantity的自增自减

computed: {
                totalprice: {
                    get() {
                        return this.oneprice * this.quantity
                    },
                    set(value){
                        console.log('set',value)
                        const arr = value.split('-')
                        this.oneprice = arr[0]
                        this.quantity = arr[1]
                    }
                }
            }

商品总价就等于商品单价*商品数量。我们还需要使用到get函数
这里我们使用get原理是：当有人读取totalprice时，get就会被调用。且返回值就作为totalprice的值
那我们什么时候使用get：1.初次读取totalprice时。 2.所依赖的数据发生变化时

set(value){
                        console.log('set',value)
                        const arr = value.split('-')
                        this.oneprice = arr[0]
                        this.quantity = arr[1]
                    }

这里的set函数是当计算属性被修改时需要调用set函数，且需要依赖数据的变化

那么今天就讲到这里，让我们来做个总结

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得到
2.原理：底层借助了object.defineproperty()方法提供getter和setter
3.get函数什么时候被执行？
（1）初次被读取时
（2）当依赖的数据发生变化时会被再次强调
4.优势：与methods实现相比，内部有缓存机制，效率更高，测试方便
5.备注：
(1) 计算属性最终会出现在vm上，直接读取即可
(2) 如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖数据发生变化

可期！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 的计算属性(computed)

今天有事努力的一天！！！如果事与愿违，那一定另有安排。积极生活，让我们的每一天都充满热情。上知识！在Vue中我们可以通过计算将已知的属性通过computed计算得到不存在是属性比如说我们在下面举一个例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫