Introduction to reactive function toRef function ref function in Vue3

Introduction to reactive function toRef function ref function in Vue3

Reactive Function

reactive is used to define responsive data (which can be understood as a substitute for data)

usage:

import { reactive } from 'vue'

use:

const state = reactive({
    parameter name: parameter value})

Access: state.parameter name

Access: state.parameter name

toRef function (just understand it)

toRef: Extract a field from the responsive data into a separate responsive data

usage:

import import { toRef } from 'vue'

use:

const state = reactive({
    num:0
})
const num=toRef(state(responsive data),'num attribute name')
num:{
    value:0
}
Ref can actually be understood as a data type: {value: value}

Access: num.value===0

Note:

HTML: You don't need to write value when using responsive data

Value must be written in js

ref function

Defining Responsive Data

{
    value:value}

Direct definition using

import import {ref} from 'vue'
setup(){
Define const num = ref({a:1,b:2})  
    num:{
       value:{a:1,b:2}
    }
}

Access: num.value===0

reactive: Applicable to multiple data, ref is applicable to single data

Get DOM

<template>
  <div ref="target">123</div>
</template>
scripte
import {ref} from 'vue'
setup(){
   const target = ref(null)   
   return {target} 
   target.value is the corresponding DOM   
}

Get component instance object

ref is used for native tags to get dom

ref is used for component tags to obtain component instance objects

The usage is the same as getting DOM

<template>
  <component tag ref="target">123</component tag>
</template>
script
import {ref} from 'vue'
setup(){
   const target = ref(null)   
   return {target} 
   target.value is the component instance object}

The above is the detailed content of the introduction of the reactive function toRef function ref function in Vue3. For more information about Vue3 functions, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Reactive function declaration array method in Vue3
  • In-depth understanding of reactive in Vue3
  • Do you know ref, computed, reactive and toRefs of Vue3?
  • setup+ref+reactive implements vue3 responsiveness
  • Detailed analysis of the difference between Ref and Reactive in Vue3.0
  • Solution to reactive not being able to assign values ​​directly in Vue3

<<:  Differentiate between null value and empty character ('') in MySQL

>>:  Linux directory switching implementation code example

Recommend

Detailed explanation of script debugging mechanism in bash

Run the script in debug mode You can run the enti...

Solution to the error in compiling LVGL emulator on Linux

Table of contents 1. Error phenomenon 2. Error An...

MySQL database optimization: index implementation principle and usage analysis

This article uses examples to illustrate the prin...

HTML table markup tutorial (22): row border color attribute BORDERCOLORLIGHT

Within rows, light border colors can be defined i...

Detailed explanation of mixed inheritance in Vue

Table of contents The effect of mixed inheritance...

A case study on MySQL optimization

1. Background A sql-killer process is set up on e...

Some methods to optimize query speed when MySQL processes massive data

In the actual projects I participated in, I found...

10 skills that make front-end developers worth millions

The skills that front-end developers need to mast...

How much data can be stored in a MySQL table?

Programmers must deal with MySQL a lot, and it ca...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

Serial and parallel operations in JavaScript

Table of contents 1. Introduction 2. es5 method 3...

How to check the hard disk size and mount the hard disk in Linux

There are two types of hard disks in Linux: mount...

Vue + OpenLayers Quick Start Tutorial

Openlayers is a modular, high-performance and fea...

How to use Nginx to realize the coexistence of multiple containers in the server

background There is a Tencent Linux cloud host, o...