去年，曾經閱讀過一系列關於高階 react 元件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關於高階 angular 元件模式的文章，碰巧最近接手了乙個公司專案，前端這塊的技術棧是 vue。我對於 vue 本身還是比較熟悉的，不過大多都是一些很簡單的個人專案，在構建相對比較複雜的應用中缺乏實踐經驗，就想著也搜搜類似題材的文章，漲漲知識。結果似乎沒有找到（其實也是有一些的，只不過不是和 react 和 angular 對比來寫的），不如就按照 react 和 angular 這兩個系列文章的思路，使用 vue 來親自實現一次吧。
由於三個框架的設計思想、語法都有比較大的區別，所以在實現過程中，均使用更符合 vue 風格的方式去解決問題，同時也提供一些對比，供讀者參考，如果觀點有誤，還望指正。
這個系列的文章的第一篇，都會從實現乙個最簡單的 toggle 元件開始。
在 vue 中，我們通過 data 來宣告乙個checked屬性，這個屬性所控制的狀態代表元件本身的開關狀態，這個狀態會傳遞給負責渲染開關變換邏輯的switch元件中，關於switch元件，這裡不做過多介紹，你把它當作乙個私有元件即可，其內部實現與該篇文章沒有太大的關聯。同時這個元件還擁有乙個on屬性，用來初始化checked的狀態值。
github: part-1
toggle元件的實現是乙個很典型的利用單向資料流作為資料來源的簡單元件：
高階 vue 元件模式 6
之前的五篇文章中，switch元件一直是被視為內部元件存在的，細心的讀者應該會發現，這個元件除了幫我們提供開關的互動以外，還會根據當前toggle的開關狀態，為button元素增加aria expanded屬性，以aira開頭的屬性叫作內容增強屬性，它用於描述當前元素的某種特殊狀態，幫助殘障人士更好...
高階 Vue 元件模式 3
之前一篇文章中，我們雖然將toggle元件劃分為了toggle button toggle on和toggle off三個子元件，且一切執行良好，但是這裡面其實是存在一些問題的 如果熟悉 react 的讀者這裡可能馬上就會想到 hoc 高階元件 的概念，而且這也是 react 中乙個很常見的模式，該...
高階 Vue 元件模式 2
我們需要實現的需求是能夠使使用者通過元件動態地改變包含在它內部的內容。熟悉 vue 的童鞋可能馬上會想到不同的解決方案，比如使用slot並配合v if，我們這裡採用另外一種方法，利用 vue 提供的provide inject屬性按照復合元件的思想來實現。這裡簡單介紹下provide inject的...