文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

面试官:Vue3中什么是Reactive的懒响应性?

2024-11-29 23:40

关注

Reactive 的懒响应性 可能很多同学之前没有听说过这个概念。最近一个同学在面试中就被问到了这个问题。所以说,咱们今天就借助这篇文章来看下:在vue3中,什么是 Reactive 的懒响应性?

01:Reactive 的实现原理

Reactive 是基于 Proxy 进行实现的,这个概念很多同学都是知道的。我们可以通过 vue 的源码来看下这个实现:

图片

代码比较复杂,大家可以只看我红框中的内容

通过上图红框中的代码,我们可以很清晰的看到在 Reactive 里面,Vue 最终通过 new Proxy 的方式生成了一个 Proxy 的实例对象。 这个 Proxy 的实例就是 reactive() 方法调用时的返回值。

我们可以通过如下伪代码表示:

function reactive (target) {
  return new Proxy(target, {....})
}

const test = reactive({name: '张三'})

在这种情况下,{name: '张三'} 就会被包装成一个 响应式对象,proxy 通过监听它的 getter、setter 行为来触发响应性。

02:Proxy 的问题

Proxy 可以代理对象,这个是没有问题的。但是:Proxy 只能代理一层对象,而不能代理多层。

什么意思呢?假如当 代理对象 具备层级嵌套的时候,proxy 是不可以代理子层级的。我们可以通过以下代码来进行测试:

const target = {
    name: '张三',
    child: {
      name: '小张三'
    }
  }

  const p = new Proxy(target, {
    set(target, property, value, receiver) {
      console.log('触发了 set');
      target[property] = value
      return true
    },
    get(target, property, receiver) {
      console.log('触发了 get');
      return target[property]
    }
  })

  p.name = '李四'  // 打印:触发了 set
  p.child.name = '小李四' // 打印:触发了 get。注意:并没有触发 child 的 set

在上述代码中,我们利用 proxy 代理了 target 对象。注意:此时的 target 是存在嵌套的复杂数据类型 child。

当我们执行 p.name = '李四' 时,触发 set 行为,这是一个很正常的逻辑。但是,当我们执行 p.child.name = '小李四' 时,我们会发现 仅触发了一个 get(p.child),而没有触发 set 行为。

这就证明:对于 Proxy 而言, 它只能代理 一层 的复杂数据类型,而不可以代理多层。

但是,在 Vue 中 多层的 Reactive 对象却可以实现响应性,那么这是如何做到的呢? 具体的方式就是 Reactive的懒响应性。

03:Reactive的懒响应性

我们观察 Vue 的源码,在源码监听 proxy getter 行为的地方,存在这样一段代码(我把代码稍微做了一些调整,让大家看的可以更加清晰):

图片

核心的代码就在红框的位置,其中的 res 大家可以理解为 target[property] 。

而根据 01:Reactive 的实现原理 我们知道 reactive 方法本质上就是生成了一个 Proxy 实例。所以说,这里的代码核心其实就是 一旦获取到的属性是对象,则会为该对象再次执行 reactive 方法

如果用伪代码表示,就是下面这样:

图片

即:再次通过 Proxy 完成代理,并返回

所以说,所谓的 Reactive的懒响应性 指的就是:Reactive 最初只会为复杂数据类型执行第一层的响应性。如果存在多层的复杂数据类型嵌套时,则会在使用到(getter 行为)该子集时,才会再次为该子集包装 proxy(执行 reactive 方法)

来源:程序员Sunday内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯