往期内容：
《Vue零基础入门教程》合集（完结）
《Vue进阶教程》第一课：什么是组合式API
《Vue进阶教程》第二课：为什么提出组合式API
《Vue进阶教程》第三课：Vue响应式原理
《Vue进阶教程》第四课：reactive()函数详解
《Vue进阶教程》第五课：ref()函数详解(重点)
《Vue进阶教程》第六课：computed()函数详解(上)
《Vue进阶教程》第七课：computed()函数详解(下)
《Vue进阶教程》第八课：watch()函数的基本使用
《Vue进阶教程》第九课：watch()函数的高级使用
1) readonly()函数
readonly()
- 参数: 普通对象/reactive对象/ref对象
- 作用: 创建只读的响应式对象
- 返回: proxy对象
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, ref, readonly } = Vueconst count = ref(0)const stu = reactive({ name: 'xiaoming', age: 20 })const r_obj = readonly({ msg: 'hello' })const r_count = readonly(count)const r_stu = readonly(stu)</script></body>
</html>
应用场景
父组件向子组件传对象时, 为了保证单向数据流(子组件不能修改父组件中的数据). 可以考虑在父组件中传递只读对象给子组件
2) shallow系列函数
创建浅层的代理, 即第一层具有响应性. 更深层不具有响应性
shallowReactive()
javascript">const sh_stu = shallowReactive({name: 'xiaoming',age: 20,gf: { // 替换gf对象触发响应性name: 'xiaomei', // 不具有响应性city: {name: 'wuhan' // 不具有响应性}}
})shallowRef()
javascript">const state = shallowRef({ count: 1 })// 不会触发更改
state.value.count = 2// 会触发更改
state.value = { count: 2 }
shallowReadonly()
3) 工具函数
| 函数名 | 参数 | 作用 | 返回值 | 说明 |
| isRef | (数据) | 判断传入的参数是否为Ref类型 | true: 是Ref类型 false: 不是Ref类型 | 根据
|
| isReactive | (数据) | 判断传入的参数是否由 reactive()或者shallowReactive()创建 | true: 是 false: 否 | |
| isProxy | (数据) | 判断传入的参数是否由 reactive()或者shallowReactive() readonly()或者shallowReadonly() 创建 | true: 是 false: 否 | |
| toRef | (对象, '属性', 默认值?) | 将reactive对象的某个属性转换为 ref类型对象 | ObjectRefImpl对象 | 属性是字符串 默认值可选 |
| toRefs | (对象) | 将reactive对象转换成普通对象 但是每个属性值都是ref | 普通对象 | 传入参数必须是 reactive类型 |
