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>
复制代码
结果：
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}
复制代码
评论