Vue入門教程05-計算屬性

一、計算屬性

計算屬性使用computed關鍵詞，主要用於處理一些複雜邏輯，比如使用以下方式在模板中實現字符反轉的邏輯時，模板顯得比較混亂：

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

在這裏改用計算屬性實現：

<template>
  <div id="hello">
    <p>原內容: {{ msg }}</p>
    <p>反轉後內容: {{ reversedMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg:'abcdef'
      }
    },
    computed:{
      reversedMsg: function () {
        return this.msg.split('').reverse().join('')
      }
    }
  }
</script>

在上面程序中，定義一個computed並在其中聲明一個計算屬性 reversedMsg（默認是getter屬性），當msg 發生改變時，會觸發reversedMsg。

二、計算屬性與方法的區別

也可以使用 methods 來替代 computed，執行結果是一樣的。不同之處在於， computed 基於依賴緩存，只有依賴內容發生改變時纔會重新取值。也就是msg沒有發生改變的前提下，多次訪問 reversedMsg 計算屬性會立即返回之前的計算結果，而不會再次執行函數。
而 methods 在重新渲染的時候，總會重新調用執行。如果不希望使用緩存，則可以使用 methods 屬性。

三、計算屬性的setter方式

我們可以增加get、set方式的定義來實現getter讀取、setter設值的操作：

<template>
  <div id="hello">
    <p>內容: {{ msg }}</p>
    <p>新設置的內容: {{ reversedMsg ='123456'}}</p>
    <p>反轉後內容: {{ reversedMsg }}</p>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg:'abcdef'
      }
    },
    computed:{
      reversedMsg:{
        get: function () {
          return this.msg.split('').reverse().join('')
        },
        set: function (newValue) {
          this.msg = newValue;
        }
      }
    }
  }
</script>

END.