响应式常用API
ref 相关：toRef、toRefs、unRef
只读代理：readonly
判断相关：isRef、isReactive、isProxy、isReadonly
3.3新增API：toValue
ref相关
toRef：基于响应式对象的某一个属性，将其转换为 ref 值
import { reactive, toRef } from 'vue'
const state = reactive({
count: 0
})
const countRef = toRef(state, 'count')
// 这里其实就等价于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
1
2
3
4
5
6
7
8
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)
console.log(countRef.value)
console.log(countRef.value.value)
1
2
3
4
5
6
7
8
9
10
11
12
13
toRefs：将一个响应式对象转为一个普通对象，普通对象的每一个属性对应的是一个 ref 值
import { reactive, toRefs } from 'vue'
const state = reactive({
count: 0,
message: 'hello'
})
const stateRefs = toRefs(state)
console.log(stateRefs) // {count: RefImpl, message: RefImpl}
console.log(stateRefs.count.value)
console.log(stateRefs.message.value)
1
2
3
4
5
6
7
8
9
unRef: 如果参数给的是一个 ref 值，那么就返回内部的值，如果不是 ref，那么就返回参数本身
这个 API 实际上是一个语法糖： val = isRef(val) ? val.value : val
import { ref, unref } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(unref(countRef)) // 10
console.log(unref(normalValue)) // 20
1
2
3
4
5
6
只读代理
接收一个对象（不论是响应式的还是普通的）或者一个 ref，返回一个原来值的只读代理。
import { ref, readonly } from 'vue'
const count = ref(0)
const count2 = readonly(count) // 相当于创建了一个 count 的只读版本
count.value++;
count2.value++; // 会给出警告
1
2
3
4
5
在某些场景下，我们就是希望一些数据只能读取不能修改
const rawConfig = {
apiEndpoint: 'https://api.example.com',
timeout: 5000
};
// 例如在这个场景下，我们就期望这个配置对象是不能够修改的
const config = readonly(rawConfig)
1
2
3
4
5
6
判断相关
isRef 和 isReactive
import { ref, shallowRef, reactive, shallowReactive, isRef, isReactive } from 'vue'
const obj = {
a:1,
b:2,
c: {
d:3,
e:4
}
}
const state1 = ref(obj)
const state2 = shallowRef(obj)
const state3 = reactive(obj)
const state4 = shallowReactive(obj)
console.log(isRef(state1)) // true
console.log(isRef(state2)) // true
console.log(isRef(state1.value.c)) // false
console.log(isRef(state2.value.c)) // false
console.log(isReactive(state1.value.c)) // true
console.log(isReactive(state2.value.c)) // false
console.log(isReactive(state3)) // true
console.log(isReactive(state4)) // true
console.log(isReactive(state3.c)) // true
console.log(isReactive(state4.c)) // false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3.3新增API
toValue
这个 API 和前面介绍的 unref 比较相似
import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
1
2
3
4
5
6
toValue 相比 unref 更加灵活一些，它支持传入 getter 函数，并且返回函数的执行结果
import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
const getter = ()=>30;
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
console.log(toValue(getter)) // 30
原文链接：https://blog.csdn.net/fyw1789/article/details/140700206
