Vue3之ref,reactive,toRef,toRefs

toRef:

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

<script setup>
import { toRef, reactive } from "vue";

const state = reactive({
  age: 18,
  name: "Lihy",
});

// toRef 如果用于普通对象（非响应式对象），产出的结果不具备响应式
// const state = {
//     age: 18,
//     name: 'Lihy'
// }

//所包含的属性具有响应式,而且跟state中对应属性存在相互引用的关系
const ageRef = toRef(state, "age");

setTimeout(() => {
  state.age = 25;
}, 1500);

setTimeout(() => {
  ageRef.value = 30; // .value 修改值
}, 3000);
</script>

toRefs:

<template>
  <p>toRefs {{ ageRef }} {{ nameRef }}</p>
</template>

<script setup>
import { toRefs, reactive } from "vue";
const state = reactive({
  age: 25,
  name: "John Doe",
});
//将响应式对象转换成普通对象,并且所有包含的属性都是响应式属性,而且跟state中属性存在相互引用的关系。
//其次这样可以方便在模板上直接用属性访问，不需要再state.age/name
const { age: ageRef, name: nameRef } = toRefs(state);

setTimeout(() => {
  ageRef.value = 18;
  nameRef.value = "modify name";
  console.log("state", state);
}, 2000);
</script>

ref:

ref为了将值类型变成响应式对象，这样页面就可以实时响应数据的变化。

由于在使用Vue框架中会使用到值类型，那么去实现响应式，就会有很多处理方案，所以ref的出现就可以进行统一规范。

在reactive中引用或者template中使用ref值的时候，不需要进行.value获取，其余都需要进行.value获取

ref为什么需要.value去获取值？

因为如果直接使用值类型，那么会丢失响应性。而对象类型则不同，不会丢失。
详情看如下代码：
let a=0 
function computed(getter){
    let val=1;
    setTimeout(()=>val=getter(),1500)
    return val
}
a=computed(()=>100)//由于是值类型，a的值在1.5S后还是为1

let a=0 
function computed(getter){
    let ref={value:null};
    setTimeout(()=>ref.value=getter(),1500)
    return ref
}
a=computed(()=>100)//由于是引用类型，a的值在1.5S后是为100

reactive:

为了将引用类型变成响应式对象。