摘要: 《Petite-Vue源码剖析》 结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦! 阅读全文
posted @ 2022-04-26 21:54 ^_^肥仔John 阅读(53) 评论(0) 推荐(0) 编辑
摘要: 前言 echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。 源码介绍 size-sensor源码十分精简,主要是对原生APIResizeObserver方案和object 阅读全文
posted @ 2022-10-21 17:37 ^_^肥仔John 阅读(238) 评论(0) 推荐(0) 编辑
摘要: 前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封 阅读全文
posted @ 2022-10-14 18:39 ^_^肥仔John 阅读(535) 评论(0) 推荐(1) 编辑
摘要: 《Petite-Vue源码剖析》 结合示例从在线渲染、响应式系统和沙箱模型分别对源码逐行解读,其中还对响应式系统中利用JS引擎的SMI优化依赖清理算法作详细分析。绝对是入门Vue3源码前绝佳的踏脚石喜欢的话记得转发、赞赏哦! 阅读全文
posted @ 2022-04-26 21:54 ^_^肥仔John 阅读(53) 评论(0) 推荐(0) 编辑
摘要: 在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下: const evalCache: Record<string, Function> = Object.create(null) e 阅读全文
posted @ 2022-04-20 15:04 ^_^肥仔John 阅读(333) 评论(0) 推荐(1) 编辑
摘要: 当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。 // ./effect.ts export funciton effect<T = any>( fn: () => T, options?: R 阅读全文
posted @ 2022-04-19 09:41 ^_^肥仔John 阅读(286) 评论(0) 推荐(0) 编辑
摘要: 本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。 Map/WeakMap/Set/WeakSet的操作 由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。 Set的属性和方法 阅读全文
posted @ 2022-04-15 09:58 ^_^肥仔John 阅读(260) 评论(0) 推荐(0) 编辑
摘要: 在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢? @vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和 阅读全文
posted @ 2022-03-22 08:11 ^_^肥仔John 阅读(314) 评论(0) 推荐(1) 编辑
摘要: 什么是<template>元素? <template>是2013年定稿用于提供一种更统一、功能更强大的模板本存放方式。具体表现为 通过<template>元素属性content获取已实例化的HTML元素(不是字符串而已) <template id="tpl"> <div>a</div> <div>b 阅读全文
posted @ 2022-03-16 06:30 ^_^肥仔John 阅读(255) 评论(0) 推荐(0) 编辑
摘要: ref内部的工作原理十分简单,其实就是将指令ref、:ref或v-bind:ref标识的元素实例存储到当前作用域的$refs对象中,那么我们就可以通过this.$refs获取对应的元素实例。但由于作用域继承上有点小窍门,所以我们能从this.$refs获取的元素实例还是需要注意一下。下面让我为你一一 阅读全文
posted @ 2022-03-15 08:04 ^_^肥仔John 阅读(287) 评论(0) 推荐(1) 编辑
摘要: 前言 双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提 阅读全文
posted @ 2022-03-14 15:03 ^_^肥仔John 阅读(357) 评论(0) 推荐(0) 编辑