技術標籤：前端vue

計算屬性

翻轉字串

1.不使用computed

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

運算過程比較複雜，那麼維護起來就比較麻煩。
2.使用computed

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

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

3.使用methods
與computed效果相同

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

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

4.computed 和 methods 的區別
omputed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。
可以說使用 computed 效能會更好，但是如果你不希望快取，你可以使用 methods 屬性。