vue3中ref创建和reactive_对象类型的响应式数据

在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，关键在于理解你的数据结构以及是否需要直接访问性。在实际开发中，根据具体需求灵活选择这两个工具来构建高效、易于维护的响应式应用。