vue Ref 和 Reactive 原理解析

ops/2024/9/22 10:59:11/

文章目录

  • Ref
  • Reactive

Ref

  • ref 的语义是指向一个值的引用,主要用于处理基本数据类型和单一值对象,即对值的引用进行包装和管理,而不是对对象的操作进行拦截,对于基础类型通过 getter 和 setter 实现拦截
  • 使用 Proxy 拦截对象的所有操作(如 get、set、deleteProperty 等),这是一个强大的 API,但同时也带来一定的性能开销。对于基础的响应式处理,使用 Proxy 显得过于繁重
  • ref 更适合用于单一值的场景,它的设计初衷就是为了处理这些简单情况,通过 getter 和 setter 可以更简洁地实现响应式
  • 但是如果 ref 在处理对象时,会将对象转换为响应式对象。这种转换实际上是通过 reactive 实现的,即在 ref 中如果传递的是对象类型,最终会使用 Proxy 来实现响应式功能。
javascript">export function ref(value?: unknown) {return createRef(value, false);
}function createRef(rawValue: unknown, shallow: boolean) {if (isRef(rawValue)) {return rawValue;}return new RefImpl(rawValue, shallow);
}class RefImpl<T> {private _value: T;private _rawValue: T;constructor(value: T, public readonly __v_isShallow: boolean) {this._rawValue = value;this._value = __v_isShallow ? value : toReactive(value);}get value() {trackRefValue(this);return this._value;}set value(newVal) {if (hasChanged(newVal, this._rawValue)) {this._rawValue = newVal;this._value = toReactive(newVal);triggerRefValue(this);}}
}// 判断 ref 的引用值是否是对象
function toReactive(value: any): any {return isObject(value) ? reactive(value) : value;
}

Reactive

  • reactive 主要用于将复杂对象变成响应式对象,这些对象可能包含嵌套的结构。对于这种情况,Proxy 是更合适的工具,因为它能够拦截和处理对象的所有操作,确保对象及其嵌套结构的每个部分都是响应式的
javascript">export function reactive(target: object) {if (isReadonly(target)) {return target;}return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);
}function createReactiveObject(target: Target,isReadonly: boolean,baseHandlers: ProxyHandler<any>,collectionHandlers: ProxyHandler<any>
) {if (!isObject(target)) {if (__DEV__) {console.warn(`value cannot be made reactive: ${String(target)}`);}return target;}const proxy = new Proxy(target,collectionType ? collectionHandlers : baseHandlers);return proxy;
}export const mutableHandlers: ProxyHandler<object> = {get,set,deleteProperty,has,ownKeys
};

http://www.ppmy.cn/ops/86648.html

相关文章

电脑屏幕录制软件,分享4款(2024最新)

在今天&#xff0c;我们的电脑屏幕成为了一个多彩多姿的窗口。通过它我们可以浏览网页、观看视频、处理文档、进行游戏……有时&#xff0c;我们想要记录下这些精彩瞬间&#xff0c;与朋友分享&#xff0c;或者作为教程留存&#xff0c;这时&#xff0c;电脑屏幕录制就显得尤为…

燃气安全无小事,一双专业劳保鞋让你步步安心!

燃气作为我们日常生活中不可或缺的能源之一&#xff0c;为我们的生活提供了极大便利&#xff0c;其安全性往往被忽视在忙碌的日常生活背后。然而&#xff0c;燃气事故一旦发生&#xff0c;后果往往不堪设想&#xff0c;轻则财产损失&#xff0c;重则危及生命。因此&#xff0c;…

Java—常见4种线程池详解

一、概述 java中线程池是一种基于池化技术的多线程资源管理方式&#xff0c;用于减少线程创建和销毁的开销&#xff0c;提高系统性能。java提供了几种常见的的线程池实现&#xff0c;主要通过Executors工厂类创建。 二、常见线程池 1、SingleThreadExecutor SingleThreadEx…

原生JavaScript系列面试题

大家好&#xff0c;我是有用就点赞&#xff0c;有用就扩散。 1.__ proto __ 和prototype之间有什么关系&#xff1f; 在JavaScript中万物皆对象&#xff0c;所有对象都有__ proto __ 属性&#xff0c;函数这个特殊对象除了具有__ proto __ 属性&#xff0c;还有特有的原型属性…

【React】useState:状态更新规则详解

文章目录 一、基本用法二、直接修改状态 vs 使用 setState 更新状态三、对象状态的更新四、深层次对象的更新五、函数式更新六、优化性能的建议 在 React 中&#xff0c;useState 是一个非常重要的 Hook&#xff0c;用于在函数组件中添加状态管理功能。正确理解和使用 useState…

用Python打造精彩动画与视频.2.1 Python基础语法概述

2.1 Python基础语法概述 Python作为一门功能强大且易于学习的编程语言&#xff0c;其基础语法简单直观&#xff0c;非常适合初学者入门。这一节将带你了解Python的基本语法规则&#xff0c;为后续制作动画和视频打下坚实的基础。 1. 变量与数据类型 Python的变量不需要提前声…

shopee虾皮 java后端 一面面经 整体感觉不难

面试总结&#xff1a;总体不难&#xff0c;算法题脑抽了只过了一半&#xff0c;面试官点出了问题说时间到了&#xff0c;反问一点点&#xff0c;感觉五五开&#xff0c;许愿一个二面 1.Java中的锁机制&#xff0c;什么是可重入锁 Java中的机制主要包括 synchronized关键字 Loc…

Typescript学习笔记(2.0)

ts编译选项 tsc app.ts -w 参数-w&#xff0c;就是对app.ts进行监视&#xff0c;每次该文件改变时就会自动编译 **:任意目录 *&#xff1a;任意文件 接口 接口用来定义一个类结构&#xff0c;用来定义一个类中应该包含哪些属性和方法&#xff0c;同时接口也可以当做类型…