代码编织梦想

refreactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别:

ref 定义单个响应式数据

  • 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。
  • 返回一个响应式对象,该对象包含一个 .value 属性,可用于获取和设置数据。
  • 底层采用Object.defineProperty()实现

reactive 定义多个响应式数据

  • 数据类型必须是对象
  • 返回一个响应式对象,必须使用响应式对象来获取属性和设置数据
  • 底层采用的是new Proxy()

reactive源码解析

在vue3源码里,reactive的实现在core-main\packages\reactivity\src\reactive.ts文件中

 reactive是一个函数,接收传入的target对象。返回一个createReactiveObject方法。

 reactive的核心逻辑在createReactiveObject方法中。

  • 首先校验传入的target必须是对象;
  • 通过new Proxy创建一个代理对象,根据对象的类型走不同的handler处理逻辑;
  • 返回代理对象proxy

proxy是怎么代理的?

手写一个简易的reactive,看下handler里是什么

  let handler = {
    //拦截整个对象,访问对象的属性时get拦截器触发
    get(target, key) {
      let value = target[key];
      if (typeof value === "object") {
        //如果访问的对象属性还是对象,进行递归
        return new Proxy(value, handler);
      }
      return value;
    },
    //拦截整个对象,当修改对象的属性的时候set拦截器会触发
    set(target, key, value) {
      target[key] = value;
    },
  };
  function reactive(target) {
    return new Proxy(target, handler);
  }

  let obj = { name: "jw", age: 30, n: [1, 2, 3, 4, 5] };
  //拿到obj的代理对象proxyObj
  const proxyObj = reactive(obj);
  //不访问obj,访问代理对象proxyObj
  console.log(proxyObj.name); //触发get拦截器
  proxyObj.age = 31; //触发set拦截器
  proxyObj.name = 100; //设置一个不存在的属性

handler 对象中,可以定义多个方法来控制代理对象的行为。在响应式reactive中,handler主要用了get和set两个方法。(是不是很熟悉?Object.defineProperty也有get和set方法,只不过是针对属性的;proxy这个是针对对象的,所以不一样哦

  • get(target, property, receiver):拦截对象属性的读取操作,当访问代理对象的属性时会触发该方法。
  • set(target, property, value, receiver):拦截对象属性的设置操作,当给代理对象的属性赋值时会触发该方法。

 这样每次你通过访问代理对象proxyObj访问的属性,都会被handler的get方法拦截,进而收集依赖。对proxyObj修改属性值的时候,被handler的set方法拦截,进行依赖更新。

注意:你不是操作原始对象obj,而是操作的代理对象proxyObj

ref源码原理

在解析源码之前,先思考一个问题

为什么ref定义后的对象可以通过.value 访问和设置数据?

你有没有想过,为什么使用ref定义的对象或基本类型,在js里写的时候都需要用.value啊。

这里不得不提到一个特殊的名称——typeScript类的属性访问器:get和set属性。

get 和 set 属性是一种在类中定义属性的方式,可以用来实现类的属性的读取和写入操作。基本语法如下:

class MyClass {
  private _propertyName: any;
  get propertyName(): any {
    console.log("读取数据,自动进入get方法");
    return this._propertyName;
  }
  set propertyName(value: any) {
    this._propertyName = value;
    console.log("更新数据,自动进入set方法");
  }
}

在上面的例子中,propertyName 是一个类的属性,它使用 get 和 set 属性定义在 MyClass 类中。在类的外部,可以使用点操作符来读取和写入 propertyName 属性,例如:

const myObject = new MyClass();
myObject.propertyName = 'hello';//更新
console.log(myObject.propertyName); //访问

执行结果

当在类的外部读取 propertyName 属性时,会调用 propertyName 的 get 属性,返回 _propertyName 的值。当在类的外部写入 propertyName 属性时,会调用 propertyName 的 set 属性,将值赋给 _propertyName 属性。

为什么在类里这样写可以触发get和set呢?

这个是ts提供了一种写法,当我们在控制台使用tsc进行编译成.js文件后。

得到如下代码

var MyClass = /** @class */ (function () {
    function MyClass() {
    }
    Object.defineProperty(MyClass.prototype, "propertyName", {
        get: function () {
            console.log("读取数据,自动进入get方法");
            return this._propertyName;
        },
        set: function (value) {
            this._propertyName = value;
            console.log("更新数据,自动进入set方法");
        },
        enumerable: false,
        configurable: true
    });
    return MyClass;
}());
var myObject = new MyClass();
myObject.propertyName = "hello";
console.log(myObject.propertyName);

可以看到,最终propertyName编译成一个属性,并且通过Object.defineProperty进行了get和set方法的重写。 

OK,先说到这,带着这个理解去看ref的源码

vue3中ref实现

 在vue3源码里,ref的实现也是在reactivity文件夹下:core-main\packages\reactivity\src\ref.ts

 ref是一个函数,接收一个unknown类型的参数value;

返回一个createRef方法,第一个参数是value,第二个参数是false.

 createRef最终返回一个RefImpl实例对象。在RefImp类里,首先通过构造函数,创建一个_value对象。toReactive根据value类型,如果是对象的话,用reactive方法处理对象。

RefImpl类还定义了get和set方法,在类里使用"get空格value"这种方式很少见。这其实是ts类的属性访问器写法,当使用 .value 属性来获取或设置数据时,会自动调用 getset 访问器函数。

在底层,这种写法会被编译成 Object.defineProperty,这是 JavaScript 中用于定义对象属性的原生方法。使用 Object.defineProperty 可以定义对象的属性的特性,如可枚举性、可配置性、可写性等,并可以为属性设置 getset 函数,从而实现属性的访问器功能。(前面已经介绍过原理了

toReactive方法做了什么?

toReactive就是判断ref传入的是不是对象,如果是对象,去调用reactive方法将对象变成响应式的。ref这个老六,就是万精油,啥都能处理。

 思考:为什么你更习惯使用ref而不是reactive?

在Vue3中,无论是基本类型还是复杂类型的响应式数据,都推荐使用ref来创建。这样做的好处是,你可以统一使用.value属性来访问和修改响应式数据的值,而不需要在基本类型和复杂类型之间切换使用方式。

  1. 简单性ref 提供了一种简单的方式来定义响应式对象,只需传入初始值即可。相比之下,reactive 需要将整个对象传入,稍显繁琐。对于单个变量或简单数据,使用 ref 更加直观和方便。

  2. 透明性ref 返回的是一个包装过的对象,可以通过 .value 访问其值,这种包装使得数据访问更加明确和直观。而 reactive 返回的是原始对象,需要通过代理访问属性,有时会增加代码的复杂性。(复杂的代码谁想写啊)

  3. 性能:在某些情况下,ref 比 reactive 更高效。因为 ref 包装的是基本类型数据,而 reactive 包装的是对象,对于简单数据类型,ref 的性能可能更好。

  4. 推荐度:Vue 3 官方文档和社区更倾向于推荐使用 ref,因为它更简单、更直观,适用于大多数场景。而 reactive 更适合处理复杂的对象或数据结构。

尽管程序员通常建议使用 ref,但在实际开发中,根据具体情况选择合适的方式是更为重要的。对于简单的数据,使用 ref 可能更加方便和直观;而对于复杂的对象或数据结构,使用 reactive 可能更合适。

 看到这的,给我来波666,太烧脑了

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36384657/article/details/137157585

【vue3源码】七、reactive——object的响应式实现_maxlz的博客-爱代码爱编程

【vue3源码】七、reactive——Object的响应式实现 参考代码版本:vue 3.2.37 官方文档:https://vuejs.org/ reactive返回一个对象的响应式代理。 使用 co

解析vue3源码(一)——reactive_vue3 reactive源码-爱代码爱编程

解析Vue3源码(一)——reactive 前言reactive的源码总结 前言 不同于Vue2,Vue3声明响应式数据不是在$options.data()中声明而是需手动创建。区别如下 v

vue3 +ts 动态绑定 响应式数组-爱代码爱编程

看这段代码,先定义接口,然后再定义ref: //定义ts 接口类型 interface editFormDataType {   label: string | number | boolean   value: string | number | boolean   prop: string } //需要绑定变量 editFormDa

ant design vue 中 upload 组件实现添加下载图标及触发download事件-爱代码爱编程

使用Ant Design Vue 中 Upload组件时,经常遇见附件上传的一些问题,本次汇总记录下遇见的问题及解决方案,以免后续忘记又浪费时间苦思冥想的...... 给上传组件添加下载图标,解决download的事件不执

ant design vue 的ele-爱代码爱编程

1.不显示: :footer="null" <ele-modal :width="1200" :visible="visible" :confirm-loading="loading" title="监控点" :body-style="{ paddingBottom: '8p

对于 vue 是一套渐进式框架的理解-爱代码爱编程

渐进式代表的含义是:没有多做职责之外的事。 vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定,像vuex、vue-router都属于围绕vue.js开发的库。 要使用Angular,必须接受以下东西: 1、必须使用它的模块机制。 2、必须使用它的依赖注入。 3、必须使用它的特殊形式定义组件(这一点每个视图

vue中年月日转换问题-爱代码爱编程

把2024-03-30 转化成 2024年03月30号 htm中 <div> {{item.key}}--------- <span

vue如何实现自定义组件改变组件背景色?-爱代码爱编程

  要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中。以下是一个简单的示例代码。 创建一个 Vue 自定义组件,

vue的数据为什么频繁变化但只会更新一次-爱代码爱编程

或者这样问:Vue在一个tick中多次更新数据页面只会更新一次(主线程的执行过程就是一个tick) 检测到数据变化开启一个队列在同一事件循环中缓冲所有数据改变如果同一个 watcher (watcherId相同)被多次触发,只会被推入到队列中一次 vue.js 在处理数据变化时,采用了虚拟 DOM 和差异算法来优化渲染性能。当你看到数据频繁变化但只更新