vue 中 computed 和 method 的区别

• 计算属性的关键字 computed

计算属性用来处理一些逻辑问题很有用，例如给字符串中每个字符中间加符号 -

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>加了字符 - 的字符串: {{ addMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'goodluck!'
  },
  computed: {
    // 计算属性的 getter
    addMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').join('-')
    }
  }
})
</script>
//页面显示结果
/*
原始字符串: goodluck!
加了字符 - 的字符串: g-o-o-d-l-u-c-k-!
*/

• 方法 它的关键字是 method
  上述逻辑问题也可以用方法来解决

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>加了字符 - 的字符串: {{ addMessage() }}</p>//注意这里调用的时候带了括号，因为是方法，而计算属性不带括号
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'goodluck'
  },
  method: {
      addMessage: function () {
      return this.message.split('').join('-')
    }
  }
})
</script>
//页面显示结果
/*
原始字符串: goodluck!
加了字符 - 的字符串: g-o-o-d-l-u-c-k-!
*/

• 计算属性和方法的区别

计算属性是把当前结果作为一个缓存，下次运行时直接返回缓存结果，计算属性的数据是基于data数据的，如果data中数据改变了，计算属性中的结果也会发生相应改变，所以性能更好，而方法在重新渲染的时候，函数总会重新调用执行，不管data数据有没有发生变化,如果不希望缓存可以使用method