Este artículo describe principalmente las funciones y el uso de toRef, toRefs y toRaw.
aRef
La función es cambiar una determinada propiedad del objeto en una referencia. Si el objeto original responde, la vista se actualizará y los datos cambiarán. Si el objeto original no responde, la vista no se actualizará y los datos cambiarán.
<template>
<div>
<button @click="change">按钮</button>
{
{
state}}
</div>
</template>
<script setup lang="ts">
import {
reactive, toRef } from 'vue'
const obj = {
foo: 1,
bar: 1
}
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
const change = () => {
state.value++
console.log(obj, state);
}
</script>
Resultado: los datos de la vista permanecen sin cambios y el resultado de la consola de la consola es obj={ “foo”: 1, “bar”: 2 } state=2
aRefs
Deconstruya las propiedades en el objeto una por una y vuélvase receptivo. Si el objeto original responde, actualizará la vista y cambiará los datos. Si el objeto original no responde, no actualizará la vista y los datos cambiarán.
import {
reactive, toRefs } from 'vue'
const obj = reactive({
foo: 1,
bar: 1
})
let {
foo, bar } = toRefs(obj)
foo.value++
console.log(foo, bar);
Resultado: 2,1
Si obj no está envuelto con reactivo, la vista no actualizará el resultado.
aRaw
import {
reactive, toRaw } from 'vue'
const obj = reactive({
foo: 1,
bar: 1
})
const state = toRaw(obj)
// 响应式对象转化为普通对象
const change = () => {
//state=2;赋值或者操作会报错
console.log(obj, state);
}
Resultado: {foo: 1, barra: 1}