Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(reactivity): new function toShallowRef #8530

Open
wants to merge 11 commits into
base: minor
Choose a base branch
from

Conversation

Alfred-Skyblue
Copy link
Member

The toShallowRef function is used to convert a given value into a shallow reference.

The function accepts various types of values as input, including functions, Ref objects, and regular values. Depending on the type of the input value, the function performs the appropriate conversion:

  • If the input value is a function, it is converted into a Readonly<Ref<T>> object, which represents a read-only reference to the value returned by the function.
  • If the input value is a Ref object, it is converted into a Ref<T> object, preserving its reactivity.
  • If the input value is a regular value, it is converted into a ShallowRef<T> object, which provides shallow reactivity to the value.

By using toShallowRef, developers can easily create shallow reference objects that can be used in reactive contexts, such as Vue.js components, to automatically update relevant views when the value changes.

example:

import { toShallowRef } from 'vue'
const msg = ref('Hello World')
const a = toShallowRef(0) // ShallowRef<number>
const b = toShallowRef(msg) // Ref<string>
const c = toShallowRef(() => 'hi') // DeepReadonly<Ref<string>>

RFC

@github-actions
Copy link

github-actions bot commented Aug 21, 2023

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 99 kB (+80 B) 37.5 kB (+39 B) 33.8 kB (+37 B)
vue.global.prod.js 157 kB (+80 B) 57.3 kB (+33 B) 51 kB (+13 B)

Usages

Name Size Gzip Brotli
createApp 54.2 kB 21 kB 19.1 kB
createSSRApp 58.1 kB 22.6 kB 20.6 kB
defineCustomElement 58.8 kB 22.5 kB 20.5 kB
overall 67.8 kB 26 kB 23.7 kB

@sxzz sxzz added the ready for review This PR requires more reviews label Aug 21, 2023
@sxzz sxzz added ready to merge The PR is ready to be merged. and removed ready for review This PR requires more reviews labels Aug 23, 2023
@skirtles-code
Copy link
Contributor

It isn't clear to me that this should be using DeepReadonly when a function is passed. I think it should be similar to toRef() and computed(), with Readonly instead. I've discussed this in more detail in #8464.

There's an alternative implementation of toShallowRef() in #9372. That PR takes a different approach to some of the edge cases, e.g. when an existing ref is passed in that isn't a shallowRef(). I think it might be useful for the RFC to discuss some of the alternative options in the edge cases and to explain the rationale behind the choices that were made.

@Alfred-Skyblue
Copy link
Member Author

@skirtles-code The contentious part is currently being handled in a manner similar to toRef, and it has been updated.

@undergroundwires
Copy link

undergroundwires commented Nov 11, 2023

This implementation lacks following signatures:

export declare function toRef<T extends object, K extends keyof T>(object: T, key: K): ToRef<T[K]>;
export declare function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue: T[K]): ToRef<Exclude<T[K], undefined>>;

Added on comment on RFC, and mentioning here as well, this API should allow all usages of toRef including multiple parameters.

Ability to do toShallowRef(props, 'propName') communicates the intent and expected behavior much better, see vuejs/rfcs#506 (comment).

@Alfred-Skyblue Alfred-Skyblue changed the base branch from main to minor November 29, 2023 04:37
Copy link

pkg-pr-new bot commented Oct 21, 2024

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@8530

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@8530

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@8530

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@8530

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@8530

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@8530

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@8530

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@8530

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@8530

vue

pnpm add https://pkg.pr.new/vue@8530

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@8530

commit: 59e7216

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready to merge The PR is ready to be merged. version: minor
Projects
Status: Needs Review
Development

Successfully merging this pull request may close these issues.

7 participants