Vue基础教程（59）使用计算属性：Vue计算属性：摸鱼神器还是防秃指南？用对了代码量直接减半！-优快云博客

嘿，各位Vue萌新和正在渡劫的老鸟们！今天咱们不聊风花雪月，来唠一个能让你代码水平瞬间提升50%的玩意儿——计算属性。

你有没有过这种经历：在模板里写了个表达式，长得能绕地球半圈，自己看了都想吐？

<p>{
  
  { user.firstName + ' ' + user.lastName + ' (' + user.nickname + ')' }}</p>

或者，你在methods里定义了一个方法，用来反转一个数组，然后在模板里调用它：

<ul>
  <li v-for="item in reverseItems()">{
  
  { item.name }}</li>
</ul>

methods: {
  reverseItems() {
    console.log('方法被调用了！'); // 偷偷埋个日志
    return [...this.items].reverse();
  }
}

然后你惊恐地发现，页面上但凡有个数据变动（比如你随便改了某个不相关的数据），这console.log就像机关枪一样“哒哒哒”地疯狂输出！这是因为methods里的函数在每次渲染时都会重新执行。

别慌！你的救星——计算属性（Computed Properties）驾着七彩祥云来了！

官方解释：计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时它们才会重新求值。

我的人话翻译：它就像一个自带缓存功能的智能变量。

你告诉它：“小计啊，你看好data里的A和B这两个数，只要它俩没变，你就直接用上次算好的结果，别动弹。等它俩谁变了，你再麻溜儿地给我重新算一遍！”

这意味着什么？极致的高效！ 避免了不必要的计算，尤其是在处理复杂逻辑时，这性能提升可不是一星半点。

Vue基础教程（59）使用计算属性：Vue计算属性：摸鱼神器还是防秃指南？用对了代码量直接减半！