text
This article is a translated article, and some of the contents are inevitably biased. If there are any errors, you are welcome to correct them. The original link is available at the end of the article.
When using a combination, sometimes you already have one you want to useref, and sometimes you don't. This article will introduce a pattern that allows you to use combinations in two ways, providing more flexibility when writing applications.
This article is the second article in this series, and all covers the following contents:
- 1. How to make your combination more configurable through option object parameters;
- 2. Use ref and unref to make our parameters more flexible; 👈Theme of this article
- 3. How to make your return value more useful;
- 4. Why can you make your combinatorial functions more powerful by starting from the interface definition?
- 5. How to use asynchronous code without "waiting" - making your code easier to understand;
Use ref and unref to achieve more flexible parameter passing
Typically, a combination API requires certain types of parameters as input, and responsive variable parameters are usually used. It can also be of a primitive Javascript type, such as a string, a number, or an object. However, to make the combination more flexible and reusable, we would expect it to accept any type of parameters and convert it to the desired type at runtime.
// Works if we give it a ref we already have const countRef = ref(2); useCount(countRef); // Also works if we give it just a number const countRef = useCount(2);
What we mentioned in the previous articleuseTitleThis mode is also applicable. When we pass in arefWhen the page title will be set to thisrefofvalue。
const title = ref('Here is the title');
useTitle(title);
= 'This is a new title';If we pass in a string variable, it will create a new ref to associate it with the title:
const title = useTitle('Here is the title');
= 'This is a new title';The above examples may not seem very different, but when we use some methods or combination APIs, we may have different sources of reference, so this combination can adapt to different situations.
Let's take a look at how to use this pattern in our combo.
Implement flexible parameters in combination
To implement flexible parameter mode, we need to userefandunrefThe method is on the parameters.
// When we need to use a ref in the composable
export default useMyComposable(input) {
const ref = ref(input);
}
// When we need to use a raw value in the composable
export default useMyComposable(input) {
const rawValue = unref(input);
}If it is a non-responsive parameter variable,refThe method will create a new onerefGive us the variable; if it is a responsive form, it will directly return the corresponding variable to us.
// Create a new ref const myRef = ref(0); // Get the same ref back assert(myRef === ref(myRef));
unrefThe method is similar, except that it returns the true value of the variable to us
// Unwrap to get the inner value const value = unref(myRef); // Returns the same primitive value assert(value === unref(value));
Let's see belowVueUseExamples of using this pattern.
Example - useTitle
Let's continue to look at what we are already familiar withuseTitlemethod. It allows us to pass in a string or responsive string variable:
// Pass in string variableconst titleRef = useTitle('Initial title');
// Pass in responsive string variableconst titleRef = ref('Initial title');
useTitle(titleRef);In itSource codeIn, we can see that it passesrefMethods to process the variables we pass in
// ... const title = ref(newTitle ?? document?.title ?? null) // ...
It uses JavaScriptnullish coalescing operator, its syntax is "??", which means "if the value on the left isnullorundefined, then the value on the right is used. In the code, ifnewTitleUndefined, use,ifAlso undefined, usenull. This operator can be used to simplify the conditional judgment in the code.
in addition,useTitleThe MaybeRef type in TypeScript is also used in the type definition, which can bestringType orRef<string>type. inRef<T>It's a withTType valueref。
type MaybeRef<T> = T | Ref<T>
For example - useCssVar
useCssVarAllows us to get the value of the CSS variable and use it in the application. anduseTitleThe difference is that we need to pass in a string value to query the corresponding CSS variables on the DOM. passunrefMethod to process the passed variables -stringType or oneref：
// Using a string
const backgroundColor = useCssVar('--background-color');
// Using a ref
const cssVarRef = ref('--background-color');
const backgroundColor = useCssVar(cssVarRef);By viewing itSource code, we can see that it is usedunRefMethod to process incoming parameters. Moreover, it also uses a helper functionunrefElement, used to ensure that the acquisition isDOMElements instead ofVueExample.
existVueUseMany combination methods in this model are used. If you want to conduct in-depth research, choose a person who is interested and read its source code.
summary
In this article, we mainly introduce the second pattern of composables in the article. This mode usesrefandunrefFunctions are used to more flexibly, allowing composite functions to adapt to different usage situations.
It also introduces how the VueUse library implements this pattern, and gives examples of how useTitle and useCssVar comboable functions use ref and unref functions.
In the next article, we will introduce another pattern that returns a single value or object as needed, making composite functions easier to use. This pattern can make composite functions simpler and easier to use, especially in most cases where only a single value is required.
Original link:# Coding Better Composables (2/5)
The above is the detailed content of the use of the Vue3 composite function Composable practical ref and unref. For more information about the Vue3 composite function ref unref, please follow my other related articles!