tag vue.js

標籤
貢獻382
541
05:55 PM · Oct 25 ,2025

@vue.js / 博客 RSS 訂閱

銀之夏雪 - Vue 3 vs Vue 2:深入解析從性能優化到源碼層面的進化

Vue.js 是當今前端開發中最受歡迎的框架之一。隨着 Vue 3 的發佈,它在性能優化、開發體驗、響應式系統、構建工具和熱更新等多個方面都帶來了巨大提升。本文將深入剖析 Vue 3 的進化,包括其 源碼實現 方面的優化,如 diff算法、靜態標記、編譯優化 ,以及 Vue 3 在熱更新、構建工具上的改進。 1. 性能提升:底層優化的革命 1.1 響應式系統的改進:從 Object.defineP

vue2 , vue.js , vue3 , 前端 , Javascript

收藏 評論

不可能的是 - vue-loader中引入模板預處理器

vue-loader 是一個 webpack 的 loader,可以將指定格式編寫的 Vue 組件轉換為 JavaScript 模塊 同時,vue-loader 支持使用非默認語言,通過設置語言塊的lang屬性,就可以使用指定的預處理器,比如最常見的sass 語法: style lang="sass" ... /style 這裏重點討論使用不同的js模板引擎作為預處理器,

vue-loader , vue.js , pug , dot.js , Javascript

收藏 評論

愈宇垣 - 如何在Vue3項目中安裝使用Tailwind CSS 以及通過Tailwind CSS插件實現卡片的3D翻轉效果?

Tailwind CSS簡單介紹 對於 Tailwind CSS 想必大家都有所耳聞,是一種快速 UI 開發的實用工具集 原子化 CSS 框架,而對於 如何組織CSS規則,可分為兩個派別 [語義化CSS] 與 [原子化CSS],[語義化CSS] 比較好理解,例如:從這幾段CSS源碼就可以大概知曉需求是想當鼠標停留在文字上時實現一個基礎的提示框內容以及定位的方式等【此段CSS源碼來源於 菜鳥

vue.js , tailwind-css , visual-studio , postcss , npm

收藏 評論

好像還可以 - vue 甘特圖 vxe-gantt table 依賴線的使用,配置連接線

vue 甘特圖 vxe-gantt table 依賴線的使用,配置連接線 連接線有幾種類型: FinishToFinish:完成到完成,表示一個任務必須在另一個任務完成之後才能完成 StartToStart:開始後才開始,表示一個活動結束了,另一個活動才能開始,它們之間按先後順序進行 FinishToStart:結束後才開始,表示一個任務必須在另一個任務開始之前完成 StartToFin

vue.js , gantt , 前端開發

收藏 評論

明未為洺 - vue導出pdf

vue中實現頁面導出pdf的功能 所需插件 html2canvas和pdfmake 原理就是將頁面截圖,然後生成pdf文件,具體代碼如下 const main = ref() async function exportPdf() { const canvas = await html2canvas(main.value, { allowTaint: true, scal

vue.js , pdfmake , html2canvas , vue3

收藏 評論

阿里雲ESA - 開發者集合!【必看教程】阿里雲ESA Pages大賽部署全流程

一、前置條件 開通阿里雲ESA邊緣安全加速產品,並開通“函數和Pages”服務。 擁有一個可用的Github賬號,並將本地項目上傳至Github倉庫。具體步驟可參考:本地項目如何上傳至GitHub倉庫。 二、創建構建配置文件esa.jsonc 您需要在Github倉庫的根目錄創建esa.jsonc文件(或在ESA控制枱創建Pages項目時填寫構建參數),以便讓ESA瞭解您倉庫的構建邏輯。這

vue.js , 教程 , npm , HTML , 前端

收藏 評論

兔子先森 - 企業微信關聯微信小程序

綁定 入口:企業微信管理後台 需要企業微信管理員賬號登錄 1、進入企業微信管理後台,找到應用管理,創建應用 2、選擇已有的小程序創建 3、此時會跳轉到公眾平台授權登錄,需要小程序管理員掃碼登錄 4、登錄完成後會彈出一個界面,該界面就是關聯的小程序界面,在該界面選擇可見範圍:部門/成員 之後點擊創建即可 5、創建之後就可以在工作台看

react , vue.js , HTML , 前端 , Javascript

收藏 評論

海洋之藍 - vue2+vant2 使用rem進行瀏覽器適配

根據VANT官方説明,需要在項目中安裝兩個插件即可。 如果需要使用 rem 單位進行適配,推薦使用以下兩個工具: postcss-pxtorem 是一款 PostCSS 插件,用於將 px 單位轉化為 rem 單位 lib-flexible 用於設置 rem 基準值 但是昨天在安裝使用的時候,出了問題。提示錯誤,打開項目頁面也是空白了。於是百度了下,發現網絡上的文章都是抄襲。基本沒有解決問題,經

vue.js , vant , rem

收藏 評論

chaumet - Vue中的虛擬DOM及diff算法

虛擬dom 為什麼出現: 瀏覽器解析一個html大致分為五步:創建DOM tree – 創建Style Rules - 構建Render tree - 佈局Layout – 繪製Painting。每次對真實dom進行操作的時候,瀏覽器都會從構建dom樹開始從頭到尾執行一遍流程。真實的dom操作代價昂貴,操作頻繁還會引起頁面卡頓影響用户體驗,虛擬dom就是為了解決這個瀏覽器性能問題才被創造出

vue.js , virtual-dom , diff , Javascript

收藏 評論

vistart - Vue3與React構建可擴展Web應用的技術方案深度研究報告(2024-2025)

研究概覽 基於對2024-2025年最新技術趨勢、企業實踐案例和市場數據的深入研究,本報告全面分析了Vue3和React在構建可擴展web應用方面的技術方案。研究發現,兩個框架在技術架構、開發範式、安全性能等方面各有優勢,選擇需要根據團隊規模、項目需求和市場定位來決定。 1. 可擴展Web應用的設計範式對比 Vue3的組件化設計模式和Composition API Composition API最

react , vue.js , 開發 , typescript , 前端

收藏 評論

牙小木木 - electorn的不同窗口對localstorage的狀態更新的同步

electron的不同窗口(渲染進程)之間,如果想要同步localstorage中的狀態,只用pina+computer可以實現嗎?還是需要依賴electron的主進程廣播方式給不同的窗口,窗口通過監聽對應的channel來改變狀態? 比如我有homepage和dailpage兩個頁面。想對其中一個選項進行雙向同步。如何實現呢? 一種常見的做法是: 每個渲染進程,結合pinna來管理狀態,且

vue.js , pinia , electron , electron-store

收藏 評論

OpenTiny社區 - TinyVue:與 Vue 交往八年的組件庫

本文由體驗技術團隊莫春輝老師原創~ 去年因故停辦的 VueConf,今年如約在深圳舉行。作為東道主 上屆 VueConf 講師的我,沒有理由不來湊個熱鬧。大會結束後,我見裕波在朋友圈轉發 Jinjiang 的文章《我和 Vue.js 的十年》,我就在下面打趣道:“過兩年我也寫篇同名文章”,然後裕波回覆:“先寫一個我和 Vue 的八週年”。我尋思,我那十分鐘的閃電演講,有人吐槽沒有乾貨,比如同時支

vue.js , 組件庫 , 開源項目介紹 , 前端 , Javascript

收藏 評論

小帆聊前端 - Vue3 組件庫深度解讀:從開發到發佈,打造企業級可複用組件生態

Vue3 組件庫深度解讀:從開發到發佈,打造企業級可複用組件生態 前言:組件庫開發的那些 “血淚坑” “為什麼封裝的組件在不同項目中樣式衝突?” “組件 props 設計混亂,使用者不知道該傳什麼?” “函數式調用組件(如 Message)怎麼實現掛載與銷燬?” “打包後體積臃腫,按需引入失效?” “發佈到 npm 後,別人安裝了卻用不了?” 組件庫是前端工程化的核心產物 —— 它能解決 “重複造

vue.js , 組件庫 , 前端 , Javascript

收藏 評論

農民工前端 - 基於Element UI的級聯選擇器實現:子父節點異構名稱映射與無子級數據優雅處理方案

摘要 本文詳細介紹了一種在Vue.js+Element UI環境中實現的級聯選擇器解決方案,重點解決以下兩個技術難點:1)父子節點顯示字段名稱不一致時的映射轉換問題;2)無子級數據時的友好提示與交互控制。方案通過動態懶加載與數據轉換機制,實現了異構數據源的統一展示與空狀態管理。 效果展示 技術背景 在企業級前端開發中,級聯選擇器是處理層級數據的常用組件。Elemen

vue.js , 字段 , 前端開發 , 子節點 , Javascript

收藏 評論

質數的孤島 - 前端權限與登錄驗證體系

🧠 前端權限與登錄驗證體系 🔐 1. 認證機制 (Authentication) 核心目標:確認“你是誰”,保持登錄狀態 Token 方案 (JWT) 流程:登錄 → 後端簽發 Token → 前端存儲 → 請求攜帶 Token → 後端驗證 存儲位置 localStorage:常用,持久化好,但需防 XSS。 Http

vue.js , typescript , 前端 , Javascript

收藏 評論

OpenTiny社區 - 專訪|OpenTiny 開源社區 常浩:完成比完美更重要

前言 2023年已過大半,備受關注的 OpenTiny*開源之夏活動也順利結項。開源之夏由中國科學院軟件研究所發起的計劃,目的在於鼓勵在校學生積極參與開源軟件的開發維護,推動優秀開源軟件社區的繁榮發展。該活動聯合各大開源社區,聚焦於關鍵開源軟件的開發與維護,向全球高校學生開放報名。學生可自主選擇感興趣的項目進行申請,一旦中選,他們將在經驗豐富的項目開發者(社區導師)的指導下進行開發。根據項目的難易

vue.js , 富文本編輯器 , 開源 , Javascript

收藏 評論

ligulalei - vue+vux scrollTop 實現定位到具體dom

先看一下最終的運行效果。 項目背景介紹: 技術棧: vue+vux+nodejs 需求:對汽車品牌列表可以按照字母進行索引定位 在開發中實現這種需求,心想還不是小菜一碟,作為一個飽經bug的程序員,別的我就不吹了,最起碼Ctrl+C用的還是蠻不錯的。 雖然我的複製能力MAX,但最起碼的功能點還是要先梳理一下。 要實現這個功能統共分兩步, 第一根據點擊找到

vue.js , vux

收藏 評論

kayo5994 - Vue 響應式原理剖析 —— 從實例化、渲染到數據更新(上)

概況 最近對一個基於 Vue 項目的 Sentry Issue 進行治理時,發現了大量 Issue 都是 Vue 內部邏輯引起的,為了更好地去解決問題,因此也複習了一遍 Vue2 的原理。 相比起 Vue3 更清晰的項目結構和實現,Vue2 中各個部分的實現存在較多的耦合,也導致其邏輯梳理起來較為複雜。其中「響應式」的部分是最為複雜也是最重要的一環,實際項目中大部分的 Issue 也與其相關,如

框架學習 , vue.js , 觀察者模式 , 框架源碼 , 響應式

收藏 評論

Liane - Vue3-Vue2實現數據響應式的區別

Vue2實現響應式的核心: 對象:通過defineProperty對對象的已有屬性值的讀取和修改進行劫持(監視/攔截) 數組:通過重寫數組更新數組一系列更新元素的方法來實現元素修改的劫持 let data = { name: 'Liane', age: 18 } //模擬組件實例 let _this = {} //Object.defaineProperty()用法 for(le

vue.js , 代理 , defineproperty , vue3 , 響應式

收藏 評論

小謳 - 小程序重構 [cnode社區]:mpvue + 開源api,現已上線!

歡迎關注前端小謳的github,閲讀更多原創技術文章 閒暇時光表浪費,由於技術棧一直用的vue,因此用 mpVue 開發了小程序版本的 cnode 社區,api 也都是官網開源的。有人會問 “mpvue不是已經停止維護了嘛?”——的確是的,而且使用起來有很有坑。但這是我第一次寫小程序,找個最相近的語言最適合——無論選擇哪種技術棧,產品要完整做出來才行。小程序現已上線,後續還將逐步嘗試在tar

vue.js , node.js , 小程序 , mpvue , Javascript

收藏 評論

微芒不朽 - 別再用mixin了!Vue3自定義Hooks讓邏輯複用爽到飛起

前言 隨着 Vue 3 的普及,Composition API 成為了構建複雜應用的主流方式。相比 Options API,Composition API 提供了更好的邏輯組織和複用能力。而自定義 Hooks 正是這一能力的核心體現,它讓我們能夠將業務邏輯抽象成可複用的函數,極大地提升了代碼的可維護性和開發效率。 什麼是自定義 Hooks? 自定義 Hooks 是基於 Composition AP

vue.js , 前端 , Javascript

收藏 評論

慕非欽° - Vue3 Hook詳解:提升組件邏輯複用和可維護性的利器

Vue3引入了Hooks,這是一種新的組件邏輯複用方式,旨在解決Vue2中Mixin和高階組件的一些問題。本文將深入探討Vue3中的Hooks,以及如何利用它們提高組件邏輯的可維護性和複用性。 1. 什麼是Vue3 Hooks? Vue3 Hooks是一種函數式的API,允許我們在組件之間複用狀態邏輯。這些函數包括setup、reactive、ref等,以及一系列生命週期函數如onMounted、

vue.js , vue3 , hook , 前端 , Javascript

收藏 評論

新茶十九 - Vue 3 深入瞭解,那些很少有人知道的實用特性和技巧

1. 深層響應式控制 shallowRef - 淺層 Ref import { shallowRef, triggerRef } from 'vue' const state = shallowRef({ count: 0, nested: { value: 1 } // 這個變化不會被自動追蹤 }) // 只有直接賦值會觸發更新 state.value = { c

vue.js , 響應式 , 前端開發 , ide , Javascript

收藏 評論

灬都是個謎 - vue3 模板編譯 —— 把 v-model 默認改為 v-model:value

📰 前言 在 Vue3 中,v-model 指令默認綁定到組件的 modelValue 屬性上。 但如果我們想要的是默認綁定到 value 屬性呢? 我們可以使用 AST(抽象語法樹) 轉換來實現這一點。 🌈 在線演示 📄 vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/pl

vue.js , vue3 , 編譯原理

收藏 評論