ref

Basic usage

1. Generates reactive data of value type
2. Available for templates and Reactive
3. Value is used to change the value

The sample code

<template>
    <p>Ref Demo for {{state.name}} and {{ageRef}}</p>
    <p ref="elementRef">This is used to validate ref template</p>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
    name: 'Ref'.setup() {
        const ageRef = ref(20) // The value type is responsive
        const nameRef = ref('Bean')

        const elementRef = ref(null)

        const state = reactive({     // Can be used in reactive
            name: nameRef
        })

        onMounted(() = > {
            console.log("ref template is ===> ", elementRef.value)
        })

        setTimeout(() = > {
            console.log("age is ===>" + ageRef.value)
            console.log("name is ===> " + state.name)

            ageRef.value = 30
            nameRef.value = 'Bean Mother'
        }, 1200);

        return { ageRef, state, elementRef }
    }    
}
</script>
Copy the code

toRef

Basic usage

1. Prop for a Reactive object
2. Create a ref with a reactive formula
3. Keep the reference relationship between the two

The sample code

<template>
    <p> toRef Demo for {{state.name}} -- {{ageRef}} --{{state.age}}</p>
</template>

<script>
import { ref, toRef, reactive } from 'vue'

export default {
    name: 'ToRef'.setup() {
        const state = reactive({    // Set state to a normal object.
            age: 20.name: 'Bean'
        })

        const ageRef = toRef(state, 'age')  // Create a ref

        setTimeout(() = > {    // Ref and Reactive maintain reference relationships and influence each other
            state.age = 30
        }, 1200);

        setTimeout(() = > {
            ageRef.value = 40
        }, 2400);

        return {
            state, ageRef
        }
    }
}
</script>
Copy the code

toRefs

Basic usage

1. Transform reactive objects (reactive encapsulation) into normal objects
2. Object each prop is a corresponding REF
3. Keep the reference relationship between the two

The sample code

<template> <! --<p> toRefs Demo for {{nameRef}} -- {{ageRef}}</p> -->
    <p> toRefs Demo for {{name}} -- {{age}}</p>
</template>

<script>
import { ref, toRef, toRefs, reactive } from 'vue'

export default {
    name: 'ToRefs'.setup() {
        const state = reactive({    // A responsive object
            age: 20.name: 'Bean'
        })

        const stateToRefs = toRefs(state) // Common objects

        A / / usage
        Const {age: ageRef, name: nameRef} = stateToRefs // Each attribute is a ref object
        // return {
        // ageRef, nameRef
        // }

        2 / / usage
        return stateToRefs
    }
}
</script>
Copy the code

Ref toRef and toRefs are best used

1. Reactive for objects and REF for value types
2. Setup returns toRefs(state), or toRef(state, ‘property name ‘)
3. ToRefs is used when a synthesized function returns a reactive object

Sample code for the synthesized function

Define a composition function

function demo1() {
    const state = reactive({
        x: 25.y: 'Bean'
    })
    // Logical running state, omit N lines.// Convert to ref on return
    return toRefs(state)
Copy the code

Using composition functions

export default {
    setup() {
        const {x, y} = demo1()
        
        return {
            x, y
        }
}
Copy the code

Why do we need ref

In setup, computed, and synthesized functions, it is possible to return a value type. The return of a value type tends to lose its responsiveness.

Vue3 takes a slightly different approach to reactive processing and uses a Proxy. In Vue3, the ref is the only way to solve the problem of value type response.

So why does ref need dot value?

• Ref is an object (non-loss-responsive) and value is a stored value
• Responsivity is implemented through get and set of the. Value attribute
• Value is not required only when ref is used for templates and reactive is used

Why toRef and toRefs are needed

• Original intention: Deconstruct the object to facilitate the decomposition and diffusion of object data without losing the responsivity
• Premise: For reactive objects (encapsulated by Reactive) that are not common objects
• Note: Don’t create reactive (that’s reactive), just continue reactive