在 vue 中存在函数和计算属性，部分开发人员其实并不清楚函数和计算属性的区别，甚至有些开发人员还认为函数和计算属性在任何情况下都能相互转换。情况真的是这样吗？下面我就来简单的说一下函数和计算属性的区别。
首先我们来看一个例子，在网页中分别使用计算属性和函数实现姓名拼接，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <label>函数拼接出来的结果：</label> <p>{{getFullName()}}</p> <p>{{getFullName()}}</p> <p>{{getFullName()}}</p> <p>{{getFullName()}}</p> <br/> <label>计算属性拼接出来的结果：</label> <p>{{fullName}}</p> <p>{{fullName}}</p> <p>{{fullName}}</p> <p>{{fullName}}</p> </div> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ data() { return { firstName: '张', lastName: '三', } }, methods: { getFullName() { console.log("----getFullName()----") return this.firstName + this.lastName; } }, computed:{ fullName(){ console.log("----fullName()----") return this.firstName + this.lastName; } } }).mount("#app") </script> </body> </html>
我们运行代码通过控制台可以看到类似于如下的输出：
getFullName 输出了四次，fullName 只输出了一次。一定有同学要问了，页面上都是输出了四次为什么计算属性 fullName 没有输出四次呢？这是因为计算属性是基于它们的依赖进行缓存的（这里的依赖就是 firstName 和 lastName），只在相关依赖发生改变时它们才会重新求值。在依赖值不变的情况下我们多次访问计算属性，返回的永远是缓存的结果。所以，当我们要在页面上进行大量耗时的运算的时候最好使用计算属性。