vue计算属性computed使用注意事项(有缓存)

已于 2022-05-15 22:04:23 修改
阅读量1.4k 收藏 1
点赞数
文章标签： vue.js
于 2022-05-14 21:27:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67805754/article/details/124774429
版权

当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：

(1)计算属性

(2)函数

应该如何选择？

(1)methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。

(2)computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。

(3)计算属性会做缓存，提高渲染的性能。

结论:

  • 计算属性有缓存，提高渲染性能。
  • 如果在页面上需要用到 对现有的数据进行加工得到新数据，则时要使用计算属性
  • 想要给计算属性赋值, 则需要使用set方法

注意事项:计算属性和data一样,都需要设置return,当没有输出结果时,需要排查是不是return漏掉了

m0_67805754
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
computed vue 不 触发_Vue 的计算属性如何实现缓存？（原理深入揭秘）
weixin_36365168的博客
12-30 1113
前言很多人提起 Vue 中的 computed，第一反应就是计算属性会缓存，那么它到底是怎么缓存的呢？缓存的到底是什么，什么时候缓存会失效，相信还是有很多人对此很模糊。本文以 Vue 2.6.11 版本为基础，就深入原理，带你来看看所谓的缓存到底是什么样的。注意本文假定你对 Vue 响应式原理已经有了基础的了解，如果对于 Watcher、Dep和什么是 渲染watcher 等概念还不是很...
vue计算属性computed笔记
TiAmo_Lyj的博客
02-16 147
computed两个重要函数 getter:默认只有getter函数，代码定义如下 computed: { saleRatio: function () { return ((this.totalSale - this.afterTotalSale) / this.totalSale) * 100 } } saleRatio既计算属性定义的值，只要他依赖的...
vue中computed缓存问题
huqiang1995的博客
06-28 1008
【代码】vue中computed缓存问题。
vue2+ant design vue 项目开发小坑(一)——computed属性不生效
cy1502的博客
03-18 3057
写在前面： 按照标题内容搜，只能搜到计算属性和watch监听的原理，因为他压根就是生效了！但是有点小瑕疵~ 核心代码是这样的： data ({ return { projectInfo: {}, form: this.$form.createForm(this, { onValuesChange: (props, values) =>{if (values ==this.testInfo) returnobject.assign(this.testInfo, value
Vue 的 Computed 实现原理详解
最新发布
My_wife_QBL的博客
07-06 754
Computed 属性是 Vue 实例中的一个特殊属性，它允许开发者定义一个计算值，该值依赖于其他响应式数据。响应式：当依赖的数据发生变化时，computed 属性会自动重新计算。缓存：computed 属性会缓存计算结果，只有当依赖的数据发生变化时，才会重新计算。惰性求值：computed 属性在首次访问时才会进行计算，之后会根据依赖数据的变化情况决定是否重新计算。Vue 的 computed 属性通过依赖追踪和缓存策略，实现了响应式计算和性能优化。
vue3 路由缓存问题（三种方法）
团酱
08-17 4766
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
Vue相关（一）
春色常昭志士 才华乐奉勤人
10-11 467
山间涓流 岂能与无量之海争辉
一文解决Vue中的计算属性和监听属性
zag666的博客
08-14 1138
计算属性 计算属性：要用的属性不存在，要通过已有属性计算得来。 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 1.插值语法实现 <body> <!-- 准备好一个容器--> <div id="root"> 姓：<input type="text" v-model="firstName"> <br/><br/> 名：<input type="text" v-model=
vue计算属性computed的使用方法示例
10-17
使用计算属性的注意事项： - 计算属性的计算过程由Vue管理，开发者无需手动触发更新。 - 计算属性只会在相关依赖改变时重新计算，这节省了不必要的计算资源。 - 如果计算属性只读，可以不提供`set`方法。 - 计算属性...
关闭Vue计算属性自带的缓存功能方法
08-27
需要注意的是，禁用缓存可能会导致性能下降，因为即使依赖没有改变，Vue也会重新计算属性的值。因此，除非有明确的需要实时更新的需求，否则一般不建议关闭计算属性的缓存。在大多数场景下，Vue的默认缓存策略已经...
vue计算属性computed、事件、监听器watch的使用讲解
10-17
计算属性有两种写法，一种是只有getter的简写形式，另一种是包含getter和setter的标准形式。计算属性默认只有getter，它会返回一个值，你可以基于Vue的响应式系统自动追踪依赖并在依赖项改变时更新。 ### 监听器...
Vue computed计算属性的使用方法
08-29
Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与...
Vue的Computed计算属性的使用
xiaozhuzhuyang的博客
03-12 466
Vue的Computed计算属性的使用 computed和methods类似 computed只能调用一次，methods可以调用多次，computed如果没有改变就会存在缓存中如果computed中的方法有所改变则重新计算 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> &l
vue---十分钟搞懂vue计算属性
qq_61950936的博客
08-16 4028
计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！......
Vue 的计算属性如何实现缓存？
BigChicken3的博客
10-18 441
前言 很多人提起 Vue 中的 computed，第一反应就是计算属性会缓存，那么它到底是怎么缓存的呢？缓存的到底是什么，什么时候缓存会失效，相信还是有很多人对此很模糊。 本文以 Vue 2.6.11 版本为基础，就深入原理，带你来看看所谓的缓存到底是什么样的。 注意 本文假定你对 Vue 响应式原理已经有了基础的了解，如果对于 Watcher、Dep和什么是 渲染watcher 等概念还不是很熟悉的话，可以先找一些基础的响应式原理的文章或者教程看一下。视频教程的话推荐黄轶老师的，如果想要看简...
VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的
Rocky balboa
10-17 2458
今天在做项目的时候，发现重新打开页面，传给子组件的值，会被监听到，但是在打开页面之后，再做操作就会发现监听不到里面的值。后来把值的监听放到watch方法中，终于监听到了。VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的。VUE中的mounted和created在页面加载过程只执行一次，computed和watch是用来监听值发生变化的。后来去官网进行查询，重新熟悉了一下VUE的生命周期。
Vue基础——computed属性
qq_51220629的博客
04-13 395
为了解决在模板中写过多的逻辑，让模板变得臃肿，难以维护。因此Vue推荐使用computed属性来解决描述依赖响应式状态的复杂逻辑。
Vue：使用数组遍历生成dom结构，怎么过滤掉一些不想要显示的记录--计算属性computed
weixin_41870211的博客
12-08 1098
Vue使用数组遍历生成dom解构，使用数组中的元素控制页面渲染失败 问题分析
computed计算属性
sl105105的博客
09-08 993
vue的计算属性 computed有缓存数据的效果,,利于减少性能的消耗,但是当真实数据(data)发生改变,计算属性才会更新。+ 计算属性的缓存是指在依赖变量未发生变换时，当前vue容器中多次使用不会重新执行方法，而是读取计算后的缓存结果。3. 通过计算属性的双向操作功能语法，可以将页面具有双向功能但逻辑不同的操作模拟成普通属性的双向功能。1. 可以将页面的相关复杂执行逻辑定义于计算中，页面以属性调用的方式简化模板语法的定义。
vue中computed计算属性的使用案例
05-30
computed计算属性是在Vue.js中非常常用的一个功能，它可以根据已有的数据计算出新的数据，然后通过模板渲染到页面上。 下面是一个Vue组件中使用computed计算属性的例子： ``` <template> <div> <p>商品名：{{ product.name }}</p> <p>商品价格：{{ product.price }}</p> <p>商品税价：{{ taxPrice }}</p> </div> </template> <script> export default { data() { return { product: { name: "苹果", price: 10, taxRate: 0.1 } }; }, computed: { taxPrice() { return this.product.price * this.product.taxRate; } } }; </script> ``` 在这个例子中，我们定义了一个商品对象，包含商品名、价格和税率。然后我们通过computed计算属性来计算商品的税价，最后在页面上渲染出来。 computed计算属性的好处是它们具有缓存性，也就是说，只要依赖的数据没有发生变化，computed计算属性就不会重新计算。这样可以避免不必要的计算，提高应用的性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值