vue3 reactive和ref区别

作者：狂神战天发布日期:2026-07-02 浏览:75

// 使用 ref 和 reactive 的示例代码

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

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

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

// 解释说明:
// 1. ref 用于创建一个响应式的引用对象，可以包装基本类型（如数字、字符串等）。
//    访问和修改时需要通过 .value 属性。
// 2. reactive 用于创建一个响应式的对象。直接操作对象属性即可，不需要 .value。

// 修改 ref 的值
count.value++;

// 修改 reactive 对象的值
state.version = 4;

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

上一篇：vue 事件

下一篇：vue3 modelvalue