0
点赞
收藏
分享

微信扫一扫

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:GridItem)

河南妞 2024-03-21 阅读 9

Vue 3 引入了两种新的响应式 API:ref 和 reactive。这两个 API 都用于创建响应式数据,但它们的使用场景和行为有所不同。

ref

用途:ref 用于创建基本数据类型的响应式引用,如字符串、数字、布尔值等。
使用方式:在模板中使用时,Vue 会自动添加 .value 来访问 ref 创建的数据。在 JavaScript 中,你需要通过 .value 属性来获取或修改 ref 对象中的数据。
原理:ref 通过 Object.defineProperty 的 get 和 set 来实现响应性,它返回一个对象,该对象的 .value 属性是响应式的。

reactive

用途:reactive 用于创建对象或数组的响应式代理。
使用方式:在模板中直接使用 reactive 创建的数据,不需要添加 .value。在 JavaScript 中,你可以直接访问和修改 reactive 对象的属性,就像访问普通 JavaScript 对象一样。
原理:reactive 使用 Proxy 来创建响应式代理,这意味着你可以访问和修改对象的所有属性,而不需要通过 .value。

区别总结

数据类型:ref 适用于基本数据类型,而 reactive 适用于对象和数组。
访问方式:ref 需要通过 .value 访问或修改数据,reactive 则直接访问对象属性。
模板中的使用:在 Vue 模板中使用 ref 类型的数据时,Vue 会自动处理 .value,而在 reactive 对象中,你可以直接使用属性
设计理念:ref 主要解决单一元素/数据的响应式问题,而 reactive 解决复杂数据结构的响应式问题。

示例

// 使用 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 提供了更直观和方便的方式来处理。

举报

相关推荐

0 条评论