wanyu.hashnode.devVue Patch Flag 怎麼用位元運算快速判斷動態更新?前言 小的才疏學淺、孤陋寡聞,是一直到看了 Vue 渲染機制的文件,才知道有位元運算這種工具(概念?)的存在。寫給同樣第一次看到位元運算的人,看完這篇,就能更搞懂 patchFlag 的運作原理了! 位元運算 在 從模板到畫面,Vue 的渲染機制是什麼?(下)的更新類型標記中,我們有提到,Vue 在編譯時會替各個元素標上更新類型的記號,並且用位元運算進行檢查。 到底何謂「用位元運算進行檢查」?我們先貼上 Vue 原始碼中的 patchFlag.ts 程式碼片段: export enum Patc...Jan 27·1 min read
wanyu.hashnode.dev從模板到畫面,Vue 的渲染機制是什麼?(下)如果還不知道 Virtual DOM、vnode、Compile 以及 Mount,可以先看上篇:從模板到畫面,Vue 的渲染機制是什麼?(上) 前言 介紹完 Vue 在編譯以及掛載時做了什麼,接下來要介紹 Vue 更新畫面時有多麼鬼靈精怪,像變魔術一樣,提升 Virtual DOM 的性能。看完文件,真的非常讚歎欽佩尤大大⋯⋯。 依賴更新了,畫面也要更新!這就是 Patch。 當使用者與網頁互動,響應式狀態發生變化時,Vue 會重新執行對應 component 的 render functio...Jan 26·3 min read
wanyu.hashnode.dev從模板到畫面,Vue 的渲染機制是什麼?(上)前言 從接觸 Vue 3(以下稱 Vue)到現在已經有快 2 年的時間,卻一直沒有認真啃過文件,了解 Vue 背後到底用了什麼黑魔法,讓原本寫 React 時用來避免不必要 rerender 的 function 概念,在 Vue 的世界裡消失殆盡。 也因為寫了快 2 年,卻還是不夠清楚 Vue 的生命週期,以及一直用到的 onMounted 到底是在 mount 什麼東西,所以誕生了這篇文章,希望寫完後,能幫助自己更了解 Vue 從開發環境走到瀏覽器的過程。 篇幅有點長,所以分成上下兩篇,這篇...Jan 23·2 min read
wanyu.hashnode.dev需求反反覆覆,快受不了了!前言 相信大家多少有遇過需求方反反覆覆的情形,且需求方有各式各樣我沒想到的問題,他們有時無法想像使用者行為,有時無法理解頁面操作邏輯,且對產品完成的樣子沒有畫面、根本不知道自己要什麼等。常常要等到 demo 了、看到實際畫面了,才知道原來這樣操作起來很奇怪(即使我們已經在確認需求時告知會很怪),然後又退回來請我們修改。 我曾經因為需求方無法事先想像使用者對他們設計的畫面跟資料交互的邏輯,在看到專案完成的 demo 才發現設計的很糟,請我們將多選的選項邏輯改成單選;改好的下一次 demo,他們又突...Aug 21, 2025·1 min read