Vue 计算属性和使用的小技巧

1， 计算属性可以进行复杂的逻辑处理，只要返回一个结果就可以
2，每一个计算属性都有setter，getter
<div>{{ fullName }}</div>

var app =  new Vue({
    el: '#app',
    data : {
        firstName: 'H',
        lastName: 'L'
      },
    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]
              }
          }
      }
})

当执行 app.fullName = 'John Doe'时，setter就会被调用

小技巧：
（1），计算属性可以依赖其他计算属性
（2），计算属性不仅可以依赖当前的Vue实例的数据，还可以依赖其他实例的数据

同样在methods里定义的一个方法也可以实现同样的效果，为什么还要使用计算属性，因为一个计算属性是几句他的依赖缓存的，一个计算属性所依赖的数据发生变化是，它才会从新获取值。