【ref 和 reactive的区别】

2024-05-02 18:15:25

ref 和 reactive的区别

两者概念

ref函数：定义一个响应式的数据（主要针对基础类型数据）
方法：引入 ref 函数，const xxx = ref(initValue) 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

reactive函数：定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
方法：const x= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy 的实例对象，简称 proxy 对象）
特点：可以实现数组、深层对象的响应式数据，这是 vue2.0 中无法实现的，底层基于 Proxy

从定义数据角度对比

ref 用来定义：基本类型数据。
reactive 用来定义：对象（或数组）类型数据。会自动deep

注意：ref 也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

从原理角度对比

ref 通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
reactive 通过使用 Proxy 来实现响应式（数据劫持）, 并通过 Reflect 操作源对象内部的数据。

ref补充：

RefImpl 对象中.value 是基础类型时，用的是 Object.defineProperty 通过 get 和 set 实现的响应式数据

RefImpl 对象中.value 是对象时候，用的是 proxy 代理对象实现的响应式数据

【ref 和 reactive的区别】相关推荐

vue3 - ref和reactive的区别
文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别(系列六) 1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么V ...
ref和reactive的区别
理解: 1.ref是定义简单类型和单一的对象 2.reactive 定义复杂的类型梳理文档: ref和reactive都是Vue.js 3.x版本中新增的响应式API,用于实现组件的数据响应式更新 ...
vue3 ref 和reactive的区别
文章目录 Ref reactive 源码分析视频点击进入 Ref ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型,返回一个基于该值的响应式Ref对象,该对象中的值一旦被改 ...
vue3 ref 和 reactive 区别
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到响应式数据问题,经百度查找相关笔记,在此记录一下,在实战中成长吧. 问题出现的问题:定义一个默认数组并且 fo ...
ref、 reactive、toref、torefs的用法，区别
ref. reactive.toref.torefs的用法,区别 ref 接受一个内部值并返回一个响应式且可变的 ref 对象.ref 对象仅有一个 .value property,指向该内部值 co ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
reactive和ref的特性和区别
reactive和ref返回的都是一个原始对象的 Proxy,它和原始对象是不相等的一.定义数据方面: reactive:仅对对象类型有效(对象.数组和 Map.Set 这样的集合类型),而对 st ...
ref，reactive toRaw
ref() 在vue3.0引入了composition API , setup函数是其核心函数在setup函数中,可以使用ref函数,用于创建一个响应式数据,当数据发生改变时,Vue会自动更新UI ...
Vue3 初探 ref、reactive 、及改变数组的值
概况 Vue3 里要实现数据的响应式监听一共有两种方式既:ref 和 reactive 他们既有区别又有联系. ref() ref数据响应式监听.ref 函数传入一个值作为参数,一般传入基本数据类型, ...

最新文章

热门文章