vue3.0 There are many ways to add response expressions to data in api available , Sometimes I can't tell , Share your personal understanding .
<> one ,reactive
reactive Use to add a responsive state to an object .
Receive one js Object as a parameter , Returns a copy with a responsive state .
* Get the data value directly , No need to add .value
* Parameters can only be passed in object types import { reactive } from 'vue' // Responsive state const state = reactive({
count: 0 }) // Print count Value of console.log(state.count)
<> two ,ref
ref Used to add responsive status to data .
because reactive Only parameters of object type can be passed in , For basic data types, to add a responsive state, you can only use ref Yes , Also return a copy with a responsive state .
*
When obtaining data values, you need to add .value.（ For basic data types ,ref Is its own implementation method, and the performance is better than reactive, For object types ,ref Can be understood as through reactive Packaging implementation ）
* Parameters can pass any data type , Deep responsiveness can also be maintained when passing object types , So it is more applicable .
* vue 3.0 setup It is recommended to take precedence when defining data in ref, Facilitate logical splitting and business decoupling . import { ref } from 'vue' //
Add a responsive state for the basic data type const name = ref('Neo') // Adding responsive states to complex data types const state = ref({
count: 0 }) // Print name Value of console.log(name.value) // Print count Value of console.log(state.
value.count)
<> three ,toRef
toRef Used to create a new attribute for a property on a source responsive object ref, This maintains a responsive connection to its source object properties .
Receive two parameters ： Source responsive object and property names , Return a ref data .
For example, a message passed using a parent component props Data time , To reference props This is useful when you want to maintain a responsive connection .
* When obtaining data values, you need to add .value
* toRef Later ref If the data is complex type data , Not a copy of the original data , It's a reference , Changing the value of the result data will also change the original data import {
defineComponent, toRef } from 'vue' export default defineComponent({ props: [
title], setup (props) { // Create variable myTitle const myTitle = toRef(props, 'title')
console.log(myTitle.value) } })
<> four ,toRefs
toRefs Used to convert a responsive object to a result object , Each attribute of the result object points to the corresponding attribute of the original object ref.
Commonly used in es6 Deconstruction assignment operation , Because when a responsive object is directly deconstructed, the deconstructed data will no longer have a responsive object , And use toRefs This problem can be solved easily .
* When obtaining data values, you need to add .value
* toRefs Later ref If the data is complex type data , Not a copy of the original data , It's a reference , Changing the value of the result data will also change the original data
* The effect is actually the same toRef similar , Just toRef It is to assign values to attributes manually , and toRefs Is an automatic deconstruction assignment . import {
defineComponent, toRefs } from 'vue' export default defineComponent({ props: [
title], setup (props) { // Variables are created using the construct assignment syntax myTitle const { myTitle } = toRefs(
props) console.log(myTitle.value) } })
<> five , epilogue
Try not to mix them ,reactive and ref Choose one ,toRef and toRefs Choose one , Otherwise the code will be messy .
recommend ref and toRefs A shuttle .
Technology