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
introduce HTML provides the contextual structure ...
There are two tables, and the records in table A ...
Summary HTML: element plus v-cloak CSS: [v-cloak]...
Table of contents Master-Master Synchronization S...
Most people have heard of the concept of server-s...
Table of contents MySQL Constraint Operations 1. ...
Table of contents 1. Basics 2. Nodes, trees, and ...
Source code preview: https://github.com/jdf2e/nut...
The backend uses the thinkphp3.2.3 framework. If ...
Often you will encounter a style of <a> tag...
When we use Vue for development, we may encounter...
Table of contents 1. Prototype chain inheritance ...
This article shares the specific code of the WeCh...
1. Create a new rabbitmq in the /etc/init.d direc...
After starting Docker, let's take a look at t...