win7电脑做网站服务器,wordpress的简单应用,响应式布局框架,中国建设银行网站外汇课程地址#xff1a;【已完结】全网最详细Vue3源码解析#xff01;#xff08;一行行带你手写Vue3源码#xff09; 第三部分-获取computed的值#xff1b;实现computed#xff1a;#xff08;对应课程的第18-21节#xff09;
第22节#xff1a;《获取computed的值》 … 课程地址【已完结】全网最详细Vue3源码解析一行行带你手写Vue3源码 第三部分-获取computed的值实现computed对应课程的第18-21节
第22节《获取computed的值》
首先了解一下官网对computed的介绍 1、在源码中使用computed发现computed的两个特性
1“懒执行”computed定义的值如果没有在视图中或组件中读取或使用是不会触发computed里传入的函数的。 当使用时才会执行这里是一个“懒执行” 2缓存机制多次使用computed值时在其依赖计算的age值没有发生变化的情况下不会多次执行只会执行一次即有缓存机制其缓存机制是通过一个 _dirty 属性控制的。 1秒钟后改变age的值需要注意的是此时 computed 并不会执行两次因为虽然age值变化了但它变化后没有再次使用依赖它得到的计算属性 myAge。 1秒钟后改变age的值后并再次使用其值此时才会再次执行computed 将计算属性值打印出来观察 2、在 reactivity 下新建computed.ts 文件并在入口文件中暴露 computed 方法 3、在 computed.ts 文件中编写如下逻辑。可以发现computed()与effect()有一定的相似之处当computed()传入的是一个方法时都会去执行传入的方法且在这个方法里访问到的数据会进行收集依赖但不同的是effect()是默认执行的而computed()是默认不执行的 4、引入 isFunction 方法与effect 5、定义 ComputedRefImpl 类在 constructor 中保存effect方法在 value 值的 get 方法中去执行这个effect也就是计算属性在没有使用这个值时不会执行传入的计算方法。 6、回顾 effect.ts 中定义的 effect方法 7、examples下新建 6.computed.html文件在其中测试刚刚编写的 computed 方法效果如源码中一样在未访问时控制台没有输出访问这个计算属性值时控制台才输出了“缓存机制”与其值。 第23节《实现computed》
接上节
8、但此时我们实现的有个问题在重复访问时没有缓存机制会重复执行计算属性的方法 9、增加红框一行代码解决没有缓存机制的问题将初始为true的this._dirty属性置为false这样只要依赖值不改变无论访问多少次都会直接返回上一次的结果。 10、增加红框部分代码为effect配置项增加一个参数 sch它是一个方法负责将 this._dirty 的值变为 true。这个方法需要在什么时候执行在该计算属性的依赖值被重新赋值时执行。因为计算属性的依赖值被重新赋值时需要重新获取计算属性的值。 11、计算属性的依赖值被重新赋值时会触发 trigger 方法执行收集到的effect来进行触发更新。回到我们之前写好的 effect.ts 中的trigger方法中执行收集到的effect的代码部分 12、在这里执行收集到的effect时增加如下逻辑判断该effect的配置对象中是否有 sch参数有的话则执行这个函数即将计算属性中定义的 _dirty 置为true 这里我有两个疑问点一个是上面截图的代码是遍历并执行effectSet中的每一个effect的为什么到了下面截图里判断effect.options.sch有值时就执行了sch这个函数而不再去执行这个effect了呢另一个是为什么执行sch时要把effect作为参数传递进去在sch函数中比没有定义形参呢而且我测试不传递这个effect效果也和老师讲得一样所以不知道为什么要传递——待后续思考明白或者有通晓vue3源码的小伙伴帮忙指点一下~ 13、增加set获取函数
