寫在前頭
去年，曾經閱讀過一系列關於高階 react 元件模式的文章，今年上半年，又抽空陸陸續續地翻譯了一系列關於高階 angular 元件模式的文章，碰巧最近接手了一個公司專案，前端這塊的技術棧是 vue。我對於 vue 本身還是比較熟悉的，不過大多都是一些很簡單的個人專案，在構建相對比較複雜的應用中缺乏實踐經驗，就想著也搜搜類似題材的文章，漲漲知識。結果似乎沒有找到（其實也是有一些的，只不過不是和 react 和 angular 對比來寫的），不如就按照 react 和 angular 這兩個系列文章的思路，使用 vue 來親自實現一次吧。
由於三個框架的設計思想、語法都有比較大的區別，所以在實現過程中，均使用更符合 vue 風格的方式去解決問題，同時也提供一些對比，供讀者參考，如果觀點有誤，還望指正。
01 實現一個 toggle 元件
這個系列的文章的第一篇，都會從實現一個最簡單的 toggle 元件開始。
在 Vue 中，我們通過 data 來宣告一個 checked 屬性，這個屬性所控制的狀態代表元件本身的開關狀態，這個狀態會傳遞給負責渲染開關變換邏輯的 switch 元件中，關於 switch 元件，這裡不做過多介紹，你把它當作一個私有元件即可，其內部實現與該篇文章沒有太大的關聯。同時這個元件還擁有一個 on 屬性，用來初始化 checked 的狀態值。
通過在 switch 元件註冊原生 click 事件，toggle 元件還會觸發一個 toggled 事件，在 App 元件中，我們會監聽這個事件，並將其回傳的值列印到控制檯中。你可以下面的連結來看看這個元件的實現程式碼以及演示：
總結
toggle元件的實現是一個很典型的利用單向資料流作為資料來源的簡單元件：
on是單向資料來源，checked代表元件內部的開關狀態- 通過觸發
toggle事件，將checked狀態的變化傳遞給父元件