目录

1. 什么是计算属性
2. computed与methods不同
3. 侦听器（watch）

1. 什么是计算属性

计算属性就是当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。来看图一的代码。

<div id="app">
    {{firstName+lastName}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            firstName:"Hello",
            lastName:"Vue"
        }
    })
</script>

以上的代码，我们发现在插值表达式存在逻辑运算，这种情况VUE是不建议的。因为，VUE主要作用域视图层的展示。所以我们就要用到computed计算属性。

<div id="app">
    {{fullName}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            firstName:"Hello",
            lastName:"Vue"
        },
        computed:{
            fullName (){
                retuen this.firstName + this.lastName
            }
        }
    })
</script>

在应用计算的时候，我们要注意一下几点：

1. Vue实例中必须声明 computed 选项
2. computed 属性接受的是一个对象，对象中是个函数
3. 对象中的函数，必须是结果的返回值 retuen

2. computed与methods不同

理论上computed与methods都是定义函数处理逻辑方法的，他们两者最大的不同之处就是缓存机制 。

1. computed 计算的结果如果不发生改变就不会触发
2. methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行相对应的方法。如果把computed中的方法写到methods中会浪费性能。
3. computed必须返回一个页面绑定的值，methods中可以只执行逻辑代码,可以有返回值，也可以没有
4. 两者调用的方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。

3. 侦听器（watch）

Vue提供了一种更统一的方式来观察和响应Vue实例上的数据变动：侦听属性。当你有一些数据需要随着其他数据变动，执行异步操作或者开销较大的操作时，建议用watch
通过控制台的调试,我们可以发现watch与computed是有共同的特点，都是可以实现计算属性的缓存。但是，watch方式比较啰嗦，我们一般首选还是computed。

补充： 计算属性会默认提供getter,不过在你需要的时候也可以为你提供一个setter