草庐IT

最新,Vue 改进了响应式 API 中 Getter 的用法!

GZ 2023-04-04 原文

近日,Vue 改进了响应式 API 中 getter 的用法,主要包括:

  • 一个用于将不同来源(value / ref / getter)规范化为值的 API(通过引入 toValue())
  • 一个用于将不同来源(value / ref / getter)规范化为引用的 API(通过增强 toRef())
  • 引入 MaybeRef<T> 和 MaybeRefOrGetter<T> 类型

通常需要将状态传递到组合式函数中并保持响应性。在大多数情况下,这意味着要将响应源转换为 ref:

import { toRef } from 'vue'

const props = defineProps(/* ... */)

useFeature(toRef(props, 'foo'))

目前,toRef 仅用于从对象中“提取”单个属性。这就有点不灵活,例如,如果想将嵌套属性转换为 ref:

useFeature(toRef(props.foo, 'bar'))

上面的代码有两个问题:

  • 调用 toRef 时 props.foo 可能不存在
  • 如果 props.foo 被交换到不同的对象,这将无法处理这种情况。

为了解决这个问题,可以使用 computed:

useFeature(computed(() => props.foo?.bar))

但是,在这里使用 computed​ 并不是最佳选择。在内部,computed​ 创建一个单独的 effect​ 来缓存计算值。当 getter 只访问属性而不执行任何昂贵的计算时,这实际上是很大的开销。

将非引用响应状态传递到组合式函数的成本最低的方法就是用 getter​ 包装它(或“thunking”——即延迟实际值的访问,直到调用 getter):

useFeature(() => props.foo?.bar)

VueUse 已经广泛支持这种模式,这也有点类似于在 Solid 中看到的函数式 signals(信号)。

此外,这种模式在使用响应式 props 解构时会很常用:

const { foo } = defineProps<{ foo: string }>()

useFeature(() => foo)

引入 toValue()

在组合式函数中,其参数可以接受值或引用。这可以表示为:

type MaybeRef<T> = T | Ref<T>

为了也支持 getters,接受的类型将是:

type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)

目前提供的unref​将 MaybeRef<T>​ 规范化为 T​。但是,不能让 unref​ 也解包 getter​,因为这将是一个破坏性的变化。可以在函数值上调用 unref 并期望返回该函数。这种情况比较少见,但仍然是无法破解的可能情况。

因此,引入一个新方法,toValue():

export function toValue<T>(source: MaybeRefOrGetter<T>): T {
return isFunction(source) ? source() : unref(source)
}

这就相当于 VueUse 的 [resolveUnref()](https://vueuse.org/shared/resolveUnref/)​。这里将其命名为 toValue()​ 是因为它与 toRef() 相反:两者代表两个不同的规范化方向:

ref <- toRef() - ref/value/getter - toValue() -> value

增强 toRef()

当然也可能存在需要 ref​ 的情况——不能传递 getter​。对于这种情况,仍然可以使用 computed​。但如前所述,computed​ 对于只访问属性的简单 getter 来说是一种矫枉过正。

可以向 toRef()​ 添加新的重载,以便它现在可以接受 getters :

const ref = toRef(() => 123)
ref.value // 123

以这种方式创建的 ref​ 是只读的,只是在每次访问 .value​ 时调用 getter。

toRef() 现在应该被视为“将 value / ref / getter 规范化为 refs” 的 API:

// value -> Ref
toRef(1) // Ref<number>

// Ref -> Ref
toRef(ref(1)) // Ref<number>

// getter -> Ref
toRef(() => 1) // Ref<number>

这就相当于 VueUse 的 [resolveRef()](https://vueuse.org/shared/resolveRef/)。

现在仍然支持旧的 toRef(object, 'key')​ 用法,但应该首选更灵活的 getter 语法:

toRef(() => object.key)

向后移植到 v2.7?

将这些功能添加在 v3.3 和 v2.7 之间造成了差异——虽然理论上不再回向 v2.7 添加新的功能,但这些可能值得向后移植以确保 vue-demi​ 和依赖于 vue-demi 的 VueUse 的行为一致性。

如果向后移植到 2.7,VueUse 也可以用 toRef​ 和 toValue​ 来替换 resolveRef​ 和 resolveUnref。

参考:https://github.com/vuejs/core/pull/7997

有关最新,Vue 改进了响应式 API 中 Getter 的用法!的更多相关文章

  1. ruby-on-rails - 每次我尝试部署时,我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手,我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目,而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  2. ruby-on-rails - ActionController::RoutingError: 未初始化常量 Api::V1::ApiController - 2

    我有用于控制用户任务的Rails5API项目,我有以下错误,但并非总是针对相同的Controller和路由。ActionController::RoutingError:uninitializedconstantApi::V1::ApiController我向您描述了一些我的项目,以更详细地解释错误。应用结构路线scopemodule:'api'donamespace:v1do#=>Loginroutesscopemodule:'login'domatch'login',to:'sessions#login',as:'login',via::postend#=>Teamroutessc

  3. 报告回顾丨模型进化狂飙,DetectGPT能否识别最新模型生成结果? - 2

    导读语言模型给我们的生产生活带来了极大便利,但同时不少人也利用他们从事作弊工作。如何规避这些难辨真伪的文字所产生的负面影响也成为一大难题。在3月9日智源Live第33期活动「DetectGPT:判断文本是否为机器生成的工具」中,主讲人Eric为我们讲解了DetectGPT工作背后的思路——一种基于概率曲率检测的用于检测模型生成文本的工具,它可以帮助我们更好地分辨文章的来源和可信度,对保护信息真实、防止欺诈等方面具有重要意义。本次报告主要围绕其功能,实现和效果等展开。(文末点击“阅读原文”,查看活动回放。)Ericmitchell斯坦福大学计算机系四年级博士生,由ChelseaFinn和Chri

  4. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  5. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例,我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  6. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  7. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求,但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  8. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API,它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController,并且我已经阅读了几个HTTParty指南,直到我想要什么,但也许我只是有点迷路,真的不知道该怎么做。基本上,我需要做的就是调用API,获取它返回的URL,然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码? 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  9. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成? - 2

    在我做的一些网络开发中,我有多个操作开始,比如对外部API的GET请求,我希望它们同时开始,因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中,该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码,其中FirstAsyncWorker和SecondAsyncWorker是我编写的类,我在其中混合了Concurrent::Async模块,并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  10. ruby-on-rails - 是否使用 API - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我的公司有一个巨大的数据库,该数据库接收来自多个来源的(许多)事件,用于监控和报告目的。到目前为止,数据中的每个新仪表板或图形都是一个新的Rails应用程序,在巨大的数据库中有额外的表,并且可以完全访问数据库内容。最近,有一个想法让外部(不是我们公司,而是姊妹公司)客户访问我们的数据,并且决定我们应该公开一个只读的RESTfulAPI来查询我们的数据。我的观点是-我们是否也应该为我们的自己

随机推荐