Ref is used to create responsive references, and must first give a clear answer: ref is the core function used in the Vue 3 Composition API to create responsive references, suitable for managing responsive state and DOM references; ① Use ref() to make basic type values or objects responsive, and they need to be read and written through .value; ② Automatically unpack in the template without .value; ③ It can be used to obtain DOM elements or child components instances, and access through .value after mounting; ④ Working in conjunction with reactive, computed and other APIs, it is the preferred way to implement responsiveness in setup().
In Vue 3, ref is a function used to create a reactive reference to a value. It's one of the core pieces of Vue's Composition API and helps you make primitive values (like strings, numbers, booleans) or even objects reactive — meaning Vue can track changes to them and update the UI when they change.
Why use ref ?
When you want to make a variable reactive inside a setup() function or a <script setup></script> block, you wrap it in ref() . Without it, changing the variable won't trigger a view update.
import { ref } from 'vue'
const count = ref(0)
count.value = 1 // You must access .value to get/set the value Even though ref is mostly used for primitives, it works with objects too (though reactive() is often preferred for complex objects).
How ref works in templates
One nice thing in Vue 3 is that you don't need .value in templates — Vue automatically unwraps it.
<script setup>
import { ref } from 'vue'
const name = ref('Alice')
const count = ref(0)
function increment() {
count.value
}
</script>
<template>
<p>{{ name }}</p> <!-- No .value needed -->
<p>{{ count }}</p> <!-- Automatically unwrapped -->
<button @click="increment">Add</button>
</template>Refs for DOM access
Another common use of ref is to directly access DOM elements or child components.
<script setup>
import { ref, onMounted } from 'vue'
const inputEl = ref(null)
onMounted(() => {
inputEl.value.focus() // Focus the input when mounted
})
</script>
<template>
<input ref="inputEl" type="text" />
</template> Here, ref("inputEl") binds the actual DOM element to inputEl.value when rendered.
? Note: The ref is
nullbefore the component is mounted.
Key points about ref
- Use
ref()for reactive primitive values . - Always use
.valueinside JavaScript to read or assign. - No need for
.valuein templates — it's auto-unwrapped. - Can be used to access DOM elements or child component instances .
- Works seamlessly with
reactive(),computed, and other Composition API tools.
So, in short:
ref creates a reactive container for a value — essential for reactivity in the Composition API, whether you're managing state or grabbing a reference to an element.
Basically, if you're using setup() and want a variable to be reactive, start with ref() .
The above is the detailed content of What is ref in Vue 3?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to get element node through ref in vue3
May 16, 2023 pm 12:25 PM
Obtaining element node ref through ref can be said to simplify the js native document.getElementById("#id") operation in vue2. Of course, it's the same in vue3. First, give the element you want to get a ref attribute, and then create the ref object to access its value. This can be accessed in the setup, but the value printed directly is null... Since the execution time of the setup function must precede the rendering of the html tag, we cannot initialize the box tag directly in the setup function. In the life cycle function, the setup function is beforeCreat
How to solve the performance warning problem of vue3 using ref
May 13, 2023 pm 03:10 PM
The performance warning problem of vue3 using ref The performance warning code of using ref is as follows import{ref,shallowRef}from"vue";importTodoListfrom"./components/TodoList.vue";importRatefrom"./components/Rate.vue";lettabs={ TodoList,Rate}letcurrentTabComponent=ref(TodoList)warn runtime-core.
What is the reason why ref binding to dom or component fails in vue3 and how to solve it
May 12, 2023 pm 01:28 PM
Vue3ref binding DOM or component failure reason analysis scenario description In Vue3, it is often used to use ref to bind components or DOM elements. Many times, ref is clearly used to bind related components, but ref binding often fails. Examples of ref binding failure situations The vast majority of cases where ref binding fails is that when the ref is bound to the component, the component has not yet been rendered, so the binding fails. Or the component is not rendered at the beginning and the ref is not bound. When the component starts to render, the ref also starts to be bound, but the binding between ref and the component is not completed. At this time, problems will occur when using component-related methods. The component bound to ref uses v-if, or its parent component uses v-if to cause the page to
How to use ref and reactive in Vue3
May 12, 2023 pm 05:34 PM
1. What are ref and reactive? They are the APIs used to implement data responsiveness in Vue3. Generally, ref defines the basic data type, and reactive defines the reference data type. 2. Let’s talk about reactive first. Reactive defines the reference data type (taking objects and arrays as examples). It can declare internal properties or data items of complex data types as responsive data, so the responsiveness of reactive is deep-level. The bottom layer is to implement data responsiveness through ES6's Proxy. Compared with Vue2's Object.defineProperty, it has It can monitor additions and deletions, and changes in object properties. Use reactive to define the number of objects.
How to use ref and reactive to specify types in vue3+ts
May 10, 2023 pm 07:19 PM
The basic characteristics of ref are approximately equal to reactive ({value: })console.log('refa:',refa)//RefImpl{...}console.log('refa:',refa.value)//6console.log('rcta:
How to solve the problem of vue3 getting ref instance combined with ts InstanceType
May 20, 2023 pm 10:59 PM
Vue3 obtains the ref instance and combines it with the InstanceType of ts. Sometimes we have template references, but when using it, the ts prompt does not work. There is no prompt for the method name exposed by the component through defineExpose. Although this does not have a big impact, it can be solved or it can be solved~import {ref}from'vue'constsayHello=()=>(console.log('I can say hello'))defineExpose({sayHello}) Then we use it at the parent level and enter MyModalR
How to use vue3's ref, isRef, toRef, toRefs, and toRaw
May 10, 2023 pm 08:37 PM
1. In addition to obtaining elements, the refref attribute can also use the ref function to create a responsive data. When the data value changes, the view automatically updates. import{ref}from'vue'letstr:string=ref('I am Zhang San')constchang=()=>{str.value='I am Diamond Wang Laowu'console.log(str.value)}{ {str}} Modify value 2. isRef checks whether the variable is an object wrapped by ref, such as
An in-depth explanation of ref in React
Jan 05, 2023 pm 09:13 PM
Through the study of this article, you will gain the basic and advanced usage of React ref, and be able to understand how React handles ref internally. Through a small demo + questions, you will have a deeper understanding of the underlying principles of ref.
