vue3 ref 和 reactive 区别-示例

时间:2024-03-21 21:49:17

// 使用 ref

const count = ref(0);

// 在模板中使用 count.value 来显示或绑定
// 在 JavaScript 中访问或修改 count.value

// 使用 reactive

const state = reactive({ count: 0 });

// 在模板中直接使用 state.count 来显示或绑定
// 在 JavaScript 中直接访问或修改 state.count

在实际开发中,你可以根据需要创建的数据类型和使用场景来选择使用 ref 还是 reactive。
对于简单的基本数据类型,使用 ref 可能更合适;而对于复杂的数据结构,如组件的状态管理,reactive 提供了更直观和方便的方式来处理。