您现在的位置是：网站首页> 编程资料编程资料

Vue3中的ref和reactive响应式原理解析_vue.js_

2023-05-24 332人已围观

简介 Vue3中的ref和reactive响应式原理解析_vue.js_

1 ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个.valueproperty，指向该内部值。

案例

我们这样操作是无法改变message 的值应为message 不是响应式的无法被vue 跟踪要改成ref。响应式就是在页面上实时显示修改的值。

Ref TS对应的接口：

interface Ref { value: T } // 对于接口问题，是TS语法，如果不清楚，直接看TS

但是被ref包裹后需要使用value来进行赋值。

2 isref判断是不是一个ref对象

import { ref, Ref,isRef } from 'vue' let message: Ref = ref("我是message") let notRef:number = 123 const changeMsg = () => { message.value = "change msg" console.log(isRef(message)); //true console.log(isRef(notRef)); //false }

3 shallowref创建一个跟踪自身.value变化的 ref，但不会使其值也变成响应式的

例子1

修改其属性是非响应式的这样是不会改变的

例子2

这样是可以被监听到的修改value，必须要修改整个对象才行

import { Ref, shallowRef } from 'vue' type Obj = { name: string } let message: Ref = shallowRef({ name: "唐少" }) const changeMsg = () => { message.value = { name: "唐少2" } }

4 triggerRef

为了解决shallowRef的问题，我们强制更新页面DOM，这样也是可以改变值的

5 customRef

自定义ref ，customRef 是个工厂函数要求我们返回一个对象并且实现 get 和 set

6 reactive用来绑定复杂的数据类型

例如对象数组

reactive源码约束了我们的类型，类型必须是object，不能绑定普通的类型，会报错。你如果用ref去绑定对象或者数组等复杂的数据类型我们看源码里面其实也是去调用reactive，但使用reactive 去修改值无须.value

reactive 基础用法

import { reactive } from 'vue' let person = reactive({ name:"唐少" }) person.name = "唐少2"

数组异步赋值问题

// 这样赋值页面是不会变化的因为会脱离响应式
let person = reactive([]) setTimeout(() => { person = [1, 2, 3] console.log(person); },1000)

解决方案1:push

import { reactive } from 'vue' let person = reactive([]) setTimeout(() => { const arr = [1, 2, 3] person.push(...arr) console.log(person); },1000)

解决方案2：包裹一层对象

type Person = { list?:Array } let person = reactive({ list:[] }) setTimeout(() => { const arr = [1, 2, 3] person.list = arr; console.log(person); },1000)

7 readonly

拷贝一份proxy对象将其设置为只读

import { reactive ,readonly} from 'vue' const person = reactive({count:1}) const copy = readonly(person) //person.count++ copy.count++

8 shallowReactive

只能对浅层的数据如果是深层的数据只会改变值不会改变视图

9toRef

如果原始对象是非响应式的就不会更新视图数据是会变的，如果原始对象是响应式的是会更新视图并且改变数据的

10toRefs

可以帮我们批量创建ref对象主要是方便我们解构使用

import { reactive, toRefs } from 'vue' const obj = reactive({ foo: 1, bar: 1 }) let { foo, bar } = toRefs(obj) foo.value++ console.log(foo, bar);

11toRaw

将响应式对象转化为普通对象

import { reactive, toRaw } from 'vue' const obj = reactive({ foo: 1, bar: 1 }) const state = toRaw(obj) // 响应式对象转化为普通对象 const change = () => { console.log(obj, state); }

到此这篇关于Vue3中的ref和reactive响应式的文章就介绍到这了,更多相关Vue3 ref和reactive响应式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：详解Vue3中的watch侦听器和watchEffect高级侦听器_vue.js_

下一篇：Vue3中的模板语法和vue指令_vue.js_