初学者对Vue中computed计算属性的理解

computed计算属性

定义：当要使用的属性不存在时，需要通过计算已有属性得来

原理：底层逻辑是借助Object.defineproperty()方法提供的getter和setter

注：计算属性不能开启异步任务维护数据

<div id="app">
    姓：<input type="text" v-model="firstName"><br/><br/> 
    名：<input type="text" v-model="lastName"><br/><br/> 
    全名：{{fullName}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            firstName: '憨',
            lastName: '瓜'
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName +'-'+ this.lastName;
                },
                set(value) {
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1]
            }
        }
    })
</script>

1、当fullName属性在页面中被读取时，get函数会被调用，且get函数的返回值作为fullName的值，另外，getter返回值会被存储到本地，页面中多次读取getter，只调用一次

2、Vue已经设置好get函数中的this指向Vue的实例对象vm

3、计算属性最终会出现在vm身上，直接读取即可

getter什么时候执行？

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

（2）当getter所依赖的数据发生变化时，会被再次调用

优势：与methods相比，内有缓存机制，效率更高，调试方便。

setter什么时候写？

如果计算属性要被修改，那必须要写setter去响应修改，且setter要引起计算时所依赖的数据变化

注意：当计算属性只用于读取不用于修改时，可以有简写形式

computed:{
    fullName() {
        return this.firstName + '-' + this.lastName;
    }
}