浅谈vue3中effect与computed的亲密关系


Posted in Javascript onOctober 10, 2019

在我刚看完vue3响应式的时候,心中就有一个不可磨灭的谜团,让我茶不思饭不想,总想生病。那么这个谜团是什么呢?就是在响应式中一直穿行在tranger跟track之间的effect。如果单纯的响应式原理根本就用不上effect,那么effect到底是干什么的呢?

船到桥头自然直,柳岸花明又一村。苦心人天不负,偶然间我看到了effect测试代码用例!

it('should observe basic properties', () => {
 let dummy
 const counter = reactive({ num: 0 })
 effect(() => (dummy = counter.num))

 expect(dummy).toBe(0)
 counter.num = 7
 expect(dummy).toBe(7)
})

解释一下,这段代码

  • 首先声明dummy变量,然后在effect的回调中把已响应的对象counter的num属性赋值给dummy
  • 然后做断言判断 dummy是否等于 0
  • 将 counter.num 赋值 7 ,然后 dummy 也变成了 7 !

这,,,让我想到了什么??

这就是computed的吗?

赶紧看下 computed 的测试用例!!

const value = reactive<{ foo?: number }>({})
const cValue = computed(() => value.foo)
expect(cValue.value).toBe(undefined)
value.foo = 1
expect(cValue.value).toBe(1)

哈哈哈

阿哈哈哈哈

hhhhhhhhhhhhhhhhhhhh

忍不住想仰天长啸!!

果然跟我猜想的一样!!!我终于直到effect是个什么鬼了,顾名思义effect是副作用的意思,也就是说它是响应式副产品,每次触发了 get 时收集effect,每次set时在触发这些effects。这样就可以做一些响应式数据之外的一些事情了,比如计算属性computed。

让我们用effect实现一个computed 可能会更清晰一点

我就不写一些乱七八糟的判断了,让大家能够看的更加清楚

function computed (fn) {
 let value = undefined
 const runner = effect(fn, {
  // 如果lazy不置为true的话,每次创建effect的时候都会立即执行一次
  // 而我们要实现computed显然是不需要的
  lazy: true
 })
 // 为什么要使用对象的形式,是因为我们最后需要得到computed的值
 // 如果不用对象的 get 方法的话我们就需要手动再调用一次 computed() 
 return {
  get value() {
   return runner()
  }
 }
}

// 使用起来是这样的

const value = reactive({})
const cValue = computed(() => value.foo)
value.foo = 1

console.log(cValue.value) // 1

这也太简单了吧,那么重点来了,effect怎么实现的呢?

别着急,我们先捋一下逻辑

  1. 首先 如果 effect 回调内有已响应的对象被触发了 get 时,effect就应该被储存起来
  2. 然后,我们需要一个储存effect的地方,在effect函数调用的时候就应该把effect放进这个储存空间,在vue中使用的是一个数组activeReactiveEffectStack = []
  3. 再后,每个target被触发的时候,都可能有多个effect,所以每个target需要有一个对应的依赖收集器 deps,等到 set 时遍历 deps 执行 effect()
  4. 然而,这个依赖收集器 deps 不能放在 target 本身上,这样会使数据看起来不是很简洁,还会存在多余无用的数据,所以我们需要一个 map 集合来储存 target 跟 deps 的关系, 在vue中这个储存集合叫 targetMap 。

几个概念

track 追踪器,在 get 时调用该函数,将所有 get 的 target 跟 key 以及 effect 建立起对应关系

// 比如 const react = reactive({a: { b: 2 })
// react.a 时 target -> {a: { b: 2 } key -> a 
// targetMap 储存了 target --> Map --> key --> Set --> dep --> effect 
// 当调用 react.a.b.c.d.e 时 depsMap
// {"a" => Set(1)} --> Set --> effect
// {"b" => Set(1)}
// {"c" => Set(1)}
// {"d" => Set(1)}
// {"e" => Set(1)}
export function track(target: any, key: string) {
 const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1];
 if (effect) {
  let depsMap = targetMap.get(target);
  if (depsMap === void 0) {
   targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key!);
  if (!dep) {
   depsMap.set(key!, (dep = new Set()));
  }
  if (!dep.has(effect)) {
   dep.add(effect);
   effect.deps.push(dep);
  }
 }
}

trigger 触发器,这个就比较好理解了,拿到target key下的对应的所有 effect,然后遍历执行 effect()

export function trigger(target: any, key?: string | symbol) {
 const depsMap: any = targetMap.get(target);
 const effects: any = new Set()
 if (depsMap && depsMap.get(key)) {
  depsMap.get(key).forEach((dep: any) => {
   effects.add(dep)
  });
  effects.forEach((e: any) => e())
 }
}

effect 函数实现

// 暴露的 effect 函数
export function effect(
 fn: Function,
 options: any = EMPTY_OBJ
): any {
 if ((fn as any).isEffect) {
  fn = (fn as any).raw
 }
 const effect = createReactiveEffect(fn, options)
 // 如果不是 lazy,则会立即执行一次
 if (!options.lazy) {
  effect()
 }
 return effect
}

// 创建 effect
function createReactiveEffect(
 fn: Function,
 options: any
): any {
 const effect = function effect(...args: any): any {
  return run(effect as any, fn, args)
 } as any
 effect.isEffect = true
 effect.active = true
 effect.raw = fn
 effect.scheduler = options.scheduler
 effect.onTrack = options.onTrack
 effect.onTrigger = options.onTrigger
 effect.onStop = options.onStop
 effect.computed = options.computed
 effect.deps = []
 return effect
}

// 执行函数,执行完之后会将储存的 effect 删除
// 这是函数 effect 的所有执行,所经历的完整的声明周期
function run(effect: any, fn: Function, args: any[]): any {
 if (!effect.active) {
  return fn(...args)
 }
 if (activeReactiveEffectStack.indexOf(effect) === -1) {
  try {
   activeReactiveEffectStack.push(effect)
   return fn(...args)
  } finally {
   activeReactiveEffectStack.pop()
  }
 }
}

一口气写了这么多,最后总结一下。在大家看源码的时候,如果发现有哪个地方无从下手的话,可以先从测试用例开始看。因为测试用例可以很清楚的知道这个函数想要达到什么效果,然后从效果上想,为什么这么做,如果我自己写的话应该怎么写,这样一点点就能揣摩出作者的意图了。再根据源码结合自己的想法你就能够学到很多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 #Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 #Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 #Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 #Javascript
Vue3.0数据响应式原理详解
Oct 09 #Javascript
Vue分页插件的前后端配置与使用
Oct 09 #Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 #Javascript
You might like
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
Smarty模板配置实例简析
2019/07/20 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
js评分组件使用详解
2017/06/06 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python创建进程fork用法
2015/06/04 Python
python简单实现AES加密和解密
2019/03/28 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
运动会致辞稿50字
2014/02/04 职场文书
应聘会计求职信
2014/06/11 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
住房租房协议书
2014/08/20 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
nginx之内存池的实现
2022/06/28 Servers