VueJS

[IT 鐵人賽] 在 Vue 之後的事情,還會有什麼? Day 30

結束了鐵人賽 30 天的過程,其實說真的我也沒有講太多 Vue 的事情,多半都是圍繞在一些奇怪的應用上。後續的 Vue 發展會是什麼樣子,其實身為一個在前端打滾的工程師來說,我個人其實也沒有那種強烈的慾望,說他一定要發展到什麼樣的程度。 起碼,這樣的工具對現在的應用上來說,還算是充裕的就夠了。 Vue 框架 其實 Vue 的崛起算是相當快,背後雖然不像 React, Angular 那樣有個強力的老爸撐腰,但說起來團隊也還算相對活躍。也許這會讓人多少有點憂心,萬一團隊不更新了怎麼辦?或是這個框架以後不維護了怎麼辦? 說真的,比起擔心什麼框架不維護,為何不先擔心你自己不去學新的東西? 就像是我以前把玩的

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] 下一個 VueJS 3.0 Day 29

前幾天都沒再持續提到 Vue,今天來聊一下關於 Vue 3.0 與其後續發展狀況。雖然目前還是 RFC 的階段,不過,大致上走向應該已經確定了。 推薦閱讀 Kuro 的 初探 Vue 3.0 Function-based API Function based API 如果有比較大量在 Vue 裡面寫 Mixin 的人,對於這個改變應該會比較容易接受。主要的概念就是將該在一起的東西放在一起,避免一些奇奇怪怪的狀況。而且目前官方的說法,

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] Vanilla JS 與 Vue 的生命週期 Day 28

最後幾天來聊一下關於生命週期的事情,這裡提到的生命週期並不限於 Vue 所屬的區域,也包含了一些原生 JavaScript 那種無關 Bug 而是一種 Feature 的那些 生命週期 的事情。 沒有被 JS 婊過就不算寫過 JS 你說是吧( 並沒有這種說法好嗎 ) 關於封裝與執行 我之前犯過幾個低級錯誤,舉個例子給大家看個笑話: <template> <section class="hello"> <

  • Hina Chen
    Hina Chen
5 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Deep watch Day 27

昨天看了一些關於大量 DOM 的事情,今天來聊一下關於深度監看的事情。其實在 Vue 裡面,預設的監看並不會看太多,也就是不會看很深。為了效能考量,所以基本上各家前端框架在這件事情上面,或多或少都會留一點餘地。 然後這些餘地有時候會讓人覺得很困擾。 怎麼監看? 實際上 JavaScript 是可以透過 Proxy, Reflect 來實作一個簡易的監看方法。 const onChange = (objToWatch, callback) => { const handler = { get(target, property, receiver) { callback(); const

  • Hina Chen
    Hina Chen
3 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Large of DOMs Day 26

昨天提到大量資料的事件綁定,今天再來聊一下關於 DOM 這件事情。不知道大家對於 Google Chrome DevTools 熟不熟悉,我們除了用他來看人家原始碼以外,也會使用他來觀察畫面的效能。 推薦大家可以追一下 Paul Irish 的推特。 關於效能問題 Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014 Chrome Perf Tooling How to Use

  • Hina Chen
    Hina Chen
3 min read
VueJS

[IT 鐵人賽] 大型資料載入實例與狀況 Event Binding Day 25

今天跟大家聊一下關於大型資料的一些例子。先說在最前面的,這種案例其實不多,屬於 八奇 系列。 一般來說,我們在 API 能拿到的 JSON 你覺得該有多大? 大量資料的渲染問題 實際上我拿過最大的 JSON 大概是 20MB,這是什麼概念呢?想像一下你需要在前端一口氣渲染超過 2000 個 DOM 元件,在這種情況下,如果你的前端裝置效能不好的話,那麼你可能就會卡在畫面上等了好久才會有東西出現。 對於 JavaScript 來說,單純的使用 for 迴圈,從

  • Hina Chen
    Hina Chen
4 min read
VueJS

[IT 鐵人賽] 動態載入 CSS Style Day 23

其實樣式這件事情,是不是有動態載入好像不是那麼重要。除非你像是 AMP 那樣嚴格規範你的樣式使用範圍,不然通常我們都是全部打一包丟上去。然後就大家都用那一包了,你看看精美的 Bootstrap ,你會因為沒有使用到什麼設定而把他拿掉嗎?通常不會。 或者是你可以做一個客製化的 Bootstrap ,然後拿去偽裝成 bootstrap.min.css ,你這樣試試看後續接手的人會不會叫你出來,然後保證不打死你? 樣式區塊 我們在 Vue 裡面其實有支援 CSS Modules 的作法: Vue.js 與 CSS Modules CSS Modules

  • Hina Chen
    Hina Chen
7 min read
VueJS

[IT 鐵人賽] 動態載入 Vue App Day 22

昨天又再次說到動態載入元件,今天則來聊一下 Vue App 是不是也能做這種事情。我們之前在 第七天 的時候有稍微提了一下。基本上就是 90% 以上的人不會做這種事 ,然後我大概就是那個 10% 會做這種蠢事的人。 我說過了,如果是兩組 App 想要綁定在不同的地方,溝通上會是個問題。根據昨天我尚未釋出的 Webpack 的結構來說,也不是一件不能做到的事情。至於什麼時候會釋出,大概就是等 Day 24 我聊到 Webpack 設定的時候吧( 奸詐 )。 Hybrid 加上多個

  • Hina Chen
    Hina Chen
6 min read
VueJS

[IT 鐵人賽] 動態載入 Components Day 21

我們又回到動態載入系列了,如果覺得我很煩的話可以先行離席沒關係。由於我昨天整理 Dockfile 的時候有點過於厭世,所以今天我這邊一樣會帶入一些昨天的結構,至於說 Dockfile 的話還沒好,如果想要先看結構的,可以先去我的 Github 上面看。 ITHome Ironman 2019 Hybrid App 混合模式的動態載入 其實我比較偷懶,上面的例子我直接掃全部的資料夾,然後將檔案加入樣版中。不過這個將來一定會 壞調 壞掉,所以小朋友不要亂學。 $jsFiles = ['main.js']; foreach (new \DirectoryIterator(ROOT

  • Hina Chen
    Hina Chen
6 min read
VueJS

[IT 鐵人賽] 簡易的後端輸出與 Hybrid 模式 Day 20

昨天提到了後端與前端的混和( Hybrid )模式,我們今天就會提出比較完整的例子,來說明一下我自己目前比較喜歡的方式。由於 Phalcon 實在有點冷門,所以我今天會用一個更冷門的 Slim PHP Framework 來介紹( 你是故意的嗎 )。 對了,今天也會有 Docker 會分享給各位,方便大家不用處理環境問題。 後端的設計 我們昨天有提到後端的作法,今天我們來實作一些關於後端的操作方式。首先,我們需要準備一些需要的工具: PHP 7.3 with PHP-FPM Nginx Slim PHP Framework

  • Hina Chen
    Hina Chen
5 min read
VueJS

[IT 鐵人賽] 後端的 Template Layout Day 19

我們昨天看完了 SSR 的部分,有沒有覺得 我好興奮!我好興奮啊!(並沒有好嗎)。聊了那麼多前端的事情,我們今天來聊一下關於後端的部分。我之所以沒有採用 SSR,最主要還是因為我不太會寫 JavaScript,所以我還是繼續使用 PHP 比較妥當(欸)。 接下來的後端我大概都會用 PHP 當例子,當然你要換成其他的也可以。但是,如果你要用 NodeJS 的話,那你還是回去 SSR 好了(慢走不送)。 index.xxx 樣版 現在我們知道

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] 為何我不用 SSR? Day 18

昨天提到了關於 SEO 的狀況,那麼,我們是不是使用 SSR 就能解決那些問題?關於這件事情我還是持保留態度。我們今天會帶大家來看一下 Vue 的 SSR 是怎麼運作的。 至於為何我沒有採用,沒有為什麼,因為我不會用啊(啊哈哈哈哈) SSR 要如何開始? SSR 的全名為 Server Side Render,顧名思義,就是先在伺服器端渲染的意思。那麼,跟原本使用 JavaScript 前端渲染,到底為何又要牽扯到後端?最主要的目的還是為了解決 SEO

  • Hina Chen
    Hina Chen
19 min read
VueJS

[IT 鐵人賽] SEO 的問題 Day 17

現在的 JavaScript 框架面對搜尋引擎,普遍的問題大概都會圍繞著 SEO 打轉,這是以往在伺服器渲染的前端頁面下所沒有的。然後,對於這樣的狀況,多數也是有相對應的解決方案,只是是否合乎你的使用情境,就見仁見智了。 我們今天會提到一些關於 SEO 與其工具的介紹,就讓我們繼續看下去。 前端渲染 不僅僅是 Vue 這個框架,另外兩家若僅僅只是前端渲染的話,多少會遇到 SEO 的問題。而撇除掉網頁的內容( content ),我們還要處理關於 <meta> 的事情,中文說法有很多:元資料、

  • Hina Chen
    Hina Chen
7 min read
VueJS

[IT 鐵人賽] 題外話:原始碼之藏在 $watch 當中的神奇設定 Day 16

其實,這是我之前寫過的 一篇文章(我絕對不會承認是拿來墊檔的)。雖然我覺得這件事情很奇妙,但是比起 EventBus 的都市傳說,這個應該算還行。只要你看過原始碼應該就能理解。 是說,有誰會沒事去挖人家的原始碼來看( 就你啊 )。 再看一次 $watch 我們平常在操作 $watch 的時候,會有兩種寫法: export default { name: 'Component', data () { return { myAge: 18 } }, watch: { myAge (newAge, oldAge) { // newAge 表示改變後的新值

  • Hina Chen
    Hina Chen
8 min read
Vue 元件溝通

[IT 鐵人賽] Component 的溝通方式 :props Day 14

這裡拿 :props 來回鍋複習一下,也順帶的,我們會提及一些關於事件溝通的方式。或者說反過來,講事件溝通,然後順帶提一下 :props 也可以。元件溝通其實一直都是各種框架裡面比較麻煩的事情,昨天提到的 Vuex 其實算是偷吃步,元件之間在沒有狀態管理機制的情況下,多數還是仰賴事件傳播為主。 只是,當元件趨於複雜,事件傳播就相對惱人。 props 之前在提及元件的時候有提到這個屬性,如果忘記的人可以再回去看一下: Component 基本入門 Day 2 當我們需要將資料傳遞給元件的時候,我們可以利用 props 來達成這件事情,當然請記得,他是屬於單向綁定的,如果需要雙向資料溝通,

  • Hina Chen
    Hina Chen
11 min read
Vuex

[IT 鐵人賽] Component 的溝通方式 Vuex Day 13

我們會把 Vuex 放的比較前面,是因為既然使用了狀態管理機制,那麼,用他來跟各種元件溝通,是比較方便的一件事情。然後,我拖了那麼久才講到元件溝通好像有點奇怪,也是啦,其實我本來就不是很喜歡溝通(欸不對)。 是說,溝通只是 Vuex 附加的好處而已其實。 元件交換資料 我們之前有提過元件之間的資料交換,也提過 Vuex 的基本應用: Component 基本入門 Day 2 Vuex 基本入門 Day 8 之前說過 Vuex 是幫我們做狀態管理的,所以說我們拿來做元件交換資料也是很適切的事情。

  • Hina Chen
    Hina Chen
7 min read
2019

[IT 鐵人賽] 薛丁格的生命週期 Day 12

是的,這個篇幅會用來聊一下生命週期當中,比較奇怪的事情。薛丁格 我就不解釋了,程式執行其實並沒有像是量子力學的那種疊加狀態,只是,當 Vue 的元件趨於複雜,再搭配上 Vue Router 的時候,你的某些生命週期中的勾子,就會有你所不知道的狀態。 最終狀態 有些時候你可能會遇到一個情況,當我們使用 console.log() 去印出某個物件的時候,你會發現他是有東西的。然後你如果印了某個物件的屬性,例如說 HelloKitty.foo 結果是 undefined。 不要問我為什麼,這是 JavaScript 的

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 與生命週期 Day 11

我在先前的篇幅當中,有提到生命週期與路由的關係。我們這一個篇章,就將路由與生命週期之間的事情,做一個全面性的剖析。如果你之前有稍稍稍稍微留意我的部落格,應該會看過我曾經碎念過 Router 與生命週期之間的事情。 重新檢視 lifecycle 與 vue-router 關於 vue-router 外面的兩三事 VueJS 快速入門 Day 1 所以我就不跪求心理陰影面積了。 生命週期與 Hooks(勾子) 我們除了 Vue 原本就有的方法之外,如果另外再加上 Router 所提供的,那麼大家的順序上就很容易搞混,我們先條列一下到底會有哪些方法: beforeCreate

  • Hina Chen
    Hina Chen
10 min read
2019

[IT 鐵人賽] Router 進階應用 Day 10

聊完了基礎的路由功能後,我們接著來看看關於路由的進階應用方式。你放心,前陣子一直提到的動態元件載入,這邊一樣會出現,所以先給各位打個預防針。不過,如果你真的看膩了什麼動態載入的事情,那麼你想要跳過我也是欣然接受。 何況,進來就進來,出去就出去, 哪有人一直動態載入的啦。 路由守衛方法( Guards Methods ) Navigation Guards 在 Router 當中提供了幾種所謂的路由守衛方法: 其實我覺得叫路由防衛比較好(聽起來超中二的) beforeEach 每個路由要被執行之前,都會先經過這裡,他會傳入三個參數: to 你要去的路由位置。 from 你從哪一個路由位置進來,如果沒有,預設是

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] Router 基本入門 Day 9

聊完狀態管理之後,我們來聊一下前端的路由。最近各大家前端工具都有支援前端路由的功能。而 Vue-Router 是官方推出的。功能上都大同小異,你也可以自己做一個(我最喜歡自己做輪子了)。 如果你做好了記得開源出來~ 前端路由 前端做這件事情應該是 Angular 起了一個頭,畢竟身為 Google 的親生兒子,所以很熱門。其實他並不是什麼很新穎的技術,主要是依靠 HTML5 History API 來做操作。在不支援 History API 的瀏覽器當中,大多都是使用 URL hash 的方式來達成。 例如說:

  • Hina Chen
    Hina Chen
11 min read
VueJS

[IT 鐵人賽] Vuex 基本入門 Day 8

在我們要聊元件溝通之前,我們先來聊一下關於 Vuex 這個套件。他是官方推出的狀態管理的工具,官方中文翻譯叫做倉庫(?),也是啦,如果把 store 直接翻譯的話,好像叫倉庫也是挺合理的。 但我覺得好像狀態管理會比較符合事實。 Vuex 如果你是使用 Vue CLI 的話,那就是用 yarn 或 npm 裝一下就好, yarn add vuex # OR npm i vuex 然後在你的 App 裡面,你會有幾件事情要做:

  • Hina Chen
    Hina Chen
8 min read
VueJS

[IT 鐵人賽] new Vue v.s new Vue Day 7

大家一定會覺得這個標題很奇怪,不就都是 new Vue 嗎?是有什麼差別?對啊,其實都是 Vue 沒錯,但是就像是斯斯有兩種,Vue 也是有好多種不同面向。 是說現在斯斯好像不只兩種了。 new Vue 通常,我們在實作一個 App 的時候,最終我們使用了 new Vue 來將整個 App 綁定在某一個 DOM 的元件上。如果,你綁定一次不夠,想要綁定兩次呢?也不是不可以, import

  • Hina Chen
    Hina Chen
8 min read