vue3 ref和reactive区别

作者：伤哖铱旧发布日期:2026-08-01 浏览:106

// Vue 3 示例代码：ref 和 reactive 的区别

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

// 使用 ref 定义一个响应式的基本类型变量
const count = ref(0);
console.log(count.value); // 输出: 0

// 修改 ref 的值
count.value++;
console.log(count.value); // 输出: 1

// 使用 reactive 定义一个响应式的对象
const state = reactive({
  message: 'Hello Vue!',
  counter: 0
});
console.log(state.message); // 输出: Hello Vue!

// 修改 reactive 对象的属性
state.counter++;
console.log(state.counter); // 输出: 1

// 解释说明：
// ref 用于创建一个响应式的引用对象，适用于基本类型（如 number、string 等）。通过 .value 访问和修改其值。
// reactive 用于创建一个响应式的对象，适用于复杂数据结构（如对象、数组等），直接访问和修改属性即可。

上一篇：app.vue

下一篇：vue3watch和watcheffect区别