vue3 ref和reactive

作者：冫LOVE灬丶棒棒发布日期:2026-05-19 浏览:99

// Vue 3 中的 ref 和 reactive 示例

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

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

// ref 的使用方式
function increment() {
  count.value++; // 需要通过 .value 来访问和修改值
}

// 使用 reactive 定义一个响应式的对象
const state = reactive({
  message: 'Hello Vue!',
  items: [1, 2, 3]
});

// reactive 的使用方式
function updateMessage(newMessage) {
  state.message = newMessage; // 直接修改属性值即可
}

function addItem(item) {
  state.items.push(item); // 修改数组内容也会触发响应式更新
}

// 总结：
// - ref 用于基本类型，访问和修改需要通过 .value
// - reactive 用于对象或数组，直接操作属性即可触发响应式更新

上一篇：vue form

下一篇：vue layout