If you are interested, you can follow my public account “Life Code”.
refs
Accepts a value and returns a reactive and mutable ref object. A REF object has a value that points to a single attribute of a value.
Example:
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
return {
count,
}
},
}
</script>
Copy the codeIf you assign an object to a REF value, you can use the Reactive method to make that object highly responsive.
unref
If the argument isRef, the internal value is returned, otherwise the argument itself is returned, which is val = isRef(val)? val.value : val
Example:
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { ref, isRef, unref } from 'vue'
export default {
setup() {
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
console.log("count===>", isRef(count))
const cunt = unref(count)
console.log("cunt====>", cunt, isRef(cunt))
return {
count,
}
},
}
</script>
Copy the codetoRef
You can use it to create a new REF for an attribute on a source responsive object, which can then be passed in to maintain a reactive link to its source attribute.
Example:
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { toRef, reactive } from 'vue'
export default {
setup() {
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2,
state.foo++
console.log(fooRef.value) // 3
return {
count,
}
},
}
</script>
Copy the codeToRef is useful when you want to pass a prop ref to a composite function:
export default {
setup(props) {
useSomeFeature(toRef(props, 'foo'))
}
}
Copy the codetoRefs
Transforms a reactive object into a normal object, where each attribute of the resulting object is a ref pointing to the corresponding attribute.
Example:
<template>
<div>
</div>
</template>
<script>
import { toRef, reactive } from 'vue'
export default {
setup() {
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2,
state.foo++
console.log(fooRef.value) // 3
},
}
</script>
Copy the codetoRefs
<template>
<div></div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const state = reactive({
foo: 1,
bar: 2,
})
const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:
{
foo: Ref<number>,
bar: Ref<number>
}
*/
// ref and original property "link"
state.foo++
console.log(stateAsRefs.foo.value) // 2,
stateAsRefs.foo.value++
console.log(state.foo) // 3
},
}
</script>
Copy the codeToRefs is useful when returning a reactive object from a synthesized function so that the consuming component can decompose/diffuse the returned object without losing responsiveness:
function useFeatureX() {
const state = reactive({
foo: 1.
bar: 2
})
// Logical running status
// Convert to ref on return
return toRefs(state)
}
export default {
setup() {
// The structure can be destroyed without losing responsiveness
const { foo, bar } = useFeatureX()
return {
foo,
bar
}
}
}
Copy the codecustomRef
Create a custom REF with explicit control over its dependency trace and update trigger. It requires a factory function that takes track and trigger functions as arguments and should return an object with get and set.
An example of implementing Debounce using a custom ref using a V-Model:
<template>
<div>
<input v-model="text" />
{{text}}
</div>
</template>
<script>
import { customRef } from 'vue'
function useDebouncedRef(value, delay = 200) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearTimeout(timeout)
timeout = setTimeout(() => {
value = newValue
trigger()
}, delay)
},
}
})
}
export default {
setup() {
return {
text: useDebouncedRef('hello'),
}
},
}
</script>
Copy the code