reactive和ref的区别,vue3 (script setup) 写法详细介绍

本文目录一览： reactive与ref对比

一、定义数据角度：

ref定义：基本数据类型

reactive定义：对象（或数组）数据类型

备注：ref也可以用来定义对象和数组，它内部通过reactive转为代理对象

示例：

let p2 = ref({

? ? ? ? name: '李四',

? ? ? ? age: 18

? ? })

? ? console.log('p2',p2)

? ? let p1 = reactive({

? ? ? ? name: '张三',

? ? ? ? age: 20

? ? })

? ? console.log('p1',p1)

从打印的结果可以看出来通过ref定义的数组实际生成了一个引用实例对象，在js中如果需要调用对象的属性值通过.value.name调用，而通过reactive定义的对象直接.name调用即可

二、原理角度

ref通过Object.defineProperty()的get()和set()实现响应式（数据的劫持）

reactive通过Proxy实现响应式，并通过Reflect操作源对象内部的数据

三、使用角度

ref：操作数据需要通过.value，在模版中读取不需要通过.value

reactive : ?操作与读取数据均不需要通过.value

Vue3 ref和reactive的使用和区别以及响应式原理

语法：const xxx = ref (initValue) 接受的数据类型：基本类型，引用类型 作用：把参数加工成一个响应式对象，全称为reference对象(我们下面一律简称为ref对象) 核心原理：如果使用的是基本类型响应式依赖Object.defineProperty( )的get( )和set( )，如果ref使用的是引用类型，底层ref会借助reactive的proxy 定义响应式 基本使用：
语法：const xxx = ref (源对象) 接受的数据类型：引用类型 作用：把参数加工成一个代理对象，全称为proxy对象 核心原理：基于Es6的Proxy实现，通过Reflect反射代理操作源对象，相比于reactive定义的浅层次响应式数据对象，reactive定义的是更深层次的响应式数据对象
基本使用：
ref和reactive都可以做响应式
ref:一般用在定义基本类型和引用类型，如果是引用类型底层会借助reactive形成proxy代理对象,可以直接复制整个对象，如table的数据请求回来，需要将数据整体赋值个响应对象这时如果使用的是reactive就无法进行响应。
reactive：一般用在引用类型，如{}等,不能一次性修改整个对象，如我们后端请求table的数据数据，如果想一次性赋值的整个数组的话，就行不通，此时建议使用ref来定义数组。
第一种写法：除了对象都用ref来定义
第二种写法：都用reactive来定义，然后用toRefs进行导出到页面使用

vue3的ref和reactive以及toRef和toRefs的区别。

针对一个响应式对象（reactive 封装）的 prop（属性）创建一个ref，且保持响应式
两者 保持引用关系

例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
将响应式对象（reactive封装）转成普通对象
对象的每个属性(Prop)都是对应的ref
两者保持引用关系
用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。

toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
作用其实和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

Vue 3 之：弄清 ref reactive toRef toRefs

reactive 会对传入对象进行包裹，创建一个该对象的 Proxy 代理。它是源对象的响应式副本， 不等于原始对象 。它“深层”转换了源对象的所有嵌套 property，解包并维持其中的任何 ref 引用关系。 reactive API 很好地解决了 Vue2 通过 defineProperty 实现数据响应式时的缺陷。使用也非常简单：
当将 ref 分配给 reactive property 时，ref 将被自动解包，无需再用 .value 访问。
ref 函数用来将一项数据包装成一个响应式 ref 对象。它接收任意数据类型的参数，作为这个 ref 对象 内部的 value property 的值。之后可以用 ref对象.value 访问或更改这个值。 因为基础数据类型只能传递值而不是引用地址，将它包装在一个对象内，可以实现数据的响应式。
可以通过 isRef 判断变量是否是 Ref 对象。 如果将对象分配为 ref 值，则内部会通过 reactive 方法使该对象具有高度的响应式。
有时我们可能需要为 ref 的内部值指定复杂类型。想要简洁地做到这一点，我们可以在调用 ref 覆盖默认推断时传递一个泛型参数：
因为 ref 就是通过 reactive 包装了一个对象 ，然后将值传给该对象的 value 属性，这也就是为什么每次访问时我们都需要加上 .value 。可以简单地把 ref(obj) 理解为 reactive({ value: obj }) 。
toRef 函数可以为传入对象的某个属性新创建一个响应式引用 ref 。这个 ref 可以被传递，它会保持对其源 property 的响应式连接。 第一个参数为源对象，第二个参数为源对象中的属性名。
再通过个小 ?? 对比下 ref 和 toRef ：
当你要将 prop 的某个 ref (即用 ref 包装的属性) 传递给复合函数时， toRef 很有用：
即使源 property 不存在， toRef 也会返回一个可用的 ref。这使得它在使用可选 prop 时特别有用，因为可选 prop 并不会被 toRefs 处理。
了解完 toRef 后，就很好理解 toRefs 了，其作用是生成一个新对象，内部 每个属性都指向 传入的对象的 相应 property 的响应式数据 ref 。 也就是说，新对象本身与原对象的无关联(指向新的引用地址)，但它的所有属性却都与源对象的对应属性建立了响应性。 toRef 可以记成建立一个 ref 属性值的引用， toRefs 则是所有 ref 响应属性值的引用。
看下 ??： 如果对响应式对象进行解构，被解构的两个 property 的响应性都会丢失。
可以用 toRefs 函数建立起与源对象的响应式关联：
实际开发中，比如需要解构 props，就可以这样操作来保证与 props 参数的响应式引用：
但如果 title 是可选 prop，则传入的 props 中可能没有 title 。这种情况下， toRefs 将不会为 title 创建一个 ref ，此时就需要用 toRef 替代它：
像上面这样做确保我们的侦听器能够 根据 title prop 的变化做出反应 。
当从 组合式函数 返回响应式对象时， toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：

vue3修改响应式代理值

vue3中如何使用ref和reactive定义和修改响应式数据?
12月2日1、字符串/数字:“ref”是vue3中用来存储值的响应式数据源,它可以定义字符串,数字等 import{ ref }from'vue' // “ref”是用来存储值...
CSDN编程社区
修改person中的值则需要通过user.name,user.age来响应式修改。
前端框架
vue3中如何使用ref和reactive定义和修改响应式数据？
国服第二切图仔
原创前端领域新星创作者
关注
1点赞·572人阅读
需求：vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？
1、字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等

Demo

登录后复制

这里就是vue3中setup组合式api
vue3 (script setup) 写法

这里主要讲下的一些写法，因为这种写法比较简洁，推荐使用这种写法
ref 用于为数据添加响应式的状态，它的本质就是将基本数据或对象通过 new Proxy 创建成为一个响应式的对象，所以通过它创建的基本数据 其实是个对象 它的值就放在了该对象的value属性中
所有通过ref创建的数据 需要通过xxx.value取它的值 通过ref创建一个响应式对象 其实它的内部还是通过reactive对该对象进行处理 所以声明响应式对象 推荐使用ref统一声明
reactive reactive主要为对象添加响应式对象，接收一个对象作为参数，可以用于为表单等数据做统一响应式处理
toRefs toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。 常用于es6的解构赋值操作。 主要解决 对一个响应式对象直接解构时解构后的数据将不再有响应式
toRef toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。 接收两个参数：源响应式对象和属性名，返回一个ref数据。 例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。
总结
eslint配置 .eslintrc.js 中配置则不会对此进行引入校验
script-setup用法 该连接为github仓库连接 可能网络问题打不开
script-setup用法 一个中文博客

vue3+ts 中 ref与reactive 如何指定类型

ref 约等于 reactive({ value: x }) ref() 可以定义时无参数，第一次赋值任意类型，然后就不能增加属性
返回对象的响应式副本 reactive(x) 必须要指定参数，所以类型就已经确定了，也不能增加属性
toRef 当你要将 prop 的 ref 传递给复合函数时，toRef 很有用
toRefs 将响应式对象Proxy转换为普通对象，且元素都指向原始对象的ref toRaw 返回 reactive或readonly 代理的原始对象，当然也可以返回ref的原始对象

vue3特性笔记

我们把vue3 和 vue2 的项目进行对比来去说明
综上所述，在 vue3 的初始化项目中，与 vue2 对比的最大差异其实就是两点：
setup 函数也是 Composition API 的入口函数，我们的变量、方法都是在该函数里定义的，不再使用vue2中的data而是setup。 reactive 方法是用来创建一个响应式的数据对象，该API也很好地解决了Vue2通过 defineProperty 实现数据响应式的缺陷
上面使用name必须state.name，不方便，另一个解决办法如下
执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property： props attrs slots emit
换句话说，你 将无法访问 以下组件选项： data computed methods
在Vue3中，这些生命周期部分有所变化，并且调用的方式也有所改变
Ts可指定类型，而不是以往所有对象参数都是object的any类型 另外Props可以提出来
h函数只是createVNode的简单封装，所以把h函数替换为createVNode也是一样的

ref 就是通过 reactive 包装了一个对象 ，然后是将值传给该对象中的 value 属性，这也就解释了为什么每次访问时我们都需要加上 .value。 我们可以简单地把 ref(obj) 理解为这个样子 reactive({value: obj})
watch 和 watchEffect 都是用来监视某项数据变化从而执行指定的操作的，但用法上还是有所区别 watchEffect： 1、不需要手动传入依赖 2、每次初始化时会执行一次回调函数来自动获取依赖 3、无法获取到原值，只能得到变化后的值

基于 Vue3 和 TypeScript 项目大量实践后的思考

Vue3出来已经有一段时间了，在团队中，也进行了大量的业务实践，也有了一些自己的思考。

总的来说，Vue3无论是在底层的原理上，还是在业务的实际开发中，都有了长足的进步。

使用 proxy 代替之前的 Object.defineProperty 的API，性能更加优异，也解决了之前vue在处理对象、数组上的缺陷；在diff算法上，使用了静态标记的方式，大大提升了Vue的执行效率。

在使用的层面，我们从options Api，变成了composition Api，慢慢的在实际的业务中，我们抛弃了原本的data、methods、computed那种隔离式的写法。compositon Api，它更加聚焦，它讲究的是相关业务的聚合性。

完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势 -- 前端的未来就是TypeScript！

compositon Api的本质，体现在代码里面，也就是一个setup函数，在这个setup函数中，返回的数据，会用到该组件的模板中。return的这个对象，一定程度上，代表了之前vue2中的data属性。

这时候，对于大多数初学者来说，可能存在的疑惑就是，那么我能不能定义options Api的写法，比如data、computed、watch、methods等等。

这里我需要明确的是，Vue3是完全兼容Vue2的这种options Api的写法，但是从理念上来说，更加推荐setup的方式，来写我们的组件。

原因如下：Vue3的存在，本身是为了解决Vue2的问题的，Vue2的问题就是在于，聚合性不足，会导致代码越来越臃肿！setup的方式，能够让data、方法逻辑、依赖关系等聚合在一块，更方便维护。

也就是说，以后我们尽量不要写单独的data、computed、watch、methods等等，不是Vue3不支持，而是和Vue3的理念违背。

components属性，也就是一个组件的子组件，这个配置在Vue2和3的差异不大，Vue2怎么用，Vue3依然那么用。

在功能方面，ref 和 reactive，都是可以实现响应式数据！

在语法层面，两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据；reactive定义的数据需要[data].[prpoerty]的方式更改数据。

但是在应用的层面，还是有差异的，通常来说：单个的普通类型的数据，我们使用ref来定义响应式。表单场景中，描述一个表单的key:value这种对象的场景，使用reactive；在一些场景下，某一个模块的一组数据，通常也使用reactive的方式，定义数据。

那么，对象是不是非要使用reactive来定义呢？其实不是的，都可以，根据自己的业务场景，具体问题具体分析！ref他强调的是一个数据的value的更改，reactive强调的是定义的对象的某一个属性的更改。

周期函数，在Vue3中，是被单独使用的，使用方式如下：

在Vue2中，其实可以直接通过this.$store进行获取，但是在Vue3中，其实没有this这个概念，使用方式如下：

在Vue2中，是通过this.$router的方式，进行路由的函数式编程，但是Vue3中，是这么使用的：

merchant.ts

这一部分内容，准确的来说，是TS的内容，不过它与Vue3项目开发，息息相关，所以真的想用Vue3，我们还是得了解TS的使用。

不过这一部分，我不会介绍TS的基础语法，主要是在业务场景中，如何组织TS。

在一个常见的接口请求中，我们一般使用TS这么定义一个数据请求，数据请求的req类型，数据请求的res类型。