VueJS

[VueJS] 重新檢視 lifecycle 與 vue-router

由於遇到了一些 Google reCAPTCHA 的狀況,所以剛好找時間來重新檢視一下 Vue 元件的生命週期這件事。其實也不是 Vue 本身的問題,但是很奇妙的是,我真的就是遇到這種狀況。 剛好複習一下也好。 -------------------------------------------------------------------------------- Lifecycle 首先還是先複習一下官方這張說明圖片, > https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 接著回想一下我上次寫過,關於 Vue-Router 外面 [https://blog.hinablue.me/vuejs-guan-yu-vue-router-wai-mian-de-liang-san-shi/

[VUEJS] 關於 Functional Component 的邪門歪道

上一回有提到動態載入的事情,既然提到了動態的元件載入,就不得不提一下 functional component 這個東西。 是說,也沒有太多神奇的地方,只是借用了 React 的東西拿來班門弄斧一下而已。 -------------------------------------------------------------------------------- Functional Component 官方文件 [https://vuejs.org/v2/guide/render-function.html#Functional-Components] 有提到詳細的功能,有興趣的人可以先去看看。基本上他就是一個無狀態、不屬於任何生命週期的一種元件。 用這種元件的好處是什麼? 1. 預先載入其他的元件 2. 預先處理邏輯 官方的範例當中,

[VueJS] 關於動態載入這件事

因為有一些需求的緣故,所以需要做到動態載入元件。想當然爾,事情不是想像中的那麼簡單。雖然說 VueJS 已經很方便了,不過做起來還是有一些地方需要留意 -------------------------------------------------------------------------------- 動態元件 VueJS 有一個 :is 可以用,詳細的使用辦法可以參考官方說明 [https://vuejs.org/v2/api/#is]。 import myComponent from 'components/myComponent.vue' export default { components: { myComponent: myComponent }, data

[VueJS] 關於 vue-router 外面的兩三事

最近因為某些需求,所以需要把一些動作放在 Vue 外面,但是由於 Vue 整個生命週期的關係,所以有些事情沒辦法在元件當中操作。所以就把歪腦筋動到 vue-router 身上,後來發現,很多動作還是會有些意外發生。 我們就來聊一下那些看似合理的 意外! -------------------------------------------------------------------------------- 引言 以下皆是在 Vue 2.3/Vue-router 2.5 含以上版本測試,如果你不是該版本或以上,請斟酌服用。 Lifecycle 與 Vue-router 2.5 一開始還是要請出官方的圖來打一點預防針,

[VueJS] vuex 的五十道陰影

不是那個五十道陰影,是說我也還沒看過。只是說,人在江湖跑,哪有不挨刀,總是要挨個幾刀才能算是大哥嘛(是嗎? 所以身為一個專業的菜蟲農夫,偶爾被鋤頭打到腳指頭也是很合理的(欸不對! -------------------------------------------------------------------------------- 最近很流行作弊的表,剛好 vuex 也有一份,如果你沒看過,現在讓你看看(當然不是我整理的,網路上神人很多。 > https://vuejs-tips.github.io/vuex-cheatsheet/ 這表沒什麼大毛病,不過這樣的東西其實還是需要對 vuex 有相對程度的瞭解,看起來才會有些用處,不然對於初學者來說,她就只是一個整理得很漂亮的表單而已。 簡介 既然