Vue.js 中的计算属性和方法有什么区别？

在 Vue.js 中,计算属性和方法的区别主要在于:

1. 计算属性是基于它们的依赖进行缓存的,方法每次都会重新计算。
2. 计算属性是一个属性,方法是一个函数。

计算属性的基本语法:

js
computed: {
  someComputedProp: function () { /* ... */ }  
}

在模板中使用如下:

html
<p>{{ someComputedProp }}</p>

方法的基本语法:

js
methods: {
  someMethod() { /* ... */ }  
} 

在模板中调用方法:

html
<p>{{ someMethod() }}</p>

示例:

计算属性:

js
computed: {
  firstName: function() {
    return this.fullName.split(' ')[0]
  }
}

方法:

js 
methods: {
  getFirstName() {
    return this.fullName.split(' ')[0] 
  }
}

在模板调用:

html 
<p>{{ firstName }}</p> 
<p>{{ getFirstName() }}</p>

当 fullName 变化时,firstName 会缓存结果并直接返回,getFirstName() 会重新执行方法并返回结果。
计算属性适用于基于其他属性进行计算、并且可缓存的结果,方法更加适合在调用时执行业务逻辑。