Vue响应式工具

Vue数据检测：isRef()、isReactive()、isReadonly()

isRef：检测是否为ref数据，返回布尔值

isReactive：检测是否为reactive数据，返回布尔值

isReadonly： 检测是否为readonly只读数据, 返回布尔值

**当readony包裹ref数据时，isRef和isReadonly都为ture **

当readony包裹reactive数据时，isReactive和isReadonly都为ture

const name = ref('高启强')
const nameData = readonly(name)

isReadonly(nameData)  // true
isRef(nameData)  // true

完整示例：

<script setup>
import { ref, reactive, readonly, isRef, isReactive, isReadonly } from 'vue'

const name = ref('高启强')
const obj = reactive({
  name: '高启盛',
  age: 28
})
const nameData = readonly(name)
const objData = readonly(obj)

isRef(name)           // true
isReactive(obj)       // true
isReadonly(nameData)  // ture

isRef(obj)         // false
isReactive(name)   // false
isReadonly(name)   // false

// 注意：nameData虽然是readonly包裹的只读数据，但里面包裹的是ref数据。所以isRef检测返回true, isReadonly也会返回true
isRef(nameData)     // true
isReactive(objData) // true
</script>

ref数据转换：toRef()

toRef是用于将对象中的一个属性转为ref数据

toRef有两个参数, 第一个参数是要转的目标对象，第二个参数是对象属性

<script setup>
import { toRef, isRef } from 'vue'

const obj = {
  name: '高启强'
}
const myName = toRef(obj, 'name')

console.log(isRef(myName));  // true
console.log(myName.value); //  高启强
</script>

ref数据批量转换：toRefs()

toRefs从名字就可以看出来是和toRef差不多，他们的区别就是toRef可以将一个属性转为ref数据，toRefs是将所有属性转为ref数据

toRefs和解构一起使用更方便

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

const obj = reactive({
  name: '高启强',
  age: 28
})
// toRefs(obj) 返回的是一个像这样的对象 { name: { value: '高启强' }, age: { value: 28 }  }
// 1.通过toRefs转为ref，2.通过解构的方式拿出name和age
const { name, age } = toRefs(obj)

console.log(name.value);  // 高启强
console.log(age.value); //  28
</script>