计算属性的优势

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

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

<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 监听器和计算属性到底有什么不同？。