computed顾名思义就是计算属性。vue设计计算属性的本意是希望开发者在html代码中减少js代码，因为混合的代码不容易阅读和维护。通过使用计算属性，可以把原本复杂的代码封装为1个属性，然后调用该属性即可。你可以在数据绑定的时候调用，还可以在vue实例中调用，不过这里需要注意，计算属性中的数据是否响应将会决定该计算属性是否是响应的，并且计算属性会进行缓存，依赖的数据不是响应的，那么计算属性会立刻返回缓存，这是一把双刃剑 。在实际开发中，需不需要使用，还是看情况吧。

[loginview]

利用computed缩短代码

<template>
    <div>
        <p> {{person.car.name}}</p>
        <p> {{carName}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                person: {
                    name: '张珊',
                    age: 30,
                    car: {
                        name: '奥迪A7',
                        band: '奥迪'
                    }
                }
            }
        },
        computed: {
            carName() {
                return this.person.car.name
            }
        }
    }
</script>

这段代码中，我们使用了计算属性把person.car.name“重命名”为carName了，达到了缩短代码的目的。一般情况下我们也会对vuex的调用使用计算属性进行简化。如果你还有一些简单的逻辑需要编写在计算属性内也是可以的。

利用计算属性的缓存

现在我们来写一段比较对比下：

<template>
    <div>
       <p>{{aa}}</p>
       <p>{{aa}}</p>
       <p>{{bb()}}</p>
       <p>{{bb()}}</p>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                a:'aaaa',
                b:'bbbb'
            }
        },
        computed: {
            aa(){
                console.log('aaa')
                return this.a
            },
        },
        methods:{
            bb(){
                console.log('bbb')
                return this.b
            }
        }
    }
</script>

代码中分别使用计算属性和函数的方式来包装a，b属性，同时把调用过程输出到控制台。我们分别来查看页面和控制台的输出：

页面上输出：

控制台输出：

我们发现页面上输出了2次aaaa,但是控制台却只输出了1次aaa，印证了计算属性确实会使用缓存，而通过函数的方式调用，每次都会输出bbb。

计算属性赋值

计算属性默认只能获取数据,不能够直接对它赋值。这是因为计算属性默认只有getter，没有setter。当然想要赋值也比较简单，我们可以人为的添加setter。
代码：

<template>
    <div>
        <p>{{aa}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 'aaaa',
            }
        },
        computed: {
            aa: {
                get() {
                    return this.a
                },
                set(value) {
                    this.a = value
                }
            },
        },
        mounted() {
            this.aa = '11'
        }
    }
</script>

此时我们发现页面并没有输出aaaa，而是输出了我们赋值的11，说明成功赋值了。

[/loginview]