简介
它是 Vue3 提供的一个用于创建基本数据类型的函数，能将普通的数据包装为响应式。
大白话说，就是咱们要创建一个响应式变量，需要通过这玩意才行！
回忆 Vue2
不理解没关系啊，我们先来回顾一下 Vue2 中是如何做到的。
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="update()">改变数据</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: '哈哈哈鸡汤来喽~'
}
},
methods: {
update() {
this.msg = '鸡汤走喽~'
}
}
}
</script>
相信大家都能看懂啊，不解释了。
切入 Vue3
那咱们在 Vue3 中如何定义响应式变量和修改变量呢？
<template>
<div>
<h1>{{ msg }}</h1>
<button @click="update()">改变数据</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
// 定义数据
const msg = ref('哈哈哈鸡汤来喽~')
// 定义方法
const update = () => {
msg.value = '鸡汤走喽~'
}
// 暴露给模板
return { msg, update }
}
}
</script>
可以看到啊，咱们首先 import 引入了 ref，然后通过 ref() 函数包裹你想要创建的响应式数据，最后通过 x.value 形式进行访问或改变数据。
接下来呢，咱们再来定义一些布尔型和数值型响应式变量。
<script>
import { ref } from 'vue'
export default {
setup() {
// 定义数据
const msg = ref('哈哈哈鸡汤来喽~')
const bool = ref(true)
const numb = ref(999)
// 打印一下
console.log(`布尔：${bool} | 数值：${numb}`)
// 定义方法
const update = () => {
msg.value = '鸡汤走喽~'
}
// 暴露给模板
return { msg, update }
}
}
</script>
哎！不对劲啊，怎么是对象啊？
别急，还记得咱们刚才提到的，需要通过 .value 来访问吗？好，我们来加上。
<script>
import { ref } from 'vue'
export default {
setup() {
// 定义数据
const msg = ref('哈哈哈鸡汤来喽~')
const bool = ref(true)
const numb = ref(999)
// 打印一下
console.log(`布尔：${bool.value} | 数值：${numb.value}`)
// 定义方法
const update = () => {
msg.value = '鸡汤走喽~'
}
// 暴露给模板
return { msg, update }
}
}
</script>
非常完美。
写在后面
每次都需要写 .value 这个事，是受 JavaScript 语言限制的缺点，但好在 Vue 提供了一种编译时转换，可以允许咱们不需要再写 .value ，这个需要插件和配置，感兴趣的可以去自行了解。
那 Array 数组和 Object 对象是不是也能通过 ref 来定义啊？很遗憾，答案是不能！Vue3 专门为数组或对象这种复杂数据类型，提供了另一个方法，可以查看我的其他文章。
SEO
vue官方文档，vue ref()官方文档教程，vue3-ref函数处理基本类型，vue3中ref的理解，Vue3中 ref 属性详解，vue3 之 ref，Vue3学习之ref()用法，vue3 ref 的了解和使用，vue3如何使用ref获取元素，vue3 ref函数，vue3之ref获取元素，Vue3 - ref 基本类型（通俗易懂，详细教程）。
