Vue3 : ref 与 reactive

简介: Vue3 : ref 与 reactive

一.ref
在 Vue 3 中,ref 是一个用于创建可读写且支持数据跟踪的响应式引用对象。它主要用于在组件内部创建响应式数据,这些数据可以是基本类型(如 number、string、boolean)或者是对象。ref 的主要作用是提供一种方式来创建和操作响应式数据,使得 Vue 能够在数据变化时自动更新视图。

二.reactive
在 Vue 3 中,reactive 是一个用于创建响应式对象的函数。它接受一个对象作为参数,并返回该对象的响应式副本。在 Vue 3 的数据驱动渲染和响应式系统中,reactive 的使用至关重要,因为它允许 Vue 能够追踪和更新依赖于该对象的组件状态。

三.ref与reactive的区别
特性 ref reactive
数据类型 基本类型数据、对象类型数据 支持基本类型
返回值 返回一个包含 .value 属性的对象 返回一个响应式对象
使用场景 当你需要响应式的基本数据类型时 当你需要响应式对象时,特别是对象包含多个属性时
四.总结
1.当你需要响应式的基本数据类型时,使用 ref。

2.当你需要处理一个包含多个属性的对象,并且希望这些属性都是响应式的,使用 reactive。

3.ref 和 reactive 都能够触发视图的自动更新,但它们在内部实现和适用场景上有所不同。

相关文章
|
5天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
20 9
|
4天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
10 1
|
5天前
|
JavaScript
|
4天前
Vue3 使用mapState
Vue3 使用mapState
9 0
|
JSON 前端开发 API
Vue3入门到精通--reactive以及reactive相关函数
Vue3入门到精通--reactive以及reactive相关函数
|
8天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
40 11
|
8天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
197 65
|
7天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
24 10
|
7天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
25 9
|
7天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
22 7