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

Question

区别

1. 计算属性有缓存，计算属性会把函数执行一次，把结果存起来，依赖的值改变，会重新赋值。
2. 函数是每次模板编译都会执行。只要有响应式属性改变，视图刷新，函数就执行。

方法

  <div>
    <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>

计算属性

  <div>
    <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 计算属性会立即返回之前的计算结果，而不必再次执行函数。而方法只要页面中的属性发生改变就会重新执行，所以第一段代码输出两次结果，第二段代码只输出一次。

页面中最好不要直接使用函数，尽量使用 computed。