1、前言
已经掌握了vue3入门的同学，在实际学习和开发中用的最多的概念肯定会有响应式，今天我们就一起来复习下关于vue3的响应式用法。
因为实际工作中我们通常会使用脚手架创建项目，所以我们直接在脚手架项目中进行演示。
2、选项式Api和组合式Api
2.1、选项式Api
熟悉vue2的同学对选项式Api很熟悉了，vue也兼容选项式Api，在vue3中选项式Api的代码格式如下：
<template>
<button @click="add1">点我啊</button>
{{ num }}
</template>
<script>
export default {
data(){
return {
num: 0
}
},
methods: {
add1(){
this.num++
}
}
}
</script>
<style>
</style>
这种data()中存放数据、methods中存放方法的写法就是选项式Api。
这种方式的好处就是数据、方法隔离，代码结构清晰，易于入门和理解。
2.2、组合式Api
为了解决不同逻辑的数据和方法分离的现状，vue3引入了组合式Api，即将整个逻辑的数据和方法等放到一起，相比选项式对开发者的业务拆分能力和代码组织能力更高了。
组合式Api要求我们要将响应式的变量声明在setup函数中，setup函数是一个专门用于组合式Api的钩子函数。而且我们需要借助reactive函数来创建响应式的对象。
<template>
<button @click="add1">点我啊</button>
{{ datas.num }}
</template>
<script>
import {reactive} from 'vue'
export default {
setup() {
const datas = reactive({ num: 0 })
function add1(){
datas.num++
}
return {
datas,
add1
}
}
}
</script>
<style>
</style>
如上，即为组合式Api的典型写法。
在组合式Api中一定记得将需要暴露到模板的对象
return出去（单独使用setup的时候）。
3、更多声明响应式对象的方法
前面我们已经了解了data方法（选项式Api中使用）、reactive（组合式Api中使用）两种不同的声明响应式对象的方式，那还有其他方式吗？
3.1、ref
因为reactive方法仅仅对，对象，数组、Map、Set类型生效，对于string、number、boolean类型是无效的。
鉴于这种情况，vue3引入了ref方法来帮助开发者创建任意类型的响应式对象。
<script>
import {reactive,ref} from 'vue'
export default {
setup() {
//const num = reactive(0) reactive不支持声明number类型的响应式对象
const num = ref(0)
function add1(){
this.num++
}
return {
num,
add1
}
}
}
</script>
3.2、toRef
当我们想要将reactive创建的响应式对象的某个属性单独传递出来时，我们可以使用toRef实现。
<template>
<button @click="add1">点我啊</button>
{{ tms }}
<div>
姓名：{{ datas.name }}
年龄：{{ datas.age }}
</div>
</template>
<script setup>
import {reactive,toRef} from 'vue'
const datas = reactive({name: 'phyger',age: 18, num: 0})
// 通过toRef将datas中的num转换为了ref对象
const tms = toRef(datas,'num')
const add1=()=>{
// 在此对tms的值进行修改
tms.value++
}
</script>
3.3、toRefs
类似toRef，toRefs可以将reactive声明的响应式变量的所有元素都转换为ref对象。
<template>
<button @click="add1">点我啊</button>
{{ tms.num }}
<div>
姓名：{{ tms.name }}
年龄：{{ tms.age }}
</div>
</template>
<script setup>
import {reactive,toRefs} from 'vue'
const datas = reactive({name: 'phyger',age: 18, num: 0})
// 通过toRef将datas中的num转换为了ref对象
const tms = toRefs(datas)
const add1=()=>{
// 在此对tms的值进行修改
tms.num.value++
}
</script>
toRefs的返回值是一个字典，格式为:
{name: ObjectRefImpl, age: ObjectRefImpl, num: ObjectRefImpl}
如上，我们已经将reactive定义的对象元素全部转换为了ref对象，而且属性值的变化会同步更新到reactive的对象中。
3.4、isRef
vue3为我们提供了判断时否为ref对象的方法，即isRef。
<script setup>
import {reactive,toRefs,isRef} from 'vue'
const datas = reactive({name: 'phyger',age: 18, num: 0})
// 通过toRef将datas中的num转换为了ref对象
const tms = toRefs(datas)
const add1=()=>{
// 在此对tms的值进行修改
tms.num.value++
// 判断datas,datas.name,tms,tms.age是否为ref对象
console.log(tms) // toRefs的返回值是一个字典{name: ObjectRefImpl, age: ObjectRefImpl, num: ObjectRefImpl}
console.log(isRef(datas),isRef(datas.name),isRef(tms),isRef(tms.age))
// 输出是 false false false true
}
</script>
结果：
| 对象 | 是否ref对象 |
|---|---|
| datas | false |
| datas.name | false |
| tms | flase |
| tms.age | true |
4、更多
4.1、简化在setup中的return
前面我们有说，在组合式Api中，我们必须将模板需要的属性暴露出去。通常大多数的属性都是需要暴露出去的，为了方便，vue3支持在单文件组件（SFC）的场景下，使用<script setup>来简化代码（export也不需要了）。其余的工作构建工具会帮我们处理掉。
<template>
<button @click="add1">点我啊</button>
{{ num }}
</template>
<script setup>
import {reactive,ref} from 'vue'
// const num = reactive(0) reactive不支持声明number类型的响应式对象
let num = ref(0)
// 1、普通函数
// function add1(){
// // 默认num是一个RefImpl对象，我们需要使用.value才能对num的值进行操作
// console.log(num,num.value) // RefImpl,0
// num.value++
// }
// 2、箭头函数
const add1=()=>{
num.value++
}
</script>
如上，我们直接使用<script setup>方式简化了return。
4.2、箭头函数
箭头函数也叫匿名函数，将function关键字省略掉了。
一个简单例子区分普通函数和箭头函数。
// 普通函数
var f1=function(arg1,agr2){
return arg1+arg2
}
// 箭头函数-多参数
var f2 = (arg1,arg2)=>{
return arg1+arg2
}
// 箭头函数-无参数：不能省略括号
var f3 = ()=>{
return true
}
// 箭头函数-单参数：可以省略括号
var f3 = a =>{
return a
}
评论区