vue3 ref和reactive的区别

作者：风外听竹发布日期:2025-06-06 浏览:55

// 使用 Vue 3 的 ref 和 reactive

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

// 使用 ref 定义一个响应式的基本类型变量
const count = ref(0);

// 解释：ref 用于包装基本数据类型（如数字、字符串、布尔值等），它会返回一个带有 .value 属性的对象。
// 通过 .value 来访问或修改这个值。例如：
count.value++; // 修改 count 的值为 1

// 使用 reactive 定义一个响应式的对象
const state = reactive({
  name: 'Vue',
  age: 3
});

// 解释：reactive 用于将一个普通对象转换为响应式对象。直接操作 state 对象的属性即可，不需要使用 .value。
// 例如：
state.age++; // 修改 age 的值为 4

// 总结：
// - ref 适合用于基本数据类型，需要通过 .value 访问和修改；
// - reactive 适合用于复杂对象，直接操作对象属性即可。

上一篇：element vue

下一篇：vue3动态路由