在Vue 3中,ref
和 reactive
是用于创建响应式数据的两种主要方法,它们各有侧重点和适用场景,主要区别在于处理基本类型和对象类型的数据上。
ref
ref
主要用于创建基本类型(如字符串、数字、布尔值)的响应式数据,但它也可以用来包裹对象或者数组,使其整体成为一个响应式引用。使用 ref
创建的数据,访问其实际值时需要通过 .value
属性。
示例:
import { ref } from 'vue';
const count = ref(0); // 基本类型
console.log(count.value); // 访问值
const person = ref({ name: 'Alice' }); // 对象类型
console.log(person.value.name); // 访问对象属性
reactive
reactive
则更适用于创建对象或数组这类复杂类型的响应式数据,它不会像 ref
那样返回一个带有 .value
的包裹对象,而是直接返回原对象,使得你可以在模板和代码中直接访问其属性而不需要额外的 .value
。
示例:
import { reactive } from 'vue';
const state = reactive({ count: 0, name: 'Bob' });
console.log(state.count); // 直接访问
state.count++; // 改变也会触发视图更新
在vue页面中应该怎么写
HTML部分
<template>
<div class="person">
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<h2>{{ tel }}</h2>
<!-- 修改名字按钮 -->
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="changeTel">修改联系方式</button>
</div>
</template>
js部分
<script lang="ts">
// 导出默认组件,用于让父组件决定要渲染什么内容
export default {
name: "Person",
// 定义一个组件,名称为"Person"
}
</script>
<script setup lang="ts">
import { ref } from "vue";
const name = ref("zhangsan"); // 姓名,初始值为"zhangsan"
const age = ref(18); // 年龄,初始值为18
const tel = ref("123456789"); // 电话,初始值为"123456789"
const changeName = () => {
name.value = "李四";
};
const changeAge = () => {
age.value += 1;
};
const changeTel = () => {
tel.value = "4353456456";
};
</script>
css部分
<!--
<style scoped>
</style>
-->
<!--
该注释块位于<style scoped>标签内,用于对样式文件进行说明。
此处不涉及具体的函数或类定义,因此无需参数和返回值说明。
scoped属性表示这些样式仅适用于当前组件,避免全局样式污染。
此段代码的主要作用是定义组件的内部样式,以实现对组件样式的定制和控制。
-->
<style scoped>
.person {
/* 设置高度为100% */
height: 100%;
/* 设置背景色为白色 */
background-color: #fff;
/* 隐藏滚动条 */
overflow: hidden;
/* 为绝对定位准备 */
position: relative;
/* 设置底部padding为50px */
padding-bottom: 50px;
/* 设置边框框大小 */
box-sizing: border-box;
background-color: antiquewhite;
}
h2 {
color: red;
/* 设置标题颜色为红色 */
}
</style>
总结
- 对于基本类型,虽然两者都可以用,但通常推荐使用
ref
,因为它能清晰地表明这是一个独立的值。 - 对于对象或数组这类复杂类型,
reactive
更为合适,因为它提供了更自然、直接的访问方式,无需通过.value
,更适合处理多层级的数据结构。
选择 ref
还是 reactive
,关键在于理解你的数据结构以及是否需要直接访问性。在实际开发中,根据具体需求灵活选择这两个工具来构建高效、易于维护的响应式应用。