您现在的位置是:首页 > 正文

vue3系列--reactive实现细节

2024-04-01 04:46:26阅读 2

1.创建proxy

vue3中应用reactive创建一个响应式对象,其中核心的函数就是下面的createReactiveOject,这个函数传入目标的对象,和响应式的map,这个map用于缓存组件所有的reactive对象。
第三个参数是对响应式对象具体属性的get和set方法拦截的操作方法。

function createReactiveObject(target, proxyMap, baseHandlers) {
  // 核心就是 proxy
  // 目的是可以侦听到用户 get 或者 set 的动作

  // 如果命中的话就直接返回就好了
  // 使用缓存做的优化点
  const existingProxy = proxyMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }

  const proxy = new Proxy(target, baseHandlers);

  // 把创建好的 proxy 给存起来,
  proxyMap.set(target, proxy);
  return proxy;
}

2.使用Reflect作为中介,拦截对象的属性的get和set

1中参入的baseHandles就是mutableHandlers ,这个是一个对象,定义了get和set方法

const get = createGetter();
const set = createSetter();
export const mutableHandlers = {
  get,
  set,
};

createSetter 函数内部实现如下:通过使用的Reflect.set方法操作对象的属性,并返回操作的结果(true或者false)

function createSetter() {
  return function set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    //返回值为true或者false
    // 在触发 set 的时候进行触发依赖
    trigger(target, "set", key);

    return result;
  };
}

下面是get 方法,也是通过Reflect获取目标属性值。

 const res = Reflect.get(target, key, receiver);

3.总结

1.对比vue2 ,vue3没有直接改写原本的对象,而是通过proxy代理机制,结合Reflect,来操纵对象

网站文章

  • java 外观设计模式

    java 外观设计模式

    外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。使用时间: 客户端不需要知道系统内部的复杂联系,整个系统只需提供一个"接...

    2024-04-01 04:46:20
  • C++的public继承中的public、private和protected

    C++的public继承中的public、private和protected

        C++语言是对C语言的一种增强,而其主要贡献在于,为C语言增加了类和模板等功能,可以帮助实现面向对象编程和代码复用等更方便的功能。    C++语言的类,一般都包含两种成员,分别是成员变量和成员函数。成员变量可以用来表示该类的某些状态,而成员函数则可以用来对这些成员变量进行操作。而对于这些成员而言,最核心的概念当属类的封装和继承的概念。1. 封装    所谓封装,就是编写一个类...

    2024-04-01 04:45:38
  • 假脱机技术Spooling和守护进程

    假脱机技术Spooling和守护进程

    总结:在假脱机打印系统下,对于每个用户而言,系统并非即时执行其程序输出数据的真实打印操作,而只是即时将数据输出到缓冲区,这时的数据并未真正被打印,只是让用户感觉系统正在为自己打印;当系统引入多道程序技...

    2024-04-01 04:45:30
  • linux centos 安装svn,在CentOS 6.3中安装与配置SVN的方法

    安装说明系统环境:CentOS-6.3安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件检查已安装版本复制代码代码如下:#检查是否安装了低版本的SVN...

    2024-04-01 04:45:22
  • Puppeteer万物皆可爬

    Puppeteer万物皆可爬

    puppeteer 是一个Chrome官方出品的headless Chrome node库。它提供了一系列的API, 可以在无UI的情况下调用Chrome的功能, 适用于爬虫、自动化处理...

    2024-04-01 04:44:44
  • gin post 数据参数_golang--gin获取post里body的参数

    以下内容转载自https://blog.csdn.net/weixin_36344862/article/details/111932206如题,post发送数据有几种形式,form和流是最常用的。特...

    2024-04-01 04:44:32
  • 前端实现图片下载的方法

    在任何方案下,前端都无法绕过跨域的限制,所以需要图片所在的服务器对你当前域名开放权限,否则是无法下载的,最多能做到查看图片。1、直接使用a标签的download属性。2、canvas对象+a标签。3、ajax请求(blob或base64格式)+a标签。4、domtoimage+a标签。5、form表单。6、iframe。

    2024-04-01 04:43:51
  • mybatis运行原理详解

    mybatis运行原理详解

    第一部分:项目结构user_info表:没什么好说的就3个字段User实体类:@Datapublic class User { private Long id; private Strin...

    2024-04-01 04:43:44
  • Leetcode刷题详解——子集

    Leetcode刷题详解——子集

    在递归时我们需要保证递归结束时当前的状态与进行递归操作前的状态不变,而当我们在选择进行步骤2进行递归时,当前状态会发生变化,因此我们需要在递归结束时撤回添加操作,即进行回溯。数组一定存在2^(数组长度...

    2024-04-01 04:43:36
  • 计算机毕业设计/课程设计系列基于SpringBoot的校园问答论坛管理系统

    计算机毕业设计/课程设计系列基于SpringBoot的校园问答论坛管理系统

    本课程演示的是一款基于SpringBoot的校园问答论坛管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。1. 包含:项目源码、项目文档、数据库脚本、软件工具等...

    2024-04-01 04:43:28