vue reactive和ref区别

作者：纵马天下发布日期:2026-05-23 浏览:66

// 使用 Vue 3 的 reactive 和 ref

// 引入 Vue
import { reactive, ref } from 'vue';

// 使用 reactive 创建一个响应式对象
const state = reactive({
  count: 0,
  message: 'Hello Vue!'
});

// 使用 ref 创建一个响应式的基本类型
const count = ref(0);

// 解释：
// reactive 用于创建一个响应式的对象，当对象内部的属性发生变化时，Vue 会自动更新相关的视图。
// ref 用于创建一个响应式的单个值（基本类型），它返回一个带有 .value 属性的对象。在模板中使用时，Vue 会自动解包这个 .value。

// 示例：修改 state 和 count 的值
state.count++;
count.value++;

console.log(state.count); // 输出 1
console.log(count.value); // 输出 1

// 在模板中使用时：
// <p>{{ state.message }}</p>
// <p>{{ count }}</p>

// 注意：ref 在模板中使用时不需要加 .value，Vue 会自动处理。

上一篇：vue在线预览pdf

下一篇：vue运行命令run