vue(六)--計算屬性（computed）

計算屬性關鍵詞: computed

 

demo1:

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算後反轉字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Ambbq!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

 

 

 

computed vs methods

　　咱們可使用 methods 來替代 computed，效果上兩個都是同樣的，可是 computed 是基於它的依賴緩存，只有相關依賴發生改變時纔會從新取值。而使用 methods ，在從新渲染的時候，函數總會從新調用執行。

demo2:

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算後反轉字符串: {{ reversedMessage }}</p>
  <p>使用方法後反轉字符串: {{ reversedMessage2() }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Ambbq!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>