ref函数
0 前言
我们通过前面的内容了解了vue页面的基本语法模版，那我们现在就要开始了解vue重要的语法 —— 响应式。
PS：下面的VUE代码，可以在我们之前创建的vue项目运行，替换HomeView.vue代码即可。
1 响应式示例–基本类型
假设我们现在有一个传统的html页面，如下
<div>
hello,world!
</div>如果我们在页面要动态的修改hell,world!为你好，世界！，该怎么操作？
是不是要用js写代码，获取这个div区块，然后修改里面的值，代码如下：
<html>
<body>
<div id="textContainer">
hello, world!
</div>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
var textContainer = document.getElementById("textContainer");
textContainer.innerHTML = "你好，中国！";
}
</script>
</body>
</html>在这个示例中：
- 有一个
div，其id为”textContainer”，包含初始文本”你好，世界！”。 - 有一个按钮，其文本为”修改文本”。
- 在
<script>部分定义了changeText函数。当点击按钮时，该函数会触发，并使用innerHTML属性将div的内容修改为”你好，中国！”。
每一次修改都要调用一次document函数，修改页面。
那有没有办法，可以实现，我们只是修改变量，然后页面自动变呢？
来，让我们看vue响应式如何实现，如下
<template>
<div id="app">
<div id="textContainer">
{{ message }}
</div>
<button @click="changeText">修改文本</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 使用 ref 创建一个响应式数据
const message = ref('hello, world!');
// 定义方法
const changeText = () => {
message.value = '你好，中国！';
};
</script>
<style scoped>
#textContainer {
font-weight: bold;
}
</style>我们行行来解读
<div id="textContainer">
{{ message }}
</div>原来写这个hello，world!的地方改为用变量{{message}}替代，大括号说明了要填充的位置和对应的变量。
import { ref } from 'vue';
// 使用 ref 创建一个响应式数据
const message = ref('hello, world!');这里引入了ref响应函数，并用ref声明一个初始值为”hello, world!“的变量，这样，当页面启动的时候，{{}}双大括号会读取里面变量对应的初始值，这里读取的变量为message，它对应的初始值就是”hello, world!“。
// 定义方法
const changeText = () => {
message.value = '你好，中国！';
};这里声明了一个方法，通过点击按钮触发方法，会改变message得值为你好，中国！，然后{{}}会显示message变量最新的值，然后显示为你好，中国！。
这里就是我们vue响应式的好处，我们一旦声明了一个ref响应式变量，只要这个变量的值一遍，对应页面的值就自动变更了，不用再调用document等js原生方法，是不是超级简洁和方便！
这就是vue框架的一个好处。接下来我再讲一下，这个关键的语法ref。
2 贼拉好用的响应式函数——ref函数
在 Vue 3 中，ref 函数是一个用于创建响应式数据的函数。它是 Vue 3 Composition API 的一部分，用于替代 Vue 2.x 中的 data 属性。通过 ref，我们可以创建一个包装简单值的响应式变量。
2.1 创建响应式引用
import { ref } from 'vue';
// 创建一个响应式引用
const count = ref(0);
在这个例子中，count 是一个包含响应式值的引用。现在，如果你改变 count.value，Vue 会在视图中自动更新相关的部分。
2.2 获取和修改值
ref 创建的引用对象有一个 value 属性，用于获取和修改引用的值：
console.log(count.value); // 获取值
count.value = 10; // 修改值
2.3 在模板中使用
在 Vue 3 的模板中，你不需要直接使用 .value。模板会自动解包引用的值：
<template>
<div>
Count is: {{ count }}
</div>
</template>
<script>
import { ref } from 'vue';
const count = ref(0);
</script> 3 响应式示例–对象
ref函数同时也可以用于创建一个响应式对象。我们看一下下面的示例。
<template>
<div>
<p>Name: {{ person.name }}</p>
<p>Age: {{ person.age }}</p>
<p>Email: {{ person.email }}</p>
<button @click="updatePerson">Update Person</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 创建一个响应式对象
const person = ref({
name: 'John',
age: 30,
email: 'john@example.com'
});
// 更新 person 对象的方法
const updatePerson = () => {
person.value.name = 'Jane';
person.value.email = 'jane@example.com';
};
</script>
创建了一个包含个人信息的响应式对象，并提供了一个按钮来触发更新操作。当按钮被点击时，updatePerson 方法会修改 person 对象的 name 和 email 属性，这些变化会被 Vue 追踪并且在页面中更新。
我们看一下最终效果。
4 结语
好啦，我们这里学会了重要响应式函数，学会了快捷更新页面数值的方法。
而ref函数实现响应式对象是内部调用reactive函数实现的，而接下来，我们将详细讲解reactive函数。
我们接着看！
ref中传入引用值会内部调用reactive，所以ref可以实现响应式对象