preface

background

One of vuE3’s major incompatibilities is that the composite API needs to learn Refs before it can understand the composition, because it is essential to use Refs in setup functions

responsive

In VUE, responsiveness is a particularly important concept. Variable responsiveness is a prerequisite for VUE rendering. The methods in Refs deal with reactive correlation. The best way to verify that this is a reactive object is to see if the value changes in Watch

Difference between Refs and Refs

Refs has nothing to do with refs. Refs exist in VUe2. It’s just a reference tag to an element or component. Ex. :

/ / in the template
<input ref="textInput"/>
<button @click="getFocus">Input Get focus</button>
// the code in js
methods: { 
    getFocus(){
        this.$refs.textInput.focus()
    }
}
Copy the code

Refs Instructions

ref

Ref: receives a value and returns a ref object (with a value attribute). Change a non-reactive variable to a reactive variable 2. The value returned is a reactive variable with a value attribute, which is required to use.value 3 when calling a value inside setup. The value variable is automatically unpacked and can be called directly without using the. Value variable.

import { ref } from 'vue'
setup(){
    const test = ref('test')
    test.value = 'change'
}
// a call in template
<span> {{test}} </span> // Change is displayedCopy the code

reactive

Reactive: Transforms a non-reactive object into an attribute value. Passing in a non-reactive object returns object 2 with each attribute value being reactive. After being transformed by Reactive, the object’s deep ref is automatically unpacked, and can be accessed directly in JS or template. Example:

import { ref } from 'vue'
setup(){ 
    const test = ref({count: 1}) 
    test.count++
 } 
 // a call in template
 <span> {{test.count}} </span> // It shows 2Copy the code

unref

Unref does not directly convert a responsive object into a non-responsive object. Depending on the value passed in, if the value passed in is a ref, it returns its value, otherwise it returns the value itself, and the final value returned is non-responsive. Ex. :

import { ref, unref } from 'vue'
setup(){ 
    const unReactiveData = 1
    const reactiveData = ref(2)
    const unReactiveDataRef = unref(unReactiveData)
    console.log(unReactiveDataRef) // 1 returns the current
    const reactiveDataRef = unref(reactiveData)
    console.log(reactiveDataRef) //2, returns the value of the reactive variable directly
    / / unref equivalent to
    const unRefData = isRef(data) ? data.value : data
 } 
Copy the code

toRef

Getting a value for a property of a responsive object can also change the value to a responsive object:

const reactiveData = reactive({
    name: 'aaa'.age: 12
})
const { name } = reactiveData // Name is non-responsive
const name = toRef(reactiveData,'name') // Name is reactive
Copy the code

toRefs

Example of disassembly a responsive object and obtaining properties of a responsive object such that each variable is responsive:

setup(props){
// Setup passed props is itself a responsive object, but destructing the properties makes the values of the properties non-responsive
const { name, data } = props // Both name and data are nonresponsive
const{name, data} = toRefs(props) In this case, name and data are both responsive// Important: we still need to use name.value when using js
}
Copy the code

The functions in setup are reactive. The functions passed by toRefs are reactive. The functions passed by toRefs are reactive. Eactive returns unpacked values, which can be used directly. ToRefs returns unpacked values, which need to be used through. Value.