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

Semanticization of HTML tags (including H5)

introduce HTML provides the contextual structure ...

SQL left join and right join principle and example analysis

There are two tables, and the records in table A ...

How to prevent Vue from flashing in small projects

Summary HTML: element plus v-cloak CSS: [v-cloak]...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...

MySQL Constraints Super Detailed Explanation

Table of contents MySQL Constraint Operations 1. ...

Rendering Function & JSX Details

Table of contents 1. Basics 2. Nodes, trees, and ...

How to configure pseudo-static and client-adaptive Nginx

The backend uses the thinkphp3.2.3 framework. If ...

Vue.set() and this.$set() usage and difference

When we use Vue for development, we may encounter...

6 inheritance methods of JS advanced ES6

Table of contents 1. Prototype chain inheritance ...

WeChat applet implements a simple dice game

This article shares the specific code of the WeCh...

How to automatically start RabbitMq software when centos starts

1. Create a new rabbitmq in the /etc/init.d direc...

Install Zookeeper under Docker (standalone and cluster)

After starting Docker, let's take a look at t...