Vue3核心之响应式-阿里云开发者社区

网络异常，图片无法展示

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）的场景下，使用</code>来简化代码（<code>export</code>也不需要了）。其余的工作构建工具会帮我们处理掉。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%20%20%3Cbutton%20%40click%3D%5C%22add1%5C%22%3E%E7%82%B9%E6%88%91%E5%95%8A%3C%2Fbutton%3E%5Cn%20%20%20%20%7B%7B%20num%20%7D%7D%5Cn%3C%2Ftemplate%3E%5Cn%3Cscript%20setup%3E%5Cn%20%20%20%20import%20%7Breactive%2Cref%7D%20from%20'vue'%5Cn%20%20%20%20%20%20%20%20%2F%2F%20const%20num%20%3D%20reactive(0)%20%20%20%20reactive%E4%B8%8D%E6%94%AF%E6%8C%81%E5%A3%B0%E6%98%8Enumber%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AF%B9%E8%B1%A1%5Cn%20%20%20%20%20%20%20%20let%20num%20%3D%20ref(0)%5Cn%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%2F%2F%201%E3%80%81%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%5Cn%20%20%20%20%20%20%20%20%2F%2F%20function%20add1()%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20%2F%2F%20%E9%BB%98%E8%AE%A4num%E6%98%AF%E4%B8%80%E4%B8%AARefImpl%E5%AF%B9%E8%B1%A1%EF%BC%8C%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8.value%E6%89%8D%E8%83%BD%E5%AF%B9num%E7%9A%84%E5%80%BC%E8%BF%9B%E8%A1%8C%E6%93%8D%E4%BD%9C%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20console.log(num%2Cnum.value)%20%2F%2F%20RefImpl%2C0%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%20%20%20%20num.value%2B%2B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%7D%5Cn%20%20%20%20%20%20%20%20%5Cn%20%20%20%20%20%20%20%20%2F%2F%202%E3%80%81%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%5Cn%20%20%20%20%20%20%20%20const%20add1%3D()%3D%3E%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20num.value%2B%2B%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%3C%2Fscript%3E%5Cn%E5%A4%8D%E5%88%B6%E4%BB%A3%E7%A0%81%22%2C%22id%22%3A%22ULeyQ%22%7D"></div><div><br /></div><div>如上，我们直接使用<code><script setup></code>方式简化了return。</div><div><br /></div><h3 id="j3ToA">4.2、箭头函数</h3><div><br /></div><div>箭头函数也叫匿名函数，将function关键字省略掉了。</div><div><br /></div><div>一个简单例子区分普通函数和箭头函数。</div><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%2F%2F%20%E6%99%AE%E9%80%9A%E5%87%BD%E6%95%B0%5Cnvar%20f1%3Dfunction(arg1%2Cagr2)%7B%5Cn%20%20%20%20return%20arg1%2Barg2%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E5%A4%9A%E5%8F%82%E6%95%B0%5Cnvar%20f2%20%3D%20(arg1%2Carg2)%3D%3E%7B%5Cn%20%20%20%20return%20arg1%2Barg2%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E6%97%A0%E5%8F%82%E6%95%B0%EF%BC%9A%E4%B8%8D%E8%83%BD%E7%9C%81%E7%95%A5%E6%8B%AC%E5%8F%B7%5Cnvar%20f3%20%3D%20()%3D%3E%7B%5Cn%20%20%20%20return%20true%5Cn%7D%5Cn%2F%2F%20%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0-%E5%8D%95%E5%8F%82%E6%95%B0%EF%BC%9A%E5%8F%AF%E4%BB%A5%E7%9C%81%E7%95%A5%E6%8B%AC%E5%8F%B7%5Cnvar%20f3%20%3D%20a%20%3D%3E%7B%5Cn%20%20%20%20return%20a%5Cn%7D%22%2C%22id%22%3A%22OPHg3%22%7D"></div>

Vue3核心之响应式