[TOC] ---- ### Vue 文檔 https://cn.vuejs.org/guide/components/attrs.html https://play.vuejs.org/ ---- ### Vue 框架思考 Vue 不是純原生前端框架，因為它的完整功能需要通過腳手架工具進行編譯轉換后才能在瀏覽器中運行。 而且，這并不僅僅是單純的 ES 語法轉換，還包含了 Vue 獨有的特性和語法糖及語法規則的轉換。這些特性和語法糖很多都是 Vue 獨有的，因此我們不能將 Vue 單純看作是一個 Web 框架，而應該將 Vue 理解為一門前端編程語言，這樣才更為合理。 如果說原生的前端編程是標準的 Web 前端開發，那么 Vue 算是前端開發 的一種方言了。 前端的演進是由 Node.js 推動的，雖然 Node.js 沒有直接參與到前端界面的開發中，但卻以另一種方式推動了前端進入到一個全新的時代，這可以說是 Node.js 最初被發明時最出人意料的結果之一。 ---- ### 開始前準備 **安裝 vs code：** 建議下載 [System Installer](https://code.visualstudio.com/Download) 版本的安裝包，這樣可以自動更新。 **配置 npm 鏡像源：** ```shell $ npm config set registry https://registry.npmmirror.com ``` ---- ### 創建一個 Vue 應用 ```shell $ npm create vue@latest ``` ```shell $ cd project-name $ npm install $ npm run dev ``` ~~~ vbase... 可快速初始化模板 ~~~ ---- ### 選項式 API 與 組合式 API 選項式 API（配置式 API）與組合式 API最大的理念區別在于： 前者關注形式與結構的統一，導致形式上統一但實際上邏輯上較為松散。而后者注重聚合局部邏輯，看似可能會犧牲結構上的統一，但實際上更具高內聚性和低耦合性，提高了可維護性。 ---- ### ref、reavtive `ref()` 用于單個值（`Number`、`String`、`Boolean`、`Undefined`、`Null`），`reavtive()` 用于引用類型的值，Object 對象、Array 數組、Function 函數。 ---- ### 組件 **porps** 用于父組件向子組件傳遞數據，組件需要顯式聲明它所接受的 props，沒有聲明的 props 會成為 透傳的 attribute。 **slot** `<slot>` 元素是子元素提供的插槽出口 (slot outlet)，父元素提供的插槽內容 (slot content) 將在這里被渲染。 **深層組件繼承** https://cn.vuejs.org/guide/components/attrs.html#nested-component-inheritance attribute 透傳 僅限于 **根節點上渲染另一個組件** 的情況： ```vue <!-- <MyButton/> 的模板，只是渲染另一個組件 --> <BaseButton /> ``` 如果不是在根節點上渲染另一個組件，則沒有透傳繼承的效果了，不然也就沒有 “prop 逐級透傳” 問題了，也就不需要 依賴注入 了。 ```vue <p>MyButton</p> <!-- 非根節點渲染另一個組件 --> <BaseButton /> ``` **多個根節點的組件沒有自動 attribute 透傳行為。** ~~~ 組件可以聲明式創建，如 通過標簽引入單文件組件，也可以動態的 命令式創建渲染，如 `element-plus/message` 的使用方式。 ~~~ ---- ### 組合式函數 https://cn.vuejs.org/guide/reusability/composables.html#further-reading 推薦在純邏輯復用時使用組合式函數，在需要同時復用邏輯和視圖布局時使用無渲染組件。 **setup** https://cn.vuejs.org/api/sfc-script-setup.html 與普通的`<script>`只在組件被首次引入的時候執行一次不同，`<script setup>`中的代碼會在**每次組件實例被創建的時候執行**。 ---- ### 自定義組件 https://cn.vuejs.org/guide/reusability/custom-directives.html 組件是實現局部功能的代碼集合。 在`<script setup>`中，任何以`v`開頭的駝峰式命名的變量都可以被用作一個自定義指令。在上面的例子中，`vFocus`即可以在模板中以`v-focus`的形式使用。 ---- ### 事件、事件總線 1. 綁定：給組件綁定事件，設置回調函數，**回調函數邏輯定義在綁定操作的位置** 2. 觸發：組件觸發事件，執行回調函數，觸發源為被綁定事件的組件 給一個元素綁定一個事件，元素上的事件只能由元素自己觸發，而執行的回調邏輯取決于綁定事件時的定義。 事件總線的關鍵在于：a. 總線組件對所有組件可見，b. 事件回調邏輯定義在綁定操作的位置。因此，每個組件都可以給總線組件綁定事件并設置自定義的回調邏輯。這樣，在任意時機觸發總線上的任意事件，從而實現兄弟組件之間的通信。 > 通常，綁定事件的組件接收由觸發事件的組件發送的數據。 ---- ### 消息訂閱/發布 ... ---- ### Router https://router.vuejs.org/zh/ **嵌套路由** https://router.vuejs.org/zh/guide/essentials/nested-routes.html > 注意，以`/`開頭的嵌套路徑將被視為根路徑。這允許你利用組件嵌套，而不必使用嵌套的 URL。 嵌套路由的組件是嵌套結構的，但是 url 結構不一定得是嵌套結構的。 ---- ### Vuex Vuex 用于多個組件共享數據和邏輯（action 相當于公共的方法，geter 相當于公共的計算屬性） 已棄用，請使用 Pinia 代替。 ---- ### Pinia https://pinia.vuejs.org/zh/ ---- ### Vite https://cn.vitejs.dev/guide/why.html ---- ### VueUse https://vueuse.org/ https://github.com/vueuse/vueuse.git ---- ### Element https://element-plus.org/zh-CN/component/rate.html ---- ### TypeScript https://wangdoc.com/typescript/intro https://www.typescriptlang.org/zh/docs/handbook/typescript-in-5-minutes.html ---- ### ES6 https://es6.ruanyifeng.com/#docs/intro ---- ### 其它 #### 模塊導入是單例的 ```jsvascript // store.js import { reactive } from 'vue' // 全局：不論被導入多少次，這里都只會執行一次 alert(1) export const store = reactive({ count: 0, increment() { this.count++ } }) ``` ~~~ 導出 module.xxx = xxx; // module.hash(xxx.js) = xxx; ---- 導入 import { xxx } from xxx // import { xxx } from hash(xxx.js) ~~~ 前端模塊導入將模塊對象暴露在一個全局對象屬性上，實際上是在首次引入時自執行一次，后續引用則直接從全局暴露的屬性中獲取值。 這種方式類似于后端 PHP 中的 `include_once 'Class.php'`。 ---- #### 對前端發展的感想 https://cn.vuejs.org/guide/reusability/composables.html 怪不得前端發展得這么復雜，因為抽象層級太深了，不知道這是好還是不好。 好處是帶來強的靈活性，強大的功能，壞處是高度封裝接口、規則、約定、語法屏蔽了實現細節，越高的抽象越變得難以理解。應用開發人員離基礎越來越遠，對于新入行的開發人員來說，這是否算是陷入了技術繭房。 ~~~ ChatGPT 前端發展的復雜性確實部分源于抽象層級的深度。這帶來了一些好處，如強大的靈活性和功能，但同時也伴隨一些不利之處。高度封裝的接口、規則、約定和語法使得實現細節變得難以理解，尤其是隨著抽象層級的提升。 優勢在于，這種高度抽象可以提供更高的開發效率，使得前端開發更加靈活且功能強大。然而，不可否認的是，對于應用開發人員而言，離開了基礎部分，有時確實可能感到越來越遙遠。這也可能導致新入行的開發人員陷入技術繭房，難以理解和掌握系統的底層細節。 在前端發展的過程中，平衡抽象和理解的難度是一個持續的挑戰。在選擇抽象層級時，需要權衡其帶來的便利和復雜性，以確保開發人員既能夠高效地構建應用，又能夠理解系統的底層運作。 ~~~ ---- #### 對新事物的一些感想 新時代的產品取代舊時代的產品沒有任何理由，甚至不存在競爭，完全是從另一個維度的降維打擊。 就如同 直播誕生多少年了，YY等難道沒發現直播帶貨嗎，難道沒有先天優勢嗎，為什么直播帶貨在抖音上生長出來時，好像沒有它們什么事呢？它們為何沉寂了一般，為什么本是自己的主場，如今卻淪落到連杵著那看戲的資格都沒有呢？ 視頻拍客也多少年了，愛優騰為什么沒跑出短視頻和B站的生態呢，尾大不掉，路徑依賴？ 新事物取待舊事物無關任何，每個時代有屬于每個時代的產品。 打敗微信的一定不是另一個微信，但此刻一定有一個產品在某個角落孕育著，等時機成熟時，破土而出，將徹底終結微信，從而完成推動歷史循環這一環的任務。 新技術取代舊技術也是一樣，ES module 模塊化規范誕生之前各種模塊化方案層出不窮，但是 ES 模塊方案標準化后，模塊化方案百家爭鳴的時代一夜之間全部結束了。