Vue3 学习笔记,如何理解 Computed 计算属性
创始人
2025-07-08 14:11:47
0

大家好,本篇文章我们继续学习和 Vue 相关的内容,今天我们归纳总结下什么是 computed 计算属性、如何使用和应用场景,以及 computed 和 Method 事件的区别和应用场景。

什么是 computed 计算属性

Vue.js 中的 computed 计算属性是一种特殊类型的属性,它们的值不是简单地被设置,而是根据其它属性的值计算得出。

computed 计算属性是基于它们的依赖进行缓存的,这意味着只有在它们的依赖发生变化时,才会重新计算。这使得它们更高效,因为它们只在需要时才会计算,而不是每次都调用。

下面是一个示例,展示了如何使用 computed 计算属性:



在这个例子中,当 firstName 或 lastName 发生变化时,fullName 会自动重新计算。

computed 和 method 事件的区别

与 computed 计算属性不同的是,methods 方法是每次都会调用的,不能进行缓存。如果你需要在每次渲染时都计算一个值,那么使用 methods 方法会更好。

下面是一个使用 methods 方法的示例:



在这个例子中,每次渲染时都会调用 getFullName 方法,而不是缓存其结果。

总结一下

适用 computed 计算属性的场景是:

  • 适合一些简单的操作,比如数组排序或筛选
  • 计算属性可以直接在HTML中使用,像 Data 中的属性一样使用。
  • 当你需要基于其它属性计算一个新的值。
  • 当你需要缓存计算结果,因为这样能提高应用的性能。

适用 methods 方法的场景是:

  • 当你需要在每次渲染时都计算一个值。
  • 当你需要执行一些复杂的逻辑或者需要调用外部函数。
  • 方法通常作为事件监听或公共业务逻辑
  • 方法可以当做普通 JS 函数使用

另外,计算属性是可以被观察的,可以被用在指令和计算属性依赖中。而 method 方法不能被观察到,不能用在指令和计算属性依赖中。

再举一个例子:



在这个例子中,discountedPrice 是基于 price 和 discount 计算得出的,并且当 price 或 discount 发生变化时,discountedPrice 会自动重新计算。 而如果用 method 实现的话,每次都会计算一遍,而不是只在需要时计算。

总之,computed 计算属性是一种高效的方式,能够基于其它属性进行计算并缓存结果,而 methods 方法则是每次都会调用并进行计算。

结束

今天的内容就介绍到这里,内容比较简单,希望对你有所帮助。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...