目 录CONTENT

文章目录

Vue3核心之响应式

phyger
2022-06-14 / 0 评论 / 0 点赞 / 145 阅读 / 3,705 字 / 正在检测是否收录...
广告 广告

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对象
datasfalse
datas.namefalse
tmsflase
tms.agetrue

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
}
0
广告 广告

评论区