Reactive Functionreactive 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 functionDefining Responsive Data{ value:value} Direct definition usingimport 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 objectref 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:
|
<<: Differentiate between null value and empty character ('') in MySQL
>>: Linux directory switching implementation code example
Run the script in debug mode You can run the enti...
Table of contents 1. Error phenomenon 2. Error An...
This article uses examples to illustrate the prin...
Within rows, light border colors can be defined i...
Table of contents The effect of mixed inheritance...
Preface In daily work or study, it is inevitable ...
1. Background A sql-killer process is set up on e...
In the actual projects I participated in, I found...
The skills that front-end developers need to mast...
Programmers must deal with MySQL a lot, and it ca...
This article example shares the specific code of ...
Table of contents 1. Introduction 2. es5 method 3...
There are two types of hard disks in Linux: mount...
Openlayers is a modular, high-performance and fea...
background There is a Tencent Linux cloud host, o...