当前位置：首页 > news >正文

东莞网推广网站建设自媒体运营

news 2025/9/16 1:14:25

东莞网推广网站建设,自媒体运营,蓝海网站建设,台前网站建设今天在写前端， 用的是Vue3， 其实之前也有写过一些前端， 但是涉及不深， 差不多是基础的水平， 然后现在想跟进下Vue3， 就有点吃力得紧， 就单单一个变量的引用， 就折腾得不轻&#xff0…

今天在写前端，用的是Vue3，其实之前也有写过一些前端，但是涉及不深，差不多是基础的水平，然后现在想跟进下Vue3，就有点吃力得紧，就单单一个变量的引用，就折腾得不轻，调试的时候，取值都是各种undefined，然后就特地找了下相关的资料，这才明白ref和reactive的区别。
在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个核心 API。它们的主要区别在于处理数据的方式和适用场景。

`ref`

ref 用于定义一个响应式的数据对象。
它可以接受一个内部值并返回一个响应式的、可变的 ref 对象，该对象只有一个 .value 属性。
在模板中直接使用 ref 时，Vue 会自动解构 .value，因此不需要显式地写 .value。
在 JavaScript 中操作 ref 时，必须使用 .value 来访问或修改其值。

`reactive`

reactive 用于创建一个响应式的对象或数组。
它返回一个对象的响应式代理。
在模板或响应式对象内部直接访问属性时，不需要 .value。
reactive 只能处理对象和数组，对于基本数据类型（String、Number、Boolean 等）不适用。

什么时候用 `.value` 取值

当你在 JavaScript 中直接操作 ref 时，需要使用 .value。
当你将 ref 作为响应式对象的属性时，在 JavaScript 中操作该属性时也需要 .value。

什么时候可以直接取值

在 Vue 模板中，Vue 会自动解构 ref 的 .value，因此可以直接使用 ref 而不需要 .value。
对于 reactive 创建的响应式对象，无论是在模板中还是在 JavaScript 中，都可以直接访问其属性，不需要 .value。

示例

import { ref, reactive } from 'vue';
const count = ref(0); // 创建一个响应式的 ref 对象
const state = reactive({ count: 1 }); // 创建一个响应式的 reactive 对象
// 在 JavaScript 中操作 ref 时需要使用 .value
console.log(count.value); // 0
count.value++;
// 在 JavaScript 中操作 reactive 对象时，直接访问属性
console.log(state.count); // 1
state.count++;
// 在模板中使用 ref 和 reactive
<template><div>{{ count }}</div> <!-- 自动解构 .value --><div>{{ state.count }}</div> <!-- 直接访问属性 -->
</template>