Vue 2.0 计算属性

计算属性

---

计算属性：顾明思议就是 计算并返回计算的结果 ，所以，当我们要处理大量的逻辑，但是最后只需要取得最后的结果的时候可以用 计算属性 computed

在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这是一个简单的 字符翻转 处理，但是我们自己在插槽里进行逻辑处理此时模板看起来将不再简单，因此我们需要用计算属性，我们只需要把计算完的值展示就可以了，至于处理的逻辑我们需要在 computed 选项里进行

例如：

<div id="example">
  <p>原始数据: "{{ message }}"</p>
  <p>计算过的数据: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter  （读取）
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

查看计算属性演示

计算属性 get 与 set （读取与设置）

计算属性默认只有get方法只能读取，如果需要可以添加set方法

computed:{
  add:function(){
    return this.msg + 1
  }
}
上面代码等于下面的
computed:{
  add:{
     get:function(){
      
      }
  }
}

首先我们验证下 计算属性只有get方法，只能读取不嫩设置值。
我们 创建一个 按钮 点击将 计算属性值改变，如果没有变则说明 计算属性默认只有get方法不能设置值

{{reversemsg}}
<button @click="reversemsg ='helloWorld'">将reversemsg改为 helloWorld</button>

var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello',
    },
    computed:{
        reversemsg:function(){ //默认get方法
            return this.msg.split('').reverse().join('')
        }
    }
})

执行结果，点击按钮 计算属性 reversemsg 值根本没变
查看演示

接下来我们为计算属性添加 set 方法

{{reversemsg2}}
<button @click="reversemsg2 ='你好世界'">将reversemsg2改为 你好世界</button>

var vm = new Vue({
    el:'#app',
    data:{
        msg2:'你好',
    },
    computed:{
        reversemsg2:{ //添加set方法
            get:function(){
                return this.msg2.split('').reverse().join('')
            },
            set:function(val){
                console.log(val) //val 就是 设置计算属性的值
                    return this.msg2 = val //改变计算属性值其实就是改变源数据的值
            }
        }
    }
})

执行结果，点击按钮 计算属性 reversemsg2 值改成了 你好世界
查看演示

总结

1. 什么情况下需要使用计算属性
   当我们要处理大量的逻辑，但是最后只需要取得最后的结果的时候可以用 计算属性
2. 如何使用计算属性
   创建计算属性需要在 vue 实例 computed 选项里，该选项是一个对象，里面传入json对象 key：函数,return出计算结果，该函数默认只有get方法只能读取不能设置

comouted:{
  fn1:function(){
    return 逻辑处理
  },
  fn2:function(){
    return 逻辑处理
  }
...
}

如需设置值可传入 set方法,该函数有一个参数就是 改变计算属性的值，

computed:{
  fn:{
    get:function(){
      return
    },
    set:function(val){
      //val 就是设置改变属性的值 比如 fn = 1， val就是1
    }
  }
}