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可以实现响应式对象