Vue 计算属性与普通的函数有什么区别？

计算属性的优势

计算属性的作用是计算复杂的逻辑，并返回一个结果，提供给模板多次使用；只要依赖的响应式数据没有改变，计算属性就不会重新执行，而是直接返回它存储的缓存。所以，节省不必要的开销。

模板语法的模板取值可以在里面进行运算，但是终究不适合做过于复杂的运算，模板取值就应该做它本质的工作：

<div>{{ simpleValue }}</div>
<div>{{ simpleValue - 10 * 100 + 100 }}</div>

像下面这样复杂的逻辑计算，而页面当中又多次使用的就一定要使用计算属性。格式化 JSON 字符串的代码：

function formatJson(json) {
  json = json.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    var cls = "number";
    if (/^"/.test(match)) {
      if (/:$/.test(match)) {
        cls = "key";
      } else {
        cls = "string";
      }
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return '<span class="' + cls + '">' + match + "</span>";
  });
}

使用计算属性

import json from "./data.json";

const jsonData = ref(JSON.stringify(json, null, 2));
const formattedJson = computed(() => {
  console.log("computed!");
  formatJson(jsonData.value);
});

v-html使用三次formattedJson计算属性计算的结果：

<div v-html="formattedJson"></div>
<div v-html="formattedJson"></div>
<div v-html="formattedJson"></div>

最终控制台结只打印了一次，在没有改变响应式数据jsonData，计算属性就不会重新执行内部代码：

比较普通函数

普通的函数也能替代计算属性做的事情，唯一的区别就是，普通函数每在模板里面使用一次就计算一次代码，这可能加大开销，降低性能，它不可以缓存。

<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>

控制台打印了三次，说明普通函数被调用三次：

总结

在逻辑复杂，页面上多次使用的代码，考虑使用计算属性。计算属性能够保存第一次计算的缓存，除非依赖的响应式数据发生了改变，不管调用多少次都返回上一次的缓存结果。计算属性能够减少我们的开销，提升性能。而普通的函数就完全不具备这些特点。

推荐下一篇文章：Vue 监听器和计算属性到底有什么不同？。