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

最新推荐文章于 2024-12-26 15:41:53 发布

小菜鸟py一个

最新推荐文章于 2024-12-26 15:41:53 发布

阅读量625

点赞数 20

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/m0_74242675/article/details/139188655

版权

在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>