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

  • Vue 计算属性与普通的函数有什么区别?已关闭评论
  • 26 次浏览
  • A+
所属分类:Web前端
摘要

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


计算属性的优势

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

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

<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,计算属性就不会重新执行内部代码:

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

比较普通函数

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

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

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

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

总结

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

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