vue 计算属性

想搞技术

已于 2022-08-31 17:32:24 修改

阅读量1.6k

点赞数

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

于 2022-08-29 11:55:22 首次发布

本文链接：https://blog.csdn.net/weixin_57742734/article/details/126579423

版权

vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

计算属性：

1、定义：要用的属性不存在，要通过已有属性计算得来。

2、原理：底层借助了object.defineproperty方法提供的getter和setter。

3、get函数什么时候执行？

（1）初次读取时会执行一次。

（2）当依赖的数据发生改变时会被再次调用。

4、优势：与methods实现相比，内部存在缓存机制（复用），效率更高，调试方便。

5、备注：

（1）：计算属性最终会出现在vm上，直接读取使用。

（2）：如果计算属性要被修改，那必须写set函数去响应修改。

<body>
    <div class="a" id="a">
        省：<input type="text" v-model="province"> <br><br>
        市：<input type="text" v-model="city"> <br><br>
        位置：<span>{{ area }}</span> <br><br>
        修改位置：<input type="text" v-model="area">
    </div>
    <script>
        var vm = new Vue({
            el: '#a',
            data: {
                province : '云南',
                city : '昆明',
            },
            computed:{
                area:{
                    get(){
                    console.log('get方法被调用')
                    return this.province + '-' + this.city
                    },
                    set(area){
                        console.log('set方法被调用')
                        const arr = area.split('-')
                        this.province = arr[0]
                        this.city = arr[1]
                        
                    }
                }
            }
        }
        )
    </script>
</body>

省和市通过绑定v-model事件实现数据的双向绑定，而所在位置的信息并不在data数据中，这就是所需的数据不存在，所以用到了计算属性来计算得到，当然也可以通过将数据通过插值法直接在{{ }}中写表达式实现例如{{province + '-' + city}}，但是在vue中希望模板视图中尽量的简单，所以不推荐，但是这样的写法并不会报错。其次通过methods下写方法页可以实现，定义好方法后直接在视图中{{方法名()}}也可以。但是由于计算属性的缓存机制，所以优先使用计算属性方法。

如下图修改省和市可以通过计算属性得到位置。修改省和市的时候同时位置信息也发生改变

由于计算属性有缓存机制，所以在已有属性不发生改变的情况下，同时使用多次计算属性也只会调用一次get方法。

除非我们通过input框去修改了省和市的数据，使数据发生改变时才会再次调用get方法去更新计算属性。

通常计算属性并不会去修改，我们只是为了展示一些计算后的属性去供人查看。所以计算属性有一个简洁的写法，只具备get方法，具体代码如下：

计算属性与监视属性的区别：

computed: 是vue的计算属性, 是通过data中已有的属性计算得来的, 理解为是对data数据的加工处理, 计算属性最终会出现在VM上可以直接读取
watch: 是vue的监听属性, 和computed一样都是一个对象, 当被监视的属性变化时, 回调函数自动调用, 进行相关操作(监视的属性必须存在，才能进行监视), 监听复杂类型数据(对象,数组)变化时需要加上deep属性开启深度监听
两者区别:
- computed能完成的功能，watch都可以完成
- watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作, computed不支持异步，有异步操作时无法监听数据变化
- computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
- computed第一次加载时就监听；watch默认第一次加载时不监听(可以通过设置immediate参数为true实现第一次加载时监听)。