当前位置：首页 > 科技 > 软件

Vue3 新玩法！我能操控计算属性 Computed！

来源：责编：时间：2024-05-27 08:52:59 80观看

导读背景最近在做一个需求的时候，用到了一个 Vue3 内置的 API，发现真的非常实用，分享给大家。需求是这样的，我有一个变量 sum，是通过computed去计算的，且 sum 依赖的变量有的是响应式的，有的不是响应式的，所以会造成以下的后果，当

背景

最近在做一个需求的时候，用到了一个 Vue3 内置的 API，发现真的非常实用，分享给大家。

需求是这样的，我有一个变量 sum，是通过computed去计算的，且 sum 依赖的变量有的是响应式的，有的不是响应式的，所以会造成以下的后果，当非响应式变量改变时，并不会触发sum 的响应式更新，只有响应式变量改变时才会触发sum的响应式更新。

图片

所以我需要用到一个 Vue3 的内置 API，它就是customRef。

customRef

创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

类型

图片

详细信息

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

实践小案例：防抖 Ref

创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：

图片

在组件中使用：

图片

可控的 computed

图片

再回到一开始的话题，我遇到的问题是：当非响应式变量改变时，并不会触发sum 的响应式更新，只有响应式变量改变时才会触发sum的响应式更新。

所以我们需要当非响应式变量count1、count2改变的时候，去手动触发 computed 的计算，这样才能更新 sum，但是 computed 返回的不是一个函数啊，我们要怎么去手动触发计算呢？

所以这时候就需要一个可控的 computed，它拥有以下功能：

1、能根据响应式变量去自动触发计算更新

2、提供一个方法让用户手动去调用触发更新

期望使用方式是这样的：

图片

具体的代码实现如下：

图片

本文链接：http://www.28at.com/showinfo-26-90851-0.htmlVue3 新玩法！我能操控计算属性 Computed！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：智启未来、共创锡望 —— 巴可 (Barco) 无锡开业典礼盛大举行

下一篇：再探泛型 API，感受 Python 对象的设计哲学

标签：

热门焦点

直屏旗舰来了 iQOO 12和K70 Pro同台竞技

旗舰机基本上使用的都是双曲面屏幕，这就让很多喜欢直屏的爱好者在苦等一款直屏旗舰，这次，你们等到了。据博主数码闲聊站带来的最新爆料称，Redmi下代旗舰K70 Pro和iQOO 12两款手
6月iOS设备好评榜：第一蝉联榜首近一年

作为安兔兔各种榜单里变化最小的那个，2023年6月的iOS好评榜和上个月相比没有任何排名上的变化，仅仅是部分设备好评率的下降，长年累月的用户评价和逐渐退出市场的老款机器让这
8月总票房已突破10亿！《封神》第一：口碑已经成了

8月5日消息，据灯塔专业版数据，截至8月5日9时35分，8月总票房（含预售）已突破10亿。其中，《封神》以大比分的优势领先。根据官方消息，目前该片总票房已经超过14.
三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
从零到英雄：高并发与性能优化的神奇之旅

作者 | 波哥审校 | 重楼作为公司的架构师或者程序员，你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢？笔者在出道那会为此是吃尽了苦头的，不过也得
Temu起诉SHEIN，跨境电商战事升级

来源 | 伯虎财经（bohuFN）作者 | 陈平安日前据外媒报道，拼多多旗下跨境电商平台Temu正对竞争对手SHEIN提起新诉讼，诉状称Shein“利用市场支配力量强迫服装厂商与之签订独家
iQOO Neo8系列新品发布会

旗舰双芯更强更Pro
Android 14发布：首批适配机型公布

5月11日消息，谷歌在今天凌晨举行了I/O大会，本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机，同时发布了Androi
DRAM存储器10月价格下跌，NAND闪存本月价格与上月持平

10月30日，据韩国媒体消息，自今年年初以来一直在上涨的 DRAM 存储器的交易价格仅在本月就下跌了近 10％，此次是全年首次降价，而NAND 闪存本月价格与上月持平。市