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
}
评论区