vue3.3中ref和reactive原理源代码分析

这篇具有很好参考价值的文章主要介绍了vue3.3中ref和reactive原理源代码分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

源码是ts编写的,这里部分简化成js便于阅读

function ref(value) {
  return createRef(value, false)
}

function createRef(rawValue, shallow) { //shallow是否是浅层定义数据,用于区别ref和shallowRef
  if (isRef(rawValue)) {//如果已经是ref直接返回源数据
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(
    value: T,//第一个参数value:传入的源数据
    public readonly __v_isShallow: boolean //第二个参数__v_isShallow:是否是浅层次响应的属性
  ) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)//初始化数据如果是已经包装过的__v_isShallow就是true,否则通过toReactive包装传入的参数
  }

  get value() {
    trackRefValue(this) //依赖收集
    return this._value
  }

  set value(newVal) {
    const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal)//判断是否已经是vue包装过的对象
    newVal = useDirectValue ? newVal : toRaw(newVal)
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal
      this._value = useDirectValue ? newVal : toReactive(newVal)//如果已经包装过返回源数据,否则通过toReactive包装传入的参数
      triggerRefValue(this, newVal)//触发响应式更新
    }
  }
}

toReactive = (value) => isObject(value) ? reactive(value) : value //基本数据类型通过class类依赖收集触发更新,引用数据类型通过Proxy代理实现

isObject = (val) => val !== null && typeof val === 'object' //上面用到的函数:判断是否是一个对象

//reactive()函数调用createReactiveObject函数(内部通过new Proxy())创建响应式数据,如下:
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
) {
  if (!isObject(target)) { //如果不是对象直接返回源数据,所以必须传入对象才有效
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only specific value types can be observed.
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy(//创建Proxy代理
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

总结:

ref() 函数通过调用new RefImpl(rawValue, shallow)这个class类来包装数据,内部有value属性(可读get通过trackRefValue收集依赖;可写set通过triggerRefValue更新依赖), 传入的值会调用toReactive函数进行封装. 
toReactive = (value) => isObject(value) ? reactive(value) : value

isObject = (val) => val !== null && typeof val === 'object'

reactive()函数调用createReactiveObject函数(内部通过new Proxy())创建响应式数据

ref:定义基本数据类型通过class类中的value属性依赖收集触发更新;定义引用数据类型会调用reactive()实现数据代理

reactive:只用于定义引用数据类型,通过Proxy代理实现

附源码地址 https://github.com/vuejs/core/tree/v3.3.4/packages/reactivity/src文章来源地址https://www.toymoban.com/news/detail-682555.html

到了这里,关于vue3.3中ref和reactive原理源代码分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3使用ref和reactive

    目录 ​​​​​​​ vue3使用ref和reactive的方法 1.ref 2.reactive Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例: 1.示例 2.示例说明 vue3使用ref和reactive的方法 Vue 3引入了两个新的API, ref 和 reactive ,用于创建响应式对象。这两个方法都位于 Vue.prototype 上,因此可以在组件实例

    2024年02月08日
    浏览(47)
  • Vue3的ref和reactive

    目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据,返回值是一个对象 模版中使用ref数据,省略.value,js代码中不能省略 获取ref创建数据的值要加上.value   reactive创建响应式 reac

    2024年01月24日
    浏览(47)
  • vue3 ref 和 reactive 区别

    最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到 响应式数据问题,经百度查找相关笔记 ,在此记录一下,在实战中成长吧。 出现的问题 : 定义一个默认数组并且 for 循环展示,后端返回数据并且赋值到数组中,但是展示的值并不会修改 原因 : 在 js 中

    2023年04月09日
    浏览(62)
  • vue3 自动引入 ref reactive...

    npm i unplugin-auto-import -D vite.config.js Q : typescript 报错:‘reactive’ is not defined. A : TS 未识别到 vue api,没有相应的模块声明文件, 在 vite 中配置并生成 auto-imports.d.ts ,并在 tsconfig.json 中引入 vite.config.js tsconfig.json Q: eslint 无法识别报错 error ‘reactive’ is not defined no-undef A: 未配置

    2024年01月25日
    浏览(40)
  • ST电机库v5.4.4源代码分析(1): FOC原理(结合ST电机库)

    编者:沉尸 (5912129@qq.com) 本文字描述电机FOC的原理性内容,大部分取材于网络,但是我对于某些细节进行了比较详细的描述。因为很多最初的出处链接没有记录下来,所以没有标明,忘谅解!本文字不会用于任何商业行为!  设计目标: 电流流经三个绕组会产生磁场,我们希

    2024年01月17日
    浏览(37)
  • 谈谈Vue3中的ref和reactive

    一、是什么? ref和reactive是Vue3中用来实现 数据响应式的API 一般情况下, ref 定义基本数据类型, reactive 定义引用数据类型 (我喜欢用它来定义对象,不用它定义数组,原因后面讲) 我理解的 ref本质上是reactive的再封装 二、先聊reactive reactive定义引用数据类型(以对象和数

    2023年04月21日
    浏览(38)
  • vue3中reactive和ref的比较

              用函数调用的方式生成响应式数据   推荐使用ref函数,更加灵活,小兔鲜项目主用ref

    2024年02月12日
    浏览(44)
  • vue3中的ref 和 reactive 定义数组

    在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型 但是也可以使用 ref 来定义数组 两种情况:定义时就将数组初始化、定义时未初始化数组 初始化数组 未初始化数组 但是这样定义的会出现

    2024年02月15日
    浏览(44)
  • vue3中 reactive和ref的区别

    在Vue 3中,reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。 reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象,并返回一个被代理的响应式对象。这意味着当响应式对象的属性发生更改时,Vue会自动检测到并重新

    2024年02月07日
    浏览(35)
  • Vue3 中应该使用 Ref 还是 Reactive?

    你可能会好奇:为什么我们需要使用带有  .value  的 ref,而不是普通的变量?为了解释这一点,我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。 当你在模板中使用了一个 ref,然后改变了这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一

    2024年02月20日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包