原创 React魔法堂:size-sensor源碼略讀

前言 echarts-for-react在對echarts進行輕量級封裝的基礎上,額外提供圖表尺寸自適應容器尺寸的這小而實用的功能,而這功能的背後就是本文想介紹的size-sensor了。 源碼介紹 size-sensor源碼十分精簡,主要

原创 React魔法堂:echarts-for-react源碼略讀

前言 在當前工業4.0和智能製造的產業升級浪潮當中,智慧大屏無疑是展示企業IT成果的最有效方式之一。然而其背後怎麼能缺少ECharts的身影呢?對於React應用而言,直接使用ECharts並不是最高效且優雅的方式,而echarts-for

原创 個人技術系列文章導航

《Petite-Vue源碼剖析》 結合示例從在線渲染、響應式系統和沙箱模型分別對源碼逐行解讀,其中還對響應式系統中利用JS引擎的SMI優化依賴清理算法作詳細分析。絕對是入門Vue3源碼前絕佳的踏腳石喜歡的話記得轉發、讚賞哦!

原创 petite-vue源碼剖析-沙箱模型

在解析v-if和v-for等指令時我們會看到通過evaluate執行指令值中的JavaScript表達式,而且能夠讀取當前作用域上的屬性。而evaluate的實現如下: const evalCache: Record<string, Fun

原创 petite-vue源碼剖析-逐行解讀@vue-reactivity之effect

當我們通過effect將副函數向響應上下文註冊後,副作用函數內訪問響應式對象時即會自動收集依賴,並在相應的響應式屬性發生變化後,自動觸發副作用函數的執行。 // ./effect.ts export funciton effect<T =

原创 petite-vue源碼剖析-逐行解讀@vue-reactivity之Map和Set的reactive

本篇我們會繼續探索reactive函數中對Map/WeakMap/Set/WeakSet對象的代理實現。 Map/WeakMap/Set/WeakSet的操作 由於WeakMap和WeakSet分別是Map和Set的不影響GC執行垃圾回收的

原创 petite-vue源碼剖析-逐行解讀@vue/reactivity之reactive

在petite-vue中我們通過reactive構建上下文對象,並將根據狀態渲染UI的邏輯作爲入參傳遞給effect,然後神奇的事情發生了,當狀態發生變化時將自動觸發UI重新渲染。那麼到底這是怎麼做到的呢? @vue/reactivity功

原创 petite-vue源碼剖析-優化手段template詳解

什麼是<template>元素? <template>是2013年定稿用於提供一種更統一、功能更強大的模板本存放方式。具體表現爲 通過<template>元素屬性content獲取已實例化的HTML元素(不是字符串而已) <templa

原创 petite-vue源碼剖析-ref的工作原理

ref內部的工作原理十分簡單,其實就是將指令ref、:ref或v-bind:ref標識的元素實例存儲到當前作用域的$refs對象中,那麼我們就可以通過this.$refs獲取對應的元素實例。但由於作用域繼承上有點小竅門,所以我們能從this

原创 petite-vue源碼剖析-雙向綁定`v-model`的工作原理

前言 雙向綁定v-model不僅僅是對可編輯HTML元素(select, input, textarea和附帶[contenteditable=true])同時附加v-bind和v-on,而且還能利用通過petite-vue附加給元素的_v

原创 petite-vue源碼剖析-事件綁定`v-on`的工作原理

在書寫petite-vue和Vue最舒服的莫過於通過@click綁定事件,而且在移除元素時框架會幫我們自動解除綁定。省去了過去通過jQuery的累贅。而事件綁定在petite-vue中就是一個指令(directive),和其他指令類似。 深

原创 petite-vue源碼剖析-屬性綁定`v-bind`的工作原理

關於指令(directive) 屬性綁定、事件綁定和v-modal底層都是通過指令(directive)實現的,那麼什麼是指令呢?我們一起看看Directive的定義吧。 //文件 ./src/directives/index.ts ex

原创 petite-vue-源碼剖析-v-for重新渲染工作原理

在《petite-vue源碼剖析-v-if和v-for的工作原理》我們瞭解到v-for在靜態視圖中的工作原理,而這裏我們將深入瞭解在更新渲染時v-for是如何運作的。 逐行解析 // 文件 ./src/directives/for.ts

原创 petite-vue源碼剖析-v-if和v-for的工作原理

深入v-if的工作原理 <div v-scope="App"></div> <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?

原创 petite-vue源碼剖析-從靜態視圖開始

代碼庫結構介紹 examples 各種使用示例 scripts 打包發佈腳本 tests 測試用例 src directives v-if等內置指令的實現 app.ts createApp函數 block.ts 塊對象 context.