计算属性computed和方法methods的区别

计算属性

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{getText}}
    </div>
    <button @click="handleClick">点击</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        text: 'world'
      },
      computed: {
        getText () {
          let text = this.text + 1
          console.log(text)
          return text
        }
      }
      methods: {
        handleClick () {
          this.msg = 'hello1'
        }
      }
    })
  </script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 text 还没有发生改变，多次访问 getText 计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法只要页面中的属性发生改变就会重新执行，所以第一段代码输出1次结果，第二段代码会输出2次。

  <div id="app">
    <div>
      {{msg}}
    </div>
    <div>
      {{getText()}}
    </div>
    <button @click="handleClick">点击</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        text: 'world'
      },
      methods: {
        handleClick () {
          this.msg = 'hello1'
        },
        getText () {
          let text = this.text + 1
          console.log(text)
          return text
        }
      }
    })
  </script>

页面中最好不要直接使用方法，尽量使用computed计算属性。