今天这一章应该是Vue学习的终章了，漫长的理论知识学习终于结束了。
toRef/toRefs
- 作用：创建一个ref对象，其value值指向另一个对象的某个属性
- 语法：const name = toRef(person,'name')
- 应用：要将响应式对象中的属性单独提供外部使用时
- toRefs：与toRef应用一致，但是可以批量创建多个ref对象，语法：toRefs(person)
### Demo.vue
<template>
<div>
<h1>个人信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>薪资:{{ job.j1.salary }}k</h2>
<br>
<button @click="name+='~'">修改姓名</button>
<button @click="age++">增加年龄</button>
<button @click="job.j1.salary++">涨薪</button>
</div>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
name: 'DemoName',
//暂不考虑响应问题
setup() {
//数据
let person = reactive({
name: '空谷',
age: 18,
job: {
j1: {
salary: 20,
},
},
})
//返回对象
return {
// person,
name: toRef(person, 'name'),
age: toRef(person, 'age'),
// salary: toRef(person.job.j1, 'salary'),
...toRefs(person),
}
},
}
</script>
shallowReactive与shallowRef
- shallowReactive:只处理对象最外层属性的响应式（浅响应式）
- shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
readonly与shallowReadonly
- readonly：让一个响应式的数据变成只读的（深只读）
- shallowReadonly：让一个响应式的数据变成只读的（浅只读）
toRaw与markRaw
- toRaw：将一个由reactive生成的响应式对象转为普通对象
- markRaw：标记一个对象，使其永远不会再成为响应式对象
provide与inject
- 作用：实现祖孙组件之间的通信
- 用法：
- 祖组件中：
setup(){
let car = reactive({name:'奔驰',price:40})
provide('car',car)
}2. 孙组件中：
setup(){
const car = inject('car')
return {car}
}响应式数据的判断
- isRef：检查一个值是否为一个ref对象
- isReactive：检查一个对象是否是由reactive创建的响应代理
- idReadonly：检查一个对象是否是由readonly创建的只读代理
- idProxy：检查一个对象是否是由reactive或者readonly方法创建的代理
ok，基本就到这里了，后面的案例没有去手写实现，也是偷懒了， 想要快点去刷乾坤了。文章来源：https://www.toymoban.com/news/detail-407264.html
我是空谷有来人，谢谢支持。文章来源地址https://www.toymoban.com/news/detail-407264.html
到了这里，关于Vue：（三十七）Vue3.0第二弹-终章的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
