計算屬性

計算屬性：顧明思議就是 計算并返回計算的結(jié)果 ，所以，當(dāng)我們要處理大量的邏輯，但是最后只需要取得最后的結(jié)果的時候可以用 計算屬性 computed

在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

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

這是一個簡單的 字符翻轉(zhuǎn) 處理，但是我們自己在插槽里進行邏輯處理此時模板看起來將不再簡單，因此我們需要用計算屬性，我們只需要把計算完的值展示就可以了，至于處理的邏輯我們需要在 computed 選項里進行

例如：

<div id="example">
  <p>原始數(shù)據(jù): "{{ message }}"</p>
  <p>計算過的數(shù)據(jù): "{{ 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 （讀取與設(shè)置）

計算屬性默認(rèn)只有g(shù)et方法只能讀取，如果需要可以添加set方法

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

首先我們驗證下 計算屬性只有g(shù)et方法，只能讀取不嫩設(shè)置值。
我們 創(chuàng)建一個 按鈕 點擊將 計算屬性值改變，如果沒有變則說明 計算屬性默認(rèn)只有g(shù)et方法不能設(shè)置值

{{reversemsg}}
<button @click="reversemsg ='helloWorld'">將reversemsg改為 helloWorld</button>

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

執(zhí)行結(jié)果，點擊按鈕 計算屬性 reversemsg 值根本沒變
查看演示

接下來我們?yōu)橛嬎銓傩蕴砑?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 就是 設(shè)置計算屬性的值
                    return this.msg2 = val //改變計算屬性值其實就是改變源數(shù)據(jù)的值
            }
        }
    }
})

執(zhí)行結(jié)果，點擊按鈕 計算屬性 reversemsg2 值改成了 你好世界
查看演示

總結(jié)

1. 什么情況下需要使用計算屬性
   當(dāng)我們要處理大量的邏輯，但是最后只需要取得最后的結(jié)果的時候可以用 計算屬性
2. 如何使用計算屬性
   創(chuàng)建計算屬性需要在 vue 實例 computed 選項里，該選項是一個對象，里面?zhèn)魅雑son對象 key：函數(shù),return出計算結(jié)果，該函數(shù)默認(rèn)只有g(shù)et方法只能讀取不能設(shè)置

comouted:{
  fn1:function(){
    return 邏輯處理
  },
  fn2:function(){
    return 邏輯處理
  }
...
}

如需設(shè)置值可傳入 set方法,該函數(shù)有一個參數(shù)就是 改變計算屬性的值，

computed:{
  fn:{
    get:function(){
      return
    },
    set:function(val){
      //val 就是設(shè)置改變屬性的值 比如 fn = 1， val就是1
    }
  }
}