肥仔John

528
获赞数
7
关注数
1830
粉丝数
佛山
华南师范大学 | 计算机科学与技术
IP 属地广东
2015-02-20 加入
浏览 23k

《Petite-Vue源码剖析》作者

SegmentFault《CSS魔法堂》专栏作者

2,789 声望|专家
全站排名超越 99.46% 用户
css
1.4k
javascript
1.1k
css3
880
计算机基础
259
前端
119
个人动态
  • 发布了文章2022-10-21
    React魔法堂:size-sensor源码略读
    echarts-for-react在对echarts进行轻量级封装的基础上,额外提供图表尺寸自适应容器尺寸的这小而实用的功能,而这功能的背后就是本文想介绍的size-sensor了。
  • 发布了文章2022-10-14
    React魔法堂:echarts-for-react源码略读
    在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高效且优雅的方式,而echarts-for-react则是针对React应用对ECharts进行轻量封装和增...
  • 发布了文章2022-04-20
    petite-vue源码剖析-沙箱模型
    在解析v-if和v-for等指令时我们会看到通过evaluate执行指令值中的JavaScript表达式,而且能够读取当前作用域上的属性。而evaluate的实现如下:
  • 发布了文章2022-04-19
    petite-vue源码剖析-逐行解读@vue-reactivity之effect
    当我们通过effect将副函数向响应上下文注册后,副作用函数内访问响应式对象时即会自动收集依赖,并在相应的响应式属性发生变化后,自动触发副作用函数的执行。
  • 发布了文章2022-04-15
    petite-vue源码剖析-逐行解读@vue-reactivity之Map和Set的reactive
    本篇我们会继续探索reactive函数中对Map/WeakMap/Set/WeakSet对象的代理实现。Map/WeakMap/Set/WeakSet的操作由于WeakMap和WeakSet分别是Map和Set的不影响GC执行垃圾回收的版本,这里我们只研究Map和Set即可。Set的属性和方法size: number 为访问器属性(accessor pro...
  • 发布了文章2022-03-22
    petite-vue源码剖析-逐行解读@vue/reactivity之reactive
    在petite-vue中我们通过reactive构建上下文对象,并将根据状态渲染UI的逻辑作为入参传递给effect,然后神奇的事情发生了,当状态发生变化时将自动触发UI重新渲染。那么到底这是怎么做到的呢?@vue/reactivity功能十分丰富,而petite-vue仅使用到reactive和effect两个...
  • 发布了文章2022-03-14
    petite-vue源码剖析-双向绑定`v-model`的工作原理
    双向绑定v-model不仅仅是对可编辑HTML元素(select, input, textarea和附带[contenteditable=true])同时附加v-bind和v-on,而且还能利用通过petite-vue附加给元素的_value、_trueValue和_falseValue属性提供存储非字符串值的能力。
  • 发布了文章2022-03-11
    petite-vue源码剖析-事件绑定`v-on`的工作原理
    在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件,而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。而事件绑定在petite-vue中就是一个指令(directive),和其他指令类似。
  • 发布了文章2022-03-08
    petite-vue源码剖析-属性绑定`v-bind`的工作原理
    指令(directive)其实就是一个接受参数类型为DirectiveContext并且返回cleanup函数或啥都不返回的函数。那么DirectiveContext有是如何的呢?
  • 发布了文章2022-03-07
    petite-vue-源码剖析-v-for重新渲染工作原理
    在《petite-vue源码剖析-v-if和v-for的工作原理》我们了解到v-for在静态视图中的工作原理,而这里我们将深入了解在更新渲染时v-for是如何运作的。
  • 发布了文章2022-03-07
    petite-vue源码剖析-v-if和v-for的工作原理
    调用mount为<div v-scope="App"></div>构建根块对象rootBlock,并将其作为模板执行解析处理;
  • 发布了文章2022-03-04
    petite-vue源码剖析-从静态视图开始
    代码库结构介绍examples 各种使用示例scripts 打包发布脚本tests 测试用例srcdirectives v-if等内置指令的实现app.ts createApp函数block.ts 块对象context.ts 上下文对象eval.ts 提供v-if="count === 1"等表达式运算功能scheduler.ts 调度器utils.ts 工具...
  • 发布了文章2022-03-03
    petite-vue源码剖析-为什么要读源码?
    根据官方解释,petite-vue是专门为非前后端分离的历史项目提供和Vue相近的响应式开发模式。 与完整的Vue相比最大的特点是,面对数据的变化petite-vue采取直接操作DOM的方式重新渲染。
  • 发布了文章2021-12-13
    Another Intro for Cookies
    Cookies are strings of data that are stored directly in the browser. They are a part of HTTP protocol, defined by RFC 6265 specification.
  • 发布了文章2021-12-07
    Another Intro for HTTP Cache
    There are two different categories of HTTP caching. One is so-called Strong/Force Cache, whilst the other is called as Negotiation Cache.
  • 发布了文章2021-11-27
    Yet Another Intro for Symbol
    First of all, symbol is a built-in primitive type. And it's guaranteed to be unique. Symbols are often used to add unique property keys to an object won't collide with keys that any other code might add to the object. And the properties under the ...
  • 发布了文章2021-11-19
    TypeScript Crash Course: Property Access Modifiers
    There is no other great moment to head into the world of TypeScript instead of right now. Angular is in TypeScript, React is in TypeScript, and even Vue3 is in TypeScript. That means it's a skill we must equip with rather than wait and see.
  • 发布了文章2021-11-13
    Vue 3 Reactivity System Source Code Reading: `markRaw`
    Cauz only Object, Array, Map, Set, WeakMap and WeakSet can be acted for in Vue 3 reactivity system. And to value of the type of Object called by Object.isFrozen returns true or with __v_skip unenumerable property of which value is true will can no...
  • 发布了文章2021-11-09
    Source Code Reading for Vue 3: How does `hasChanged` work?
    Hey, guys! The next generation of Vue has released already. There are not only the brand new composition API, much more powerful and flexible reactivity system, first-class render function, but also the natural performance with building off the mo...
  • 发布了文章2021-10-26
    Yet Another Intro to Event Loop
    As we tell, there're tons of posts talking about event loop, the basic of the basic knowledge of JavaScript running mechanism.