vue3之实现响应式数据ref和reactive

用途

ref、reactive都是vue3提供实现响应式数据的方法

ref()

接受一个内部值，返回一个响应式的、可更改的ref对象，此对象只有一个指向其内部的属性.value

ref可以说是简化版的reactive，与reactive的区别则是

ref是对某一个数据类型的单独双向绑定

使用ref在setup读取的时候需要使用.value的形式template中则不需要.调用

function ref<T>(value: T): Ref<UnwrapRef<T>>interface Ref<T> {value: T
}

reactive()

返回一个对象的响应式代理。

参数必须是对象(json/arr)

本质是转成proxy对象

响应式转换是深层的，它会影响到所有嵌套的属性，一个响应式对象也将深层地解包任何ref属性，同时保持响应性。

shallowReactive浅层次的作用形式

const state = shallowReactive({foo: 1,nested: {bar: 2}
})// 更改状态自身的属性是响应式的
state.foo++// ...但下层嵌套对象不会被转为响应式
isReactive(state.nested) // false// 不是响应式的
state.nested.bar++

toRefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref。每个单独的ref都是使用toRef()创建的。

把一个响应式对象转换为普通对象
对普通对象的每一个属性都进行ref操作

toRefs配合reative使用：

当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性

reactive对象取出的所有属性值都是非响应式的，而利用toRefs可以将一个响应式reactive对象的所有原始属性转换为响应式的ref属性。

function useFeatureX() {const state = reactive({foo: 1,bar: 2})// ...基于状态的操作逻辑// 在返回时都转为 refreturn toRefs(state)
}// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

vue3之实现响应式数据ref和reactive相关推荐

Vue3响应式API ref和reactive
在vue3中,有两个重要的api分别是ref 和reactive 使用方法如下 import { reactive, ref } from 'vue';setup(){let student = re ...
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
文章目录
从数组的响应式看下一代响应式数据
随着MVVM框架的广泛使用响应式数据已经变得耳熟能详,现在谈响应式数据好像有点炒冷饭的意思,对!没错!不过这次炒的是蛋炒饭,而且还是加火腿肠的那种.之前看过几个框架的响应式数据实现,貌似都对数组(Ar ...
【vue3 Api - watchEffect 的讲解使用】- 侦听响应式数据执行副作用(effect)函数
在了解 `watchEffect` api之前,需要了解在vue中,副作用函数的定义是什么: 字面意义的讲,副作用函数指的是会产生副作用的函数,例如下面该函数: var num = 10 functi ...
vue3解读—reactivity响应式实现
前言:Vue3 中引入了proxy进行数据劫持,而effect是响应式系统的核心,而响应式系统又是 vue3 中的核心,所以vue3的解读要从 effect 开始讲起. 1.reactivity和ef ...
reactive函数实现响应式数据
使用reactive函数可以定义对象类型.数组类型的响应式数据. 看个具体的例子. 入口文件main.js import { createApp } from 'vue'; import App fr ...
Day 15-其它 Composition API_ 响应式数据的判断
响应式数据的判断 isRef: 检查一个值是否为一个 ref 对象. isReactive: 检查一个对象是否是由 reactive 创建的响应式代理. isReadonly: 检查一个对象是否是由 ...
【Vue3中的响应式原理】
Vue3响应式原理在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题.但是在Vue3中,这些问题都得以解决. Vue2中的响应式原理首先我们先看一下V ...
Vue响应式数据基本讲解（2.0和3.0）
响应式数据一.何为响应式在我们的程序中,总是需要去修改JS变量中的数据,然后使得页面中的内容也跟着变化,如下面的代码 <body><p>姓氏: <span class ...