2019 - HINA::工程幼稚園

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

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

VueJS

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

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

VueJS

[IT 鐵人賽] 動態載入 webpack 簡易設定 Day 24

今天說好要提到 Webpack 的部分，然後，我最近其實有點疲憊，所以今天就先講一下目前在使用的 Webpack 就好了。只是說，我可能不會多加解釋就是。說好的 Webpack 'use strict' /** * @author Scar Wu, Hina Chen. */ // Load Libraries const path = require('path') const webpack = require('webpack') const webpackLodashPlugin = require('lodash-webpack-plugin')

VueJS

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

Vue 元件溝通

[IT 鐵人賽] Vue App 的溝通方式 Day 15

鐵人賽至今也過半了，所以為了慶祝一下，我們最後來講講各種 Vue App 之間的溝通方法。扣除掉你可能是使用 Webpack 來封裝你的 App 之外，我們也會提及在不同的封裝之間，我們的 App 要如何來進行溝通。 App 與 App 我們之前有提過 new Vue 之間的一些狀況， new Vue v.s new Vue Day 7 當我們在同一個封裝過程中，這兩個 App

Vue 元件溝通

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

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

Vuex

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

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

2019

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

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

VueJS

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

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

2019

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

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

VueJS

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

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

VueJS

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

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

VueJS

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

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

ITHome

[IT 鐵人賽] Component 魔術方法 Day 6

這是關於元件方法的最後一篇，實際上來說，Vue.options 並不能算是很魔術的方法。如果把他歸類為奇技淫巧可能比較適合（政治正確）。由於元件的註冊過程當中，會將相對應的實體放到這個屬性當中，所以，我們就可以利用這個地方來做一些事情。身為邊緣人，我最喜歡這種邪門歪道了。 App 實體 a.k.k Vue 替身我們在使用 Vue 的時候，在最後一定是使用 new Vue 之後再 $mount 到某個 DOM 底下。 import Vue