首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3.0 beta源码学习笔记(三)

Vue3.0 beta源码学习笔记(三)

作者头像
用户7572539
发布2020-08-26 11:11:24
2580
发布2020-08-26 11:11:24
举报

今天继续总结学习Vue3.0的基本原理。computed(), 计算属性,在vue3.0中computed可以传入一个getter函数也可以传入getter与setter两个函数。

在computed模块中,首先处理处理用户传入的对象,在接收对象时分为一个参数与两个参数的情况,最终返回一个computed对象,在处理传入的对象时其实是调用effect模块,让其成为响应式的数据,所以computed也是另一种形式的effect。因此,在effect模块中要加入对computed类型的处理,分而治之,并且computed优先于一般的effect执行。大概思路就是这样,直接上代码:

export function computed(getterOrOptions) { let getter; //接收传入的参数 let setter; if (isFunction(getterOrOptions)) { //isFunction是自定义的工具函数 getter = getterOrOptions; setter = ()=>{} } else { getter = getterOrOptions.get; setter = getterOrOptions.set; } let dirty = true;//缓存机制的标志 控制是否触发依赖,达到缓存效果 let computed; let runner = effect(getter, { //调用effect lazy: true, //首次不执行 computed: true,//计算属性标识 scheduler: ()=>{ //在有新的依赖触发时effect负责执行 if (!dirty) { dirty = true;//依赖值变化后 没有缓存数据了 trigger(computed,TriggerOpTypes.SET,'value') //触发依赖 } } }) let value; computed = { get value() { if (dirty) { //多次取值 不会重复执行effect value = runner(); dirty = false; track(computed,TriggerOpTypes.GET,'value')//收集计算结果的依赖,使其成为响应式数据 } return value; }, set value(newValue) { setter(newValue) } } return computed; }

effect中的配合

export function trigger(target, type, key, value, oldValue) { //获取当前对应的map const depsMap = targetMap.get(target); if (!depsMap) { return; //说明没有被收集过依赖 } //计算属性优先于effect执行 const effects = new Set(); //装普通effect const computedRunners = new Set(); //装计算属性的effect //具体执行effect集合的方法 // const run = (effect) => { // if (effect) { // effect.forEach(effect => effect()) // } // } const run = (effect) => { if (effect.options.scheduler) { effect.options.scheduler() } else { effect(); } } let add = (effectsToAdd)=>{ if (effectsToAdd) { effectsToAdd.forEach(effect => { if (effect.options.computed) { computedRunners.add(effect) } else { effects.add(effect) } }) } } if (key !== null) { add(depsMap.get(key)); } if (type === TriggerOpTypes.ADD) { add(depsMap.get(Array.isArray(target) ? 'length' : '')) } computedRunners.forEach(run) effects.forEach(run) }

在触发effect中,增加了两个存储computed和effect的集合,通过add方法所有的依赖map中的effect分类,最后分开执行;

computed的实现基础还是effect,可以理解为effect的一种变形。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 二少爷的花间集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档