Skip to main content

· 20 min read
Adam You

前言

這是我讀了「Docker這樣學才有趣」這本書其中第1章~第5章的筆記,這幾章包含了 Docker基本知識與指令、Dockerfiler以及 Docker Compose指令等,已經足以建置一般的 Docker Container以及自動化管理。不過docker-compose.yml文件指令的部份實在是太多了… 一時間筆記做不完,所以尚未寫好…

後面的章節內容還有架設 Docker Registry,以及多個範例實作(也就是標題上說有趣的部份),就被我跳過了…

· 2 min read
Adam You

當 Component遞迴呼叫自己時 - 也就是使用 slot並將同樣的 Component放進去的時候,如果沒有針對這種情形調整寫法就會報錯:

did you register the component correctly? For recursive components, make sure to provide the “name” option

這樣寫法稱之為 Recursive Component,在我研究之後分為以下兩種形態:

  1. 父子Component是同樣的Component
  2. 某Component的父子Component相同

· 7 min read
Adam You

前言

Vuex v4.0版本以上大幅改善了對 Typescript的支援、以及對 composition-api的整合,但是 Vuex v4.x版只支援 Vue3以上版本

也就是說如果開發環境是 Vue v2.x版本的話,Vuex也就只能使用 v3.x版本。雖然說 Vuex v3.x版對於 Typescript的支援上也些限制和不順手,但只要做好註記 (annotation)的工作,基本上我覺得型別推導上還算蠻完整的,唯獨 Component中要引入 Vuex的時候就會有些限制,只有 state可以型別推導,其餘 mutation/action等都會是 any型別。不過對我個人來說有 state型別推導就已經是相當實用,其他的就還是我可以忍受的範圍了。

· 12 min read
Adam You

前言

身為使用 Vue.js的開發者,最近在研究 React.js以及 Next.js,原本以為有了使用 Vuex(和 Redux 一樣取自 Flux的概念發展出來狀態管理套件)的經驗,應該可以無痛轉移使用 Redux,但沒想到使用門檻竟然比預期的高上許多。

先是研究了 Redux,沒想到如果要打 Api還需要像是 React-Thunk之類的套件才能做非同步的操作。接著, Redux本身是一個獨立的狀態管理的套件,要怎麼跟 React溝通他也不管,所以還需要再安裝 React-Redux才能將 store和 Component做綁定。好不容易整理到一個段落了,實際開發 Next.js的時候還會有一個需求是要在 server-side從 context中取得 store又要再安裝 Next-Redux-Wrapper。前前後後含 Redux本身總共裝了四個套件,才終於達到我能開始開發 Next.js程式的最低需求。

· 8 min read
Adam You

前言

之前使用 Vue2.x開發時又想使用 Typescript,當時遇到的困擾是… Component使用 Typescript時根本就吃不到 this的型別,所以基本上是無法直接使用的,唯一的方式也只能採用官方推薦的 Class Component寫法,會寫到覺得很生氣(?), Class Component的寫法實在是頗不直觀。

一直到 Vue3.0推出之後,才終於徹底改善了對 Typescript的支援;但我的工作上基於某些理由,短時間內無法轉為使用 Vue3.0,所以我就來簡單研究了一下,在 Vue2.x環境下是否有使用 Typescript合適方式?

· 4 min read
Adam You

前言

理論上 Vue3.x大多數的寫法是有向下相容 Vue2.x的寫法,所以理論上.vue檔Component的寫法只要同時符合 Vue3.x和 Vue2.x的寫法,是能夠將同一個檔案共用於兩者不同環境當中。

以下會針對幾種我遇過在這兩個環境中較大差異的部份以及解決方式做個說明。

· 24 min read
Adam You

落落長的前言

雖然說Vue上手容易,就以我來說我剛開始學習的時候幾乎是網路上看了幾篇文章就開始寫了,但是後來就吃了很多悶虧,慢慢在各專案中累積實戰經驗之後才知道有更好的做法,並且每種做法的差異以及適用的情境…

關於組件(Component)的設計當中,資料傳遞的設計幾乎是整個Vue的程式開發中最重要的一件事情…(個人見解 XD),尤其是當團隊(或者專案中)開始考量組件的複用性、開始重視組件的開發,這件事情尤其重要。

· 20 min read
Adam You

一、單向/雙向資料流之差異及適用場景

前一篇文章「單向傳遞」中我有提到過,我自己「體感」自製的Component大約只有百分之20是使用單向資料流傳遞的。不過在Vue中的「雙向綁定」是一大特色(雖然當初也是 抄襲 參考Angular的),當中的變化以及學問可多了。

就我自己個人的經驗,剛開始學Vue時開發自製Component大多都是使用單向綁定,對於自製的雙向綁定的用法有些困惑,隨著經驗的累積才開始慢慢掌握技巧以及合適的用法。依照我自己個人的經驗,我會把這百分之20中所適用的情境分為兩種:

  1. 包裝resuse(可複用)的基本元素
  2. 因程式管理需求需抽離出來的大區塊

· 9 min read
Adam You

這是Javascript的一個經典的觀念題–「傳值」以及「傳參考」(call by value/call by reference,或者pass by value/pass by reference),除此之外,也有人說Javascript是call by sharing(或者pass by sharing)。不過我自認我的程度還不到可以針對這些名詞做很深入的探討,但是可以用一個簡單的方式,將Javascript的這個語言特性做個整理。