文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3 学习笔记,如何理解 Computed 计算属性

2024-11-30 04:21

关注

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

什么是 computed 计算属性

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

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

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



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

computed 和 method 事件的区别

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

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



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

总结一下

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

适用 methods 方法的场景是:

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

再举一个例子:



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

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

结束

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

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯