原创 15 分鐘掌握 vue-next 函數式 api

寫在前面 在分享 vue-next 各個子模塊的實現之前，我覺的有必要比較全面的整理下 vue-next 中提出的函數式 api，瞭解這些的話，無論是對於源碼的閱讀，還是當正式版發佈時開始學習，應該都會有起到一定的輔助作用。 類似的東西在網

2019-10-24 17:35:22

原创 vue-next/runtime-core 源碼閱讀指南

寫在前面 最近又抽時間把 vue-next/runtime-core 的源碼陸陸續續地看完了，期間整理了很多筆記，但都是碎片化的。本來是想整理一下，寫成一篇文章分享出來的，但是感覺最終的成果物只能是一篇篇幅巨長的解析文，就算我一行一行的把源

2019-10-22 13:45:33

原创 15 分鐘掌握 vue-next 響應式原理

寫在前面 最新 vue-next 的源碼發佈了，雖然是 pre-alpha 版本，但這時候其實是閱讀源碼的比較好的時機。在 vue 中，比較重要的東西當然要數它的響應式系統，在之前的版本中，已經有若干篇文章對它的響應式原理和實現進行了介紹，

2019-10-12 13:05:18

原创 使用 queueMicrotask 來執行微任務

寫在前面 寫這篇文章的原因是因爲，這幾天在看 core-js 的源碼，然後發現了 queueMicrotask 的實現。由於之前做的項目，對於微任務的執行需求，一般是使用 asap 這個庫來完成的，如果沒有使用這個庫的話，簡易版本可以通過

2019-09-09 13:25:04 1

原创 如何對 react hooks 進行單元測試

寫在前面 使用 react hook 來做公司的新項目有一段時間了，大大小小的坑踩了不少。由於是公司項目，因此必須要編寫單元測試來確保業務邏輯的正確性以及重構時代碼的可維護性與穩定性，之前的項目使用的是 [email protected] 的版本，使用

2019-08-13 15:55:06 7

原创 零碎的知識（二）

目錄 零碎的知識（一） 新的媒體查詢屬性 prefers-reduced-motion https://developers.google.com...https://developer.mozilla.org... 這個媒體查詢屬性的

2019-06-11 10:25:08

原创 零碎的知識（一）

寫在前面 最近沒怎麼寫新的東西，一是因爲一直在準備換新的工作，所以一直在準備面試，二是因爲過年，心靜不下來，所以也無法輸出或者翻譯一些文章，三是由於手頭還有一些遺留工作需要完成和交接，比較忙。 但是忙裏偷閒還是整理了一些零碎的筆記，大體都是

2019-03-03 02:22:55

原创 高級 Vue 組件模式 (9)

09 使用 Functional 組件 目標 到此爲止，我們的 toggle 組件已經足夠強大以及好用了，因此這篇文章不會再爲它增加新的特性。如果你是從第一篇文章一直讀到這裏的讀者，你一定會發現，整篇文章中，我幾乎沒有對 toggle-on

2018-10-29 17:34:39

原创 高級 Vue 組件模式 (8)

08 使用 Control Props 目標 在第七篇文章中，我們對 toggle 組件進行了重構，使父組件能夠傳入開關狀態的初始值，同時還可以傳入自定義的狀態重置邏輯。雖然父組件擁有了改變 toggle 組件內部狀態的途徑，但是如果進一步

2018-10-28 11:44:06 1

原创 高級 Vue 組件模式 (7)

07 使用 State Initializers 目標 到目前爲止，僅從 toggle 組件自身的角度來看，它已經可以滿足大多數的業務場景了。但我們會發現一個問題，就是當前 toggle 組件的狀態對於調用者來說，完全是黑盒狀態，即調用者無

2018-10-26 15:14:33

原创 高級 Vue 組件模式 (6)

06 通過 directive 增強組件內容 目標 之前的五篇文章中，switch 組件一直是被視爲內部組件存在的，細心的讀者應該會發現，這個組件除了幫我們提供開關的交互以外，還會根據當前 toggle 的開關狀態，爲 button 元素增

2018-10-21 21:14:32

原创 高級 Vue 組件模式 (5)

05 使用 $refs 訪問子組件引用 目標 在之前的文章中，詳細闡述了子組件獲取父組件所提供屬性及方法的一些解決方案，如果我們想在父組件之中訪問子組件的一些方法和屬性怎麼辦呢？設想以下一個場景： 當前的 custom-button 組件

2018-10-21 16:44:36 1

原创 高級 Vue 組件模式 (4)

04 使用 slot 替換 mixin 目標 在第三篇文章中，我們使用 mixin 來抽離了注入 toggle 依賴項的公共邏輯。在 react 中，類似的需求是通過 HOC 的方式來解決的，但是仔細想想的話，react 在早些的版本也是支

2018-10-21 15:14:29 1

原创 高級 Vue 組件模式 (3)

03 使用 mixin 來增強 Vue 組件 目標 之前一篇文章中，我們雖然將 toggle 組件劃分爲了 toggle-button、toggle-on 和 toggle-off 三個子組件，且一切運行良好，但是這裏面其實是存在一些問題的

2018-10-20 18:44:37 3

原创 高級 Vue 組件模式 (2)

02 編寫複合組件 目標 我們需要實現的需求是能夠使使用者通過 <toggle> 組件動態地改變包含在它內部的內容。 熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用 slot 並配合 v-if，我們這裏採用另外一種方法，利用 v

2018-10-20 16:14:57 2