本期技術週刊專屬 Vue，歡迎大家閲讀 ～
文章推薦
在 Vue 中為什麼不推薦用 index 做 key
Vue 默認按照“就地更新”的策略來更新通過 v-for 渲染的元素列表。當數據項的順序改變時，Vue 不會隨之移動 DOM 元素的順序，而是就地更新每個元素，確保它們在原本指定的索引位置上渲染。
默認模式是高效的，但只適用於列表渲染輸出的結果不依賴子組件狀態或者臨時 DOM 狀態 (例如表單輸入值) 的情況。
Spring Security + Vue + Flowable 怎麼玩？
玩過工作流的小夥伴應該都知道，工作流中其實自帶了一套用户系統，但是我們自己的系統往往也有自己的用户體系，那麼如何將兩者融合起來呢？或者説是否有必要將兩者融合起來呢？
如果你想將自己系統的用户體系和 flowable 中的用户體系融合起來，那麼整體上來説，大概就是兩種辦法吧...
用 Vue.js 寫一個命令行貪吃蛇遊戲
本文要分享的是如何使用 Vue.js 實現一個命令行貪吃蛇遊戲(temir-snake-game)。對於貪吃蛇遊戲想必大家都不陌生了，使用 Vue.js 實現一個 Web 版的貪吃蛇遊戲似乎沒什麼難度，那如果是命令行版的呢？是不是你會對它的實現原理感興趣呢？讓我們開始吧！
Vue 樹圖組件封裝
其實樹圖組件很好理解，就是通過遞歸自身調用自身來實現樹圖。再説明白一點，最好在頭腦中有一個畫面，更加便於理解和開發。
- 就是我們先定義一個組件，在這個組件裏面把第一個節點畫出來
- 然後再這第一個節點下面進行遞歸調用自身組件。這樣就可以實現像糖葫蘆一樣一串節點
- 但這只是一串，並不是樹，所以還需要在這個基礎上，畫節點的地方加上循環的畫節點。這樣就成了樹了。
總的來説先易後難，先把主幹理解清楚，然後慢慢的往這個樹幹上面加樹枝，這樣一棵大樹就畫好了
elementui 源碼學習之仿寫一個 el-link
簡而言之，el-link 組件就是給a標籤包了一層，加上一些樣式。故 link 組件除了擁有 a 標籤的功能，還需要有一些能夠使用的樣式效果。所以，我們仿寫這個組件標籤的時候主要是複習一下傳參的變量和樣式的搭配，從而實現我們需要的效果
使用 Vite 構建工具快速創建 Vue 項目（ Vue3.0 項目開發）
Vue 項目的優點就是組件化開發，將每個功能、或者是每個頁面、容器分成各個組件，一方面是便於維護，另一方面是多人開發的時候也是可以提高效率。可以增加代碼的複用性、可維護性和可測試性。提高開發效率，方便重複使用，簡化調試步驟，提升整個項目的可維護性，便於協同開發，是高內聚、低耦合代碼的實踐。
代碼目錄中的 components 目錄就是組件的目錄，在這裏可以根據自己的項目去創建各個組件，直接在組件裏面寫 html 代碼、以及調用 vue 的 api 去實現很多功能，例如 axios 網絡請求，同時，組件內也可以寫 css 樣式。
Vue3 模板編譯原理
Vue 的編譯模塊包含 4 個目錄：
compiler-core compiler-dom // 瀏覽器 compiler-sfc // 單文件組件 compiler-ssr // 服務端渲染其中 compiler-core 模塊是 Vue 編譯的核心模塊，並且是平台無關的。而剩下的三個都是在 compiler-core 的基礎上針對不同的平台作了適配處理。
Vue 的編譯分為三個階段，分別是：parse、transform、codegen。
其中 parse 階段將模板字符串轉化為語法抽象樹 AST。transform 階段則是對 AST 進行了一些轉換處理。codegen 階段根據 AST 生成對應的 render 函數字符串。
問答推薦
Vue.config.js devServer 開發階段和項目上線有什麼區別？
Vue3 導出數據為 excel，fs 是被廢棄了嗎？
Vue 中想定位觸發 watch 的函數調用，怎麼找？
Vue 如何觸發 computed 更新？
Vue 渲染括號問題?
Vue 多個異步請求時的 token 失效？
Vue 程序明明賦值成功但頁面上的值沒有變？
Vue 頁面拿不到後端屬性，報 Uncaught (in promise) TypeError 錯誤？
Vue 使用 vuex 數據更新問題？
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
