Vue3知识点之数据侦测

news2024/9/22 23:28:11

Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图。

实现可响应对象的方式

通过可响应对象,实现对数据的侦测,从而告知外界数据变化。实现可响应对象的方式:

  1. getter 和 setter
  2. defineProperty
  3. Proxy

关于前两个 API 的使用方式不多赘述,单一的访问器 getter/setter 功能相对简单,而作为 Vue2.x 实现可响应对象的 API - defineProperty
API 本身存在较多问题。

Vue2.x 中,实现数据的可响应,需要对 ObjectArray 两种类型采用不同的处理方式。 Object 类型通过 Object.defineProperty 将属性转换成 getter/setter ,这个过程需要递归侦测所有的对象 key,来实现深度的侦测。

为了感知 Array 的变化,对 Array 原型上几个改变数组自身的内容的方法做了拦截,虽然实现了对数组的可响应,但同样存在一些问题,或者说不够方便的情况。
同时,defineProperty 通过递归实现 getter/setter 也存在一定的性能问题。

更好的实现方式是通过 ES6 提供的 Proxy API

Proxy API 的一些细节

Proxy API 具有更加强大的功能,
相比旧的 defineProperty API ,Proxy 可以代理数组,并且 API 提供了多个 traps ,可以实现诸多功能。

这里主要说两个trap: getset , 以及其中的一些比较容易被忽略的细节。

细节一:trap 默认行为

let data = { foo: 'foo' }
let p = new Proxy(data, {
  get(target, key, receiver) {
    return target[key]
  },
  set(target, key, value, receiver) {
    console.log('set value')
    target[key] = value // ?
  }
})

p.foo = 123

// set value

通过 proxy 返回的对象 p 代理了对原始数据的操作,当对 p 设置时,便可以侦测到变化。但是这么写实际上是有问题,
当代理的对象数据是数组时,会报错。

let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    return target[key]
  },
  set(target, key, value, receiver) {
    console.log('set value')
    target[key] = value
  }
})

p.push(4) // VM438:12 Uncaught TypeError: 'set' on proxy: trap returned falsish for property '3'

将代码更改为:

let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    return target[key]
  },
  set(target, key, value, receiver) {
    console.log('set value')
    target[key] = value
    return true
  }
})

p.push(4)

// set value // 打印2次

实际上,当代理对象是数组,通过 push 操作,并不只是操作当前数据,push 操作还触发数组本身其他属性更改。

let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log('get value:', key)
    return target[key]
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    target[key] = value
    return true
  }
})

p.push(1)

// get value: push
// get value: length
// set value: 3 1
// set value: length 4

先看 set 操作,从打印输出可以看出,push 操作除了给数组的第 3 位下标设置值 1 ,还给数组的 length 值更改为 4同时这个操作还触发了 get 去获取 pushlength 两个属性。

我们可以通过 Reflect 来返回 trap 相应的默认行为,对于 set 操作相对简单,但是一些比较复杂的默认行为处理起来相对繁琐得多,Reflect 的作用就显现出来了。

let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log('get value:', key)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    return Reflect.set(target, key, value, receiver)
  }
})

p.push(1)

// get value: push
// get value: length
// set value: 3 1
// set value: length 4

相比自己处理 set 的默认行为,Reflect 就方便得多。

细节二:多次触发 set / get

从前面的例子中可以看出,当代理对象是数组时,push 操作会触发多次 set 执行,同时,也引发 get 操作,这点非常重要,vue3 就很好的使用了这点。
我们可以从另一个例子来看这个操作:

let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log('get value:', key)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    return Reflect.set(target, key, value, receiver)
  }
})

p.unshift('a')

// get value: unshift
// get value: length
// get value: 2
// set value: 3 3
// get value: 1
// set value: 2 2
// get value: 0
// set value: 1 1
// set value: 0 a
// set value: length 4

可以看到,在对数组做 unshift 操作时,会多次触发 getset
仔细观察输出,不难看出,get 先拿数组最末位下标,开辟新的下标 3 存放原有的末位数值,然后再将原数值都往后挪,将 0 下标设置为了 unshift 的值 a ,由此引发了多次 set 操作。

而这对于 通知外部操作 显然是不利,我们假设 set 中的 console 是触发外界渲染的 render 函数,那么这个 unshift 操作会引发 多次 render

我们后面会讲述如何解决相应的这个问题,继续。

细节三:proxy 只能代理一层

let data = { foo: 'foo', bar: { key: 1 }, ary: ['a', 'b'] }
let p = new Proxy(data, {
  get(target, key, receiver) {
      console.log('get value:', key)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    return Reflect.set(target, key, value, receiver)
  }
})

p.bar.key = 2

// get value: bar

执行代码,可以看到并没有触发 set 的输出,反而是触发了 get ,因为 set 的过程中访问了 bar 这个属性。
由此可见,proxy 代理的对象只能代理到第一层,而对象内部的深度侦测,是需要开发者自己实现的。同样的,对于对象内部的数组也是一样。

参考 Vue面试题详细解答

p.ary.push('c')

// get value: ary

同样只走了 get 操作,set 并不能感知到。

我们注意到 get/set 还有一个参数:receiver ,对于 receiver ,其实接收的是一个代理对象:

let data = { a: {b: {c: 1 } } }
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log(receiver)
      const res = Reflect.get(target, key, receiver)
    return res
  },
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver)
  }
})

// Proxy {a: {…}}

这里 receiver 输出的是当前代理对象,注意,这是一个已经代理后的对象。

let data = { a: {b: {c: 1 } } }
let p = new Proxy(data, {
  get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver)
    console.log(res)
    return res
  },
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver)
  }
})

// {b: {c: 1} }

当我们尝试输出 Reflect.get 返回的值,会发现,当代理的对象是多层结构时,Reflect.get 会返回对象的内层结构。

记住这一点,Vue3 实现深度的proxy ,便是很好的使用了这点

解决 proxy 中的细节问题

前面提到了使用 Proxy 来侦测数据变化,有几个细节问题,包括:

  1. 使用 Reflect 来返回 trap 默认行为
  2. 对于 set 操作,可能会引发代理对象的属性更改,导致 set 执行多次
  3. proxy 只能代理对象中的一层,对于对象内部的操作 set 未能感知,但是 get 会被执行

接下来,我们将先自己尝试解决这些问题,后面再分析 Vue3 是如何解决这些细节的。

setTimeout 解决重复 trigger

function reactive(data, cb) {
  let timer = null
  return new Proxy(data, {
    get(target, key, receiver) {
      return Reflect.get(target, key, receiver)
    },
    set(target, key, value, receiver) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        cb && cb()
      }, 0);
      return Reflect.set(target, key, value, receiver)
    }
  })
}

let ary = [1, 2]
let p = reactive(ary, () => {
  console.log('trigger')
})
p.push(3)

// trigger

程序输出结果为一个: trigger

这里实现了 reactive 函数,接收两个参数,第一个是被代理的数据 data ,还有一个回调函数 cb
我们这里先简单的在 cb 中打印 trigger 操作,来模拟通知外部数据的变化。

解决重复的 cb 调用有很多中方式,比方通过标志,来决定是否调用。而这里是使用了定时器 setTimeout
每次调用 cb 之前,都清除定时器,来实现类似于 debounce 的操作,同样可以解决重复的 callback 问题。

解决数据深度侦测

目前还有一个问题,那便是深度的数据侦测,我们可以使用递归代理的方式来实现:

function reactive(data, cb) {
  let res = null
  let timer = null

  res = data instanceof Array ? []: {} 

  for (let key in data) {
    if (typeof data[key] === 'object') {
      res[key] = reactive(data[key], cb)
    } else {
      res[key] = data[key]
    }
  }

  return new Proxy(res, {
    get(target, key) {
      return Reflect.get(target, key)
    },
    set(target, key, val) {
      let res = Reflect.set(target, key, val)
      clearTimeout(timer)
      timer = setTimeout(() => {
        cb && cb()
      }, 0)
      return res
    }
  })
}

let data = { foo: 'foo', bar: [1, 2] }
let p = reactive(data, () => {
  console.log('trigger')
})
p.bar.push(3)

// trigger

对代理的对象进行遍历,对每个 key 都做一次 proxy,这是递归实现的方式。
同时,结合前面提到的 timer 避免重复 set 的问题。

这里我们可以输出代理后的对象 p

p.png

可以看到深度代理后的对象,都携带 proxy 的标志。

到这里,我们解决了使用 proxy 实现侦测的系列细节问题,虽然这些处理方式可以解决问题,但似乎并不够优雅,尤其是递归 proxy 是一个性能隐患,
当数据对象比较大时,递归的 proxy 会消耗比较大的性能,并且有些数据并非需要侦测,我们需要对数据侦测做更细的控制。

接下来我们就看下 Vue3 是如何使用 Proxy 实现数据侦测的。

Vue3 中的 reactivity

Vue3 项目结构采用了 lerna 做 monorepo 风格的代码管理,目前比较多的开源项目切换到了 monorepo 的模式,
比较显著的特征是项目中会有个 packages/ 的文件夹。

Vue3 对功能做了很好的模块划分,同时使用TS 。我们直接在 packages 中找到响应式数据的模块:

reactivity.png

其中,reactive.ts 文件提供了 reactive 函数,该函数是实现响应式的核心。
同时这个函数也挂载在了全局的 Vue 对象上。

这里对源代码做一点程度的简化:

const rawToReactive = new WeakMap()
const reactiveToRaw = new WeakMap()

// utils
function isObject(val) {
  return typeof val === 'object'
}

function hasOwn(val, key) {
  const hasOwnProperty = Object.prototype.hasOwnProperty
  return hasOwnProperty.call(val, key)
}

// traps
function createGetter() {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver)
    return isObject(res) ? reactive(res) : res
  }
}

function set(target, key, val, receiver) {
  const hadKey = hasOwn(target, key)
  const oldValue = target[key]

  val = reactiveToRaw.get(val) || val
  const result = Reflect.set(target, key, val, receiver)

  if (!hadKey) {
    console.log('trigger ...')
  } else if(val !== oldValue) {
    console.log('trigger ...')
  }

  return result
}

// handler
const mutableHandlers = {
  get: createGetter(),
  set: set,
}

// entry
function reactive(target) {
  return createReactiveObject(
    target,
    rawToReactive,
    reactiveToRaw,
    mutableHandlers,
  )
}

function createReactiveObject(target, toProxy, toRaw, baseHandlers) {
  let observed = toProxy.get(target)
  // 原数据已经有相应的可响应数据, 返回可响应数据
  if (observed !== void 0) {
    return observed
  }
  // 原数据已经是可响应数据
  if (toRaw.has(target)) {
    return target
  }
  observed = new Proxy(target, baseHandlers)
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  return observed
}

rawToReactivereactiveToRaw 是两个弱引用的 Map 结构,这两个 Map 用来保存 原始数据可响应数据 ,在函数 createReactiveObject 中,toProxytoRaw 传入的便是这两个 Map

我们可以通过它们,找到任何代理过的数据是否存在,以及通过代理数据找到原始的数据。

除了保存了代理的数据和原始数据,createReactiveObject 函数仅仅是返回了 new Proxy 代理后的对象。
重点在 new Proxy 中传入的handler参数 baseHandlers

还记得前面提到的 Proxy 实现数据侦测的细节问题吧,我们尝试输入:

let data = { foo: 'foo', ary: [1, 2] }
let r = reactive(data)
r.ary.push(3)

打印结果:

console.png

可以看到打印输出了一次 trigger ...

问题一:如何做到深度的侦测数据的 ?

深度侦测数据是通过 createGetter 函数实现的,前面提到,当对多层级的对象操作时,set 并不能感知到,但是 get 会触发
于此同时,利用 Reflect.get() 返回的“多层级对象中内层” ,再对“内层数据”做一次代理。

function createGetter() {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver)
    return isObject(res) ? reactive(res) : res
  }
}

可以看到这里判断了 Reflect 返回的数据是否还是对象,如果是对象,则再走一次 proxy从而获得了对对象内部的侦测

并且,每一次的 proxy 数据,都会保存在 Map 中,访问时会直接从中查找,从而提高性能。

当我们打印代理后的对象时:

r.png

可以看到这个代理后的对象内层并没有代理的标志,这里仅仅是代理外层对象。

输出其中一个存储代理数据的 rawToReactive

rawToReactive.png

对于内层 ary: [1, 2] 的代理,已经被存储在了 rawToReactive 中。

由此实现了深度的数据侦测。

问题二:如何避免多次 trigger ?

function hasOwn(val, key) {
  const hasOwnProperty = Object.prototype.hasOwnProperty
  return hasOwnProperty.call(val, key)
}
function set(target, key, val, receiver) {
  console.log(target, key, val)
  const hadKey = hasOwn(target, key)
  const oldValue = target[key]

  val = reactiveToRaw.get(val) || val
  const result = Reflect.set(target, key, val, receiver)

  if (!hadKey) {
    console.log('trigger ... is a add OperationType')
  } else if(val !== oldValue) {
    console.log('trigger ... is a set OperationType')
  }

  return result
}

关于多次 trigger 的问题,vue 处理得很巧妙。

set 函数中 hasOwn 前打印 console.log(target, key, val)

输入:

let data = ['a', 'b']
let r = reactive(data)
r.push('c')

输出结果:

hasOwn.png

r.push('c') 会触发 set 执行两次,一次是值本身 'c' ,一次是 length 属性设置。

设置值 'c' 时,传入的新增索引 key2target 是原始的代理对象 ['a', 'c']hasOwn(target, key) 显然返回 false ,这是一个新增的操作,此时可以执行 trigger ... is a add OperationType

当传入 keylength 时,hasOwn(target, key)length 是自身属性,返回 true,此时判断 val !== oldValue , val3, 而 oldValue 即为 target['length'] 也是 3,此时不执行 trigger 输出语句。

所以通过 判断 key 是否为 target 自身属性,以及设置val是否跟target[key]相等 可以确定 trigger 的类型,并且避免多余的 trigger

总结

实际上本文主要集中讲解 Vue3 中是如何使用 Proxy 来侦测数据的。
而在分析源码之前,需要讲清楚 Proxy 本身的一些特性,所以讲了很多 Proxy 的前置知识。同时,我们也通过自己的方式来解决这些问题。

最后,我们对比了 Vue3 中,
是如何处理这些细节的。可以看出,Vue3 并非简单的通过 Proxy 来递归侦测数据,
而是通过 get 操作来实现内部数据的代理,并且结合 WeakMap 来对数据保存,这将大大提高响应式数据的性能。

有兴趣的小伙伴可以针对 递归Proxy 和 这种Vue3的这种实现方式做相应的 benchmark ,
这两者的性能差距比较大。

文章还是对 reactive 做了很大程度的简化,实际上要处理的细节要复杂得多

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/69226.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

IB课程工具书单,助力你考高分

亚马逊汇总了近期最畅销的IB课程工具书单,该书单以购买量和评分进行综合排名。其中的许多书籍都是IBDP学生可选用的绝佳工具书!1、Physics for the IB Diploma Coursebook 这本书涵盖了IB 2016年首考的物理课程要求。这本课程手册的第六版针对IB物理教学…

写出go程序

1.安装go包 下载地址:https://golang.google.cn/dl/ 2.安装vscode 下载地址:https://code.visualstudio.com/ 安装好后 以打开文件夹形式打开.go文件。 该文件自己创建一个即可。

怎么视频提取音频文件?分享这3种简单实用的提取方法

不知道大家平时用手机刷视频的时候,会不会被一些好听的背景音乐给吸引了呢?这些背景音乐大多都是网友们自己合成导入视频上传的,可能在许多音乐平台都不能找到音源播放。遇到这样的情况,大家一定都很苦恼吧?但其实&…

Fluorescein(5-isomer)-DBCO,2054339-00-1,二苯基环辛炔-FITC(5-异构体)

一、理论分析: 中文名:二苯基环辛炔-FITC(5-异构体),二苯并环辛炔-荧光素(5-异构体) 英文名:DBCO-FITC(5-isomer),5-FITC-DBCO,Fluorescein(5-isomer)-DBCO CAS号:2054339-00-1 化学式&#xff…

遥感影像目标检测:从CNN(Faster-RCNN)到Transformer(DETR)实践技术应用

我国高分辨率对地观测系统重大专项已全面启动,高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成,将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB,遥感大数据时…

代码随想录第一天

专题:数组 题目:二分查找 题目要求: 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。…

信号相角位移量的计算与信号位移计算-附Matlab代码

一、初始相角的位移量 在信号处理中正弦信号经常表示为 x(n)Acos⁡(2πf0n/fsθ)x\left( n \right)A\cos (2\pi {{f}_{0}}n/{{f}_{s}}\theta )x(n)Acos(2πf0​n/fs​θ),其中 fs{{f}_{s}}fs​是采样频率, f0{{f}_{0}}f0​是正弦信号的频率,…

volatile关键字的原理和要避免的误区

1>防止指令重排 2>禁用工作内存缓冲区,直接使用主内存。 经典使用场景 场景1 public static Singleton getInstance() { //第一次null检查 if (instance null) { synchronized (Singleton.class) { //1 //第二次null检查 if (instance null) { //2…

flink sql gateway初探

文章目录前言1.启动SQL gateway2.打开session3.执行flink SQL4.查看执行结果5.获取operationHandle的status6.注意事项7.官方链接前言 flink 1.16版本中发布了一个新功能–SQL gateway,本篇文章就来实践测试下该功能。 1.启动SQL gateway ./bin/sql-gateway.sh st…

让企业报表化繁为简,Smartbi实现报表统一管理

报表作为大家日常工作的关键和必不可少的内容,往往需要定期进行维护和更新。处在工作的不同时间、不同岗位、不同职责,要做的报表也各不相同。随着时间的推移,手上的报表也会越来越多,而这还只是从个人的角度出发来理解&#xff0…

[附源码]Python计算机毕业设计Django学生在线考试系统

项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等等。 环境需要 1.运行环境:最好是python3.7.7,…

java计算机毕业设计ssm洗浴管理系统l9omz(附源码、数据库)

java计算机毕业设计ssm洗浴管理系统l9omz(附源码、数据库) 项目运行 环境配置: Jdk1.8 Tomcat8.5 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。…

脉冲波形的产生和整形

一个周期性的脉冲信号,我们希望可以提供0和1的电平值 边沿的好坏,跳转时间长,效果就不好,特性就不好,所以描述周期性的脉冲信号的时候,有相应的参数,高低电平我们一般画成等宽的,尽…

深度学习入门篇 | 常用的经典神经网络模型

**神经网络,是模拟生物神经网络进行信息处理的一种数学模型。**它以对大脑的生理研究成果为基础,其目的在于模拟大脑的某些机理与机制,实现一些特定的功能。神经网络是目前最火的研究方向深度学习的基础,本文将神经网络分成三个主…

【Java面试】谈一谈你对ThreadLocal的理解

文章目录ThreadLocal原理大致设计底层理解【Java面试】说说你对ThreadLocal内存泄漏问题的理解hash冲突的解决get/set/remove方法的一些细节在多线程情况下,对于一个共享变量或者资源对象进行读或者写操作时,就必须考虑线程安全问题。而ThreadLocal采用的…

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三)

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六、完整构建整个[旋转的精灵女孩]实例 (1)、新建、启动webGL工程空间 (2)、构建项目的目录层次结构 (2.1…

EVE-NG安装问题记录 重置root密码

目录EVE-NG安装问题记录 重置root密码一、下载iso安装虚拟机二、碰巧没安装成功EVE-NG组件,开启EVE-NG机后 root/eve默认密码不对。进不去系统。1、进入单用户模式重置root密码三、重新安装eve-ng组件EVE-NG安装问题记录 重置root密码 一、下载iso安装虚拟机 从官…

ssm+mysql实现进销存系统|仓库计算机专业毕业论文java毕业设计开题报告

💖💖更多项目资源,最下方联系我们✨✨✨✨✨✨ 目录 Java项目介绍 资料获取 Java项目介绍 《ssmmysql实现进销存系统》该项目采用技术:jsp springmvcspringmybatis cssjs等相关技术,项目含有源码、文档、配套开发软…

嵌入式软件开发知识点总结(二)中断Linux内核

【好文推荐】 路由选择协议——RIP协议 轻松学会linux下查看内存频率,内核函数,cpu频率 纯干货,linux内存管理——内存管理架构(建议收藏) 概述Linux内核驱动之GPIO子系统API接口 一篇长文叙述Linux内核虚拟地址空间的基本概括 中断 硬中断 …

应用开发这样做更节约成本!

现在app已逐渐取代网页端,成为一众手机用户的心头好。要想轻松拿下更多目标用户,开发一个属于自己的app显得尤为重要。那么,在应用开发方面,我们有什么妙招可以降低开发成本呢? 1、明确开发需求 做好我们的app定位&am…