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!