vue中的计算属性和侦听器

计算属性和侦听器的使用：

模板中放入太多的逻辑的时候难以维护。对于复杂的逻辑都可以使用计算属性。
计算属性中有一个缓存，即使重新渲染，只要数据不发生变化，就不会触发对应属性的计算逻辑。
watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。

1、 计算属性：

计算属性相当于生命一个属性的变量，该变量由data中的变量计算(逻辑)出来的结果。如果data的对应的变量发生改变的时候，相应的计算属性的方法将会执行。
注释: methods里面的方法也可以执行计算属性的逻辑结果是相同的，区别是计算属性是响应式依赖进行缓存的，只有在相关响应式依赖发生改变的时候，才会重新计算，调用对应计算属性方法。如果响应式依赖没有发生变化的时候，就不会调用计算方法，对应计算属性的值会从之前的缓存中去取值。

<div id="app">  {{total}}  </div>
<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            num: 10,  
            price: 8.8,  
        },  
        computed: {  
            total: function () {  
                return this.num * this.price  
            }  
        }  
    })
</script>

计算属性深入：

默认的计算属性只有getter方法，会返回计算出来的值。也有setter方法提供。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

如果手动的去改动fullName的时候，对应的firstName和lastName的值也会对应修改。

2、 侦听器：

<div id="app">  {{total}}  </div>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            num: 10,  
            price: 8.8,  
        },  
        watch: {  
            num: function (val) {  
                this.total = val * this.price  
            },
            price: function (val) {
                this.total = this.num * val
            }
        }  
    })
</script>

相比之下计算属性会比侦听属性好一些，侦听属性命令会重复，代码冗余。
但是在数据发生异步变化的时候或者开销较大的时候，常用于侦听器。