1. ref 相关

1.1 toRef

toRef：基于响应式对象的某一个属性，将其转换为 ref 值

<template>
  <div>{{ state.count }}</div>
</template>

<script setup>
import { reactive, toRef } from 'vue'
const state = reactive({
  count: 0
})
const countRef = toRef(state, 'count')
// 这里其实就等价于 ref(state.count)
console.log('state', state)
console.log('countRef', countRef)
console.log('countRef.value', countRef.value)
console.log('state.count === countRef.value', state.count === countRef.value)
</script>

<style lang="scss" scoped></style>

<template>
  <div>{{ state.count }}</div>
</template>

<script setup>
import { reactive, isReactive, toRef } from 'vue'
const state = reactive({
  count: {
    value: 0
  }
})
console.log(isReactive(state)) // true
console.log(isReactive(state.count)) // true
const countRef = toRef(state, 'count')
// 相当于 ref(state.count)
console.log('countRef', countRef)
console.log('countRef.value', countRef.value)
console.log('countRef.value.value', countRef.value.value)
</script>

<style lang="scss" scoped></style>

1.2 toRefs

将一个响应式对象转为一个普通对象，普通对象的每一个属性对应的是一个 ref 值

<template>
  <div>{{ state.count }}</div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
const state = reactive({
  count: 0,
  message: 'hello'
})
const stateRefs = toRefs(state)
console.log('state', state) // {count: RefImpl, message: RefImpl}
console.log('stateRefs', stateRefs) // {count: RefImpl, message: RefImpl}
console.log('stateRefs.count.value', stateRefs.count.value)
console.log('stateRefs.message.value', stateRefs.message.value)
</script>

<style lang="scss" scoped></style>

1.3 unref（返回ref内部值或者参数本身）

如果参数给的是一个 ref 值，那么就返回内部的值，如果不是 ref，那么就返回参数本身。

这个 API 实际上是一个语法糖： val = isRef(val) ? val.value : val

<template>
  <div></div>
</template>

<script setup>
import { ref, unref } from 'vue'
const countRef = ref(10)
const normalValue = 20

console.log(unref(countRef)) // 10
console.log(unref(normalValue)) // 20
</script>

<style lang="scss" scoped></style>

2. 只读代理——readonly

接收一个对象（不论是响应式的还是普通的）或者一个 ref，返回一个原来值的只读代理。

<template>
  <div></div>
</template>

<script setup>
import { ref, readonly } from 'vue'
const count = ref(0)
const count2 = readonly(count) // 相当于创建了一个 count 的只读版本
count.value++;
count2.value++; // 会给出警告
</script>

<style lang="scss" scoped></style>

在某些情况下，我们就是希望某些数据只能读取，无法修改，比如一些配置对象：

const rawConfig = {
  apiEndpoint: 'https://api.example.com',
  timeout: 5000
};
// 例如在这个场景下，我们就期望这个配置对象是不能够修改的
const config = readonly(rawConfig)

3. 判断相关

3.1 isRef 和 isReactive

import { ref, shallowRef, reactive, shallowReactive, isRef, isReactive } from 'vue'
const obj = {
  a:1,
  b:2,
  c: {
    d:3,
    e:4
  }
}
const objRef = ref(obj)
const objShallowRef = shallowRef(obj)
const objReactive = reactive(obj)
const objShallowReactive = shallowReactive(obj)
console.log(isRef(objRef)) // true
console.log(isRef(objShallowRef)) // true
console.log(isRef(objRef.value.c)) // false
console.log(isRef(objShallowRef.value.c)) // false
console.log(isReactive(objRef.value.c)) // true
console.log(isReactive(objShallowRef.value.c)) // false
console.log(isReactive(objReactive)) // true
console.log(isReactive(objShallowReactive)) // true
console.log(isReactive(objReactive.c)) // true
console.log(isReactive(objShallowReactive.c)) // false

3.2 isProxy

检查一个对象是否由 reactive、readonly、shallowReactive、shallowReadonly 创建的代理

import { reactive, readonly, shallowReactive, shallowReadonly, isProxy } from 'vue'
// 创建 reactive 代理对象
const reactiveObject = reactive({ message: 'Hello' })
// 创建 readonly 代理对象
const readonlyObject = readonly({ message: 'Hello' })
// 创建 shallowReactive 代理对象
const shallowReactiveObject = shallowReactive({ message: 'Hello' })
// 创建 shallowReadonly 代理对象
const shallowReadonlyObject = shallowReadonly({ message: 'Hello' })
// 创建普通对象
const normalObject = { message: 'Hello' }

console.log(isProxy(reactiveObject)) // true
console.log(isProxy(readonlyObject)) // true
console.log(isProxy(shallowReactiveObject)) // true
console.log(isProxy(shallowReadonlyObject)) // true
console.log(isProxy(normalObject)) // false

4. 3.3 新增API——toValue（unref 的升级版）

toValue API 和 unref 的作用极为相似，但是 toValue 更为灵活些，还支持返回函数的执行结果。

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
const getter = ()=>30;
const get100 = ()=>100;

console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
console.log(typeof getter) // function
console.log(getter()) // 30
console.log(toValue(getter)) // 30
console.log(toValue(get100)) // 100

---

上一章 《Vue3 响应式基础》
下一章 《Vue3 计算属性》