【vue3】实现数据响应式（ref、shallowRef、trigger、reactive、shallowReactive、toRef、toRefs）

本文主要是介绍【vue3】实现数据响应式（ref、shallowRef、trigger、reactive、shallowReactive、toRef、toRefs），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、ref、shallowRef、trigger

ref支持所有类型
可以粗略理解为 ref = shallowRef + triggerRef

1、通过ref获取dom元素

<p ref="_ref">这是ref获取dom元素</p>import {ref,shallowRef, triggerRef} from 'vue'const _ref = ref()console.log(_ref.value?.innerText)

2、实现数据响应

import {ref,shallowRef, triggerRef} from 'vue'//reftype M = {name:string,age:number}const personObj= ref<M>({name:'孙悟空',age:90})const fn1= ()=>{personObj.value.name = '白骨精' //视图也会更新console.log(personObj)}//shallowRefconst man = shallowRef ({name:'张三'})const fn1= ()=>{/*** man是shallowRef对象，直接更改value值不会更新视图，调用triggerRef强制更新* 并且会受ref变量personObj更改值的影响(personObj.value.name = '白骨精')* 所以ref和shallowRef不要写在一起* 可以粗略理解为 ref = shallowRef + triggerRef*/man.value.name = '李四'  triggerRef(man)console.log(man) //视图会更新}

二、reactive、shallowReactive

reactive只接收引用类型 array、object、map
shallowReactive与shallowRef的问题一样，shallowReactive只能响应第一层

//对象场景type M2 = {name:string,age:number}let from = reactive<M2>({name:'yyx',age:18})from.age = 90 //不需要.value  和ref不一样，ref取值/赋值都需要.value//数组场景let list = reactive<string[]>([])list = ['aaa','bbb','ccc']//数据异步场景（从接口请求回来）/*** 异步数据不能直接 = 赋值* 通过push* 或者定义为对象，包裹起来*/let list = reactive<string[]>([])setTimeout(() => {const res = ['aaa','bbb','ccc']list.push(...res)  //通过push注入值，不能直接 = 赋值}, 3000);/**或者*/let data = reactive<any>({list:[]})setTimeout(() => {const res = ['aaa','bbb','ccc']data.list = res}, 3000);

三、toRef、toRefs、toRaw

只能对响应式的对象有用，非响应式的 视图毫无变化；
reactive的值被解构出来丢失了响应式，这个时候就要用toRef、toRefs；
为了单独提取对象中的一个，然后变成响应式，可以把toRef、toRefs理解为解构操作；

import {reactive,toRef, toRefs,toRaw} from 'vue'/*** toRef* 一次性解构一个*/const toRef_Obj = reactive({name:'游芸霞',nickname:'fenyin'})/**只更新视图，但是toRef_Obj内的数据并未变化 */let {name,nickname} = toRef_Objname = 'youyunxia' //这样写toRef_Obj的name还是'游芸霞“/**双向响应式，视图、数据都发生变化 */let _toRef_name = toRef(toRef_Obj,'name')_toRef_name.value = 'youyunxia' //这样写toRef_Obj的name就会变成'youyunxia“/*** toRefs* 和toRef一样，只是toRefs一次性解构多个*/let {name,nickname} = toRefs(toRef_Obj)name.value = '张三'console.log('toRefs========',name,nickname)/*** toRaw* 不想要响应式的proxy时，可以用toRaw转化*/console.log('响应式=============',toRef_Obj)console.log('非响应式===========',toRaw(toRef_Obj))

toRaw()效果图

这篇关于【vue3】实现数据响应式（ref、shallowRef、trigger、reactive、shallowReactive、toRef、toRefs）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---