Vue3中的响应式数据 reactive函数、ref函数

---

写在前面

专栏介绍：
凉哥作为 Vue 的忠实粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！

温故知新：
上篇文章中我们稍微的感受到了组合式API视觉和感觉上的差距，我们通过小小的案例来进行了组合式API和选项API的编码，大家还是否记得呢？如果没有学习的同学建议去阅读一下上一篇文章哦，大家可能对上篇文章中的组合式API的一些写法还是比较迷茫的，思路清晰也是写法有很大不同，没关系本篇文章就来为大家介绍组合式API中转化响应式的两个函数，相信通过本篇的学习 你对上篇文章中的组合式API写法回头更深刻的认识！

---

setup

在上篇文章中我们一定发现了组合式API就是一个逻辑就是一块代码，但是每块逻辑其实都是写在了setup的函数中，setup函数就是Vue3特有的选项，作为组合式API入口函数，所有的组合式API都应该写在setup函数中。

setup函数 什么时候执行呢？其实setup函数的执行时机是在钩子函数 beforeCreate 之前执行！大家思考既然是在在钩子函数 beforeCreate 之前执行那我们在setup函数中能否使用Vue实例this？可想而知一定是不能的，但是我们可以通过其他的函数来实现！下面看让我们来验证一下setup的执行时机吧！

在我们编码之前呢先给大家推荐一款VSCode插件，我们发现按照前面文章中仅用的Vulor插件后我们编写Vue代码就没有提示了，所以下面这款插件能够很好的支持Vue3的代码提示；上面两种都可以自选一个即可！如果你跟我一样用的下面的插件你只需要在Vue文件中打上vbase-3然后就会自动为你生成Vue3的基础代码机构体，好了 我们下面来进行验证我们setup函数的执行时机吧！

<template>
    <div>

    </div>
</template>

<script>
export default {
    setup() {
        console.log('这是setup的执行')
        console.log('这是尝试一下this',this)

        return {}
    },
    beforeCreate() {
        console.log('这是beforCreate')
    }
}

</script>
<style lang="scss" scoped>

</style>

我们可以看到浏览器先打印的 这是setup的执行 后打印的 这是beforCreate，由此可以证实，我们的setup函数的执行时机是在钩子函数 beforeCreate 之前执行，并且我们尝试了在 setup 函数中打印this 值为undefined；

大家有没有发现通过我们生成的代码体中setup函数中有一个 return{}，当然可以很好理解，而且在我们上篇文章中我们已经进行过体验了，我们可以回想一下Vue2中我们的数据是定义在data中，然后我们的函数是定义在methods中然后供模板使用，但是在组合式API中我们数据、方法都可以在setup中定义，只需要return出去就可以使用了；下面跟着我来体验一下吧！

<template>
    <div>
        您好，{{ name }}
        <button @click="cheer">打印</button>
    </div>
</template>

<script>
export default {
    setup() {
        const name = '几何心凉'
        const cheer = () => {
            console.log('凉哥好')
        }
        return { name , cheer}
    },
}

</script>
<style lang="scss" scoped>

</style>

---

reactive 函数

我们还是回到上面的例子中，我们声明了变量name=几何心凉，那如果我要是想在cheer改变他的值，试图层是够会跟着改变呢？是否具备响应式，我们来看一！

<template>
    <div>
        您好，{{ name }}
        <button @click="cheer">更换昵称</button>
    </div>
</template>

<script>
export default {
    setup() {
        let name = '几何心凉'
        const cheer = () => {
            name='心凉几何'
            console.log(name)
        }
        return { name , cheer}
    },
}

</script>

我们发现在 cheer 函数中我们改变了name的值，打印已经更新了，但是试图层渲染的还是几何心凉，说明我们变量并不是响应式的，如果做到响应式呢？那就需要用到我们组合API中的 reactive 函数。让我们来看一下 reactive的用法吧！

1）从Vue中引入reactive函数
2）在入口函数setup中去使用reactive函数
3）reactive函数只可以定义复杂类型的数据
4）通过setup函数return出去，模板中使用即可

<template>
    <div>
        <p>昵称：{{ data.name }}</p>
        <p>点赞量：{{ data.num }}</p>
        <button @click="give">为他点赞</button>
    </div>
</template>
 
<script>
import { reactive } from "vue"
export default {
    setup() {

        let data = reactive({
            name: '几何心凉',
            num: 0
        })
        const give = () => {
            data.num++
        }
        return { data, give }
    }
}
</script> 

---

ref 函数

上面案例中我们通过reactive函数将数据转化为了响应式，在改变数据后视图也随着进行改变，但是reactive只能转化复杂类型的数据（对象或者数组），那简单类型的数据是否可行呢？不行的，大家可以自行尝试，但是复杂类型的数据怎么办呢？那就用到了我们的 ref 函数，ref函数跟reactive的作用都是将数据转化为响应式，ref函数可以转化简单类型的数据和复杂类型的数据。让我们来看一下 reactive的用法吧！

1）从Vue中引入ref函数
2）在入口函数setup中去使用ref函数
3）ref函数可以传入普通数据和复杂数据
4）通过setup函数return出去，模板中使用即可

注意：使用ref函数返回的数据，我们要想获得数据需要通过 .value 但是模板中获取不需要

<template>
    <div>
        <p>计数器：{{ num }}</p>
        <button @click="num++">加1</button>
        <button @click="reduce">减1</button>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        let num = ref(0)
        const reduce = () => {
            num.value--
        }
        return { num, reduce }
    }
}
</script>

我们通过一个简单的计数器进行加减功能来使用了一下 ref 函数，并且刻意通过reduce函数来让大家感受了一下在js代码片段中，如果是使用ref函数转化的响应式数据获取数据需呀用到 .value，如果不用 .value 是不生效的，大家可以自行尝试一下；

---

ref、reactive如何选择？

从上面我们了解了ref既可以传入简单类型又可以传入复杂类型，那我们是否心声疑惑？那我在项目的开发中究竟什么时候使用ref函数，什么时候使用reactive函数？

其实截止到现在没有明确从性能或者场景中来限制大家如何选择，不过我们从可以从实际的项目开发中根据背景来决定，如果能确定数据是对象并且对象中的字段也是明确的，那我们可以使用 reactive 毕竟可以省去 .value，那其他情况下我们使用 ref；那什么是能确定数据是对象并且对象中的字段也是明确的呢？给大家觉个例子。比如说我们用户填写表单用户信息 姓名、手机号、学历、性别等这些确定性的字段我们即可使用； 但是有一种情况虽然我们的值是一个对象但是不能使用reactive 那就是我们请求接口的返回值；也是一个对象 但是我们不知道里面对应的字段有哪些，我们就不能使用 reactive，只有明确字段才可以使用reactive。我们来看一下 reactive 转化成的响应式数据究竟是什么？

<script>
import { reactive } from 'vue';
export default {
    setup() {
        let info = reactive({
            name: '几何心凉',
            age: 24
        })
        console.log(info)

        return {}
    }
}
</script>

大家有没有一种眼前一亮的感觉，我们都知道Vue3的数据响应式从之前Vue2的object.definepropty更换成了ES6的proxy，今天是不是见到了影子，然后我们参照下方截图看一下，如果我们通过reactive传入一个空对象形成一个影响式数据data，然后我们将接口返回后的对象直接赋值给data，那么data还是响应式的吗？然后我们再来看下方使用ref的代码截图，因为ref转化的响应式数据需要 .value 赋值，所以数据data仍是响应式的！其实我们大可以使用ref，因为他满足所有的数据转化，如果项目中真的遇到了固定字段的对象的时候我们可以改写成reactive 这样我们在数据使用上可以省略 .value。

---

写在最后

大家看完这篇文章，相信大家对我们Vue3中的响应式数据有所了解了，我们可以通过 reactive 或者 ref 来进行数据的响应式转化，那么reactive是支持复杂类型，ref支持简单数据类型并且支持复杂的数据类型，并且我们知道在数据转化中我们什么情况事情ref什么情况使用reactive，各位小伙伴让我们 let’s coding！

本期推荐

✨$原创不易，还希望各位大佬支持一下$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$