SegmentFault 思否技術週刊 -- 超實用 Vue 合集,請查收

Beverly發表於2022-06-29

Vue.js 是一個用於建立 web 互動介面的工具。其特點是

  • 簡潔 HTML 模板 + JSON 資料,再建立一個 Vue 例項,就這麼簡單。
  • 資料驅動 自動追蹤依賴的模板表示式和計算屬性。
  • 元件化 用解耦、可複用的元件來構造介面。
  • 輕量 ~24kb min+gzip,無依賴。
  • 快速 精確有效的非同步批量 DOM 更新。
  • 模組友好 通過 NPM 或 Bower 安裝,無縫融入你的工作流。

熱門文章

《Vue3 Composable最佳實踐(一)》

由於這種編寫VUE程式碼的方式相對較新,因此您可能想知道編寫組合式函式的最佳實踐是什麼呢?本系列教程可以作為您和您的團隊在進行組合式開發過程中的參考指南。
我們將涵蓋以下內容:
1.如何通過選項物件引數使您的組合更加可配置; ? 本篇主題
2.使用ref和unref使我們的引數更加靈活;
3.如何使你的返回值更有用;
4.為什麼從介面定義開始可以使你的組合式函式更強大;
5.如何使用非同步程式碼而無需“等待” - 使您的程式碼更易於理解;
不過,首先,我們需要確保我們對組合式函式的理解是一致的。我們先花點時間解釋一下什麼是組合式函式。

《Vue3.2 setup語法糖總結》

提示:Vue3.2 版本開始才能使用語法糖!
在 Vue3.0 中變數必須 return 出來,template中才能使用;而在 Vue3.2 中只需要在 script 標籤上加上 setup 屬性,無需 return,template 便可直接使用,非常的香啊!

《Vue.js 3.x 中跨層級元件如何傳遞資料?》

Vue.js 中,跨層級元件如果想要傳遞資料,我們可以直接使用 props 來將祖先元件的資料傳遞給子孫元件:

prop-drilling.png

注:上圖來自 Vue.js 官網:Prop Drilling

如上圖所示,中間元件 <Footer> 可能根本不需要這部分 props,但為了 <DeepChiild> 能訪問這些 props<Footer> 還是需要定義這些 props,並將其傳遞下去。

有人說我們可以使用 $attrs/$listeners,但依然還要經過中間層級,而使用 Vuex 又過於麻煩,Event Bus 又很容易導致邏輯分散,出現問題後難以定位。

那麼,有沒有其他方法可以實現直接從祖先元件傳遞資料給子孫元件呢?答案就是 provide/inject

祖先元件

《Vue.js 3.x 雙向繫結原理》

廢話不多說,我們先來看一個 v-model 基本的示例:
<input type="text" v-model="search">
首先,我們要明白一點的是:v-model 的本質是指令。因此,它跟我們一般的自定義指令是一樣的,需要實現 Vue.js 生命週期的鉤子函式。
其次,v-model 實現了雙向繫結,也就是:資料到 DOM 的單向流動、DOM 到資料的單向流動。
明白了上面這兩點,再來看程式碼就清晰多了。

《 分享 15 個 Vue3 全家桶開發的避坑經驗 》

最近入門 Vue3 並完成 3 個專案,遇到問題蠻多的,今天就花點時間整理一下,和大家分享 15 個比較常見的問題,基本都貼出對應文件地址,還請多看文件~
已經完成的 3 個專案基本都是使用 Vue3 (setup-script 模式)全家桶開發,因此主要分幾個方面總結:
Vue3
Vite
VueRouter
Pinia
ElementPlus

《通過差異化對比學習法,帶你回顧 Vue2 快速掌握 Vue3 》

Vue3 已經發布有一段時間了,同時也得到了各大廠商和社群的支援和眾多開發者喜愛,周邊生態也正在逐步完善。可謂是一片欣欣向榮的美景。本文意在通過梳理 Vue2 常用 api 通過差異化對比 Vue3,幫助你快速掌握 Vue3
本文假設你已經有一定 Vue2 實操經驗,不會過多描述 api 細節

《petite-vue原始碼剖析-雙向繫結v-model的工作原理》

雙向繫結 v-model 不僅僅是對可編輯HTML元素( select, input, textarea 和附帶 [contenteditable=true] )同時附加 v-bindv-on ,而且還能利用通過petite-vue附加給元素的 _value_trueValue_falseValue x 屬性提供儲存非字串值的能力。

《Vue3 如何實現全域性異常處理?》

在開發元件庫或者外掛,經常會需要進行全域性異常處理,從而實現:
全域性統一處理異常;
為開發者提示錯誤資訊;
方案降級處理等等。
那麼如何實現上面功能呢?
本文先簡單實現一個異常處理方法,然後結合 Vue3 原始碼中的實現詳細介紹,最後總結實現異常處理的幾個核心。
本文 Vue3 版本為 3.0.11

《 Vue 響應式原理 》

Vue 最獨特的特性之一,是非侵入式的響應系統。資料模型僅僅是普通的 JavaScript 物件。而當你修改它們時,檢視會進行更新。聊到 Vue 響應式實現原理,眾多開發者都知道實現的關鍵在於利用 Object.defineProperty , 但具體又是如何實現的呢,今天我們來一探究竟。

熱門問答

推薦課程

【思否程式設計】迎接Vue 3.0

內容介紹:

  • Vue 3.0的新變化
  • 開發團隊的設計思路(為什麼會有這些變化)
  • 我們應該怎麼準備

PS:大家想看哪些方面的技術內容,可以在評論區留言喔 ~
如有問題可以新增小姐姐微信~
image.png

相關文章