原创 終於搞懂了！原來 Vue 3 的 generate 是這樣生成 render 函數的

前言 在之前的 面試官：來說說vue3是怎麼處理內置的v-for、v-model等指令？ 文章中講了transform階段處理完v-for、v-model等指令後，會生成一棵javascript AST抽象語法樹。這篇文章我們來接着講gen

2024-05-20 14:26:19

原创 vue3編譯優化之“靜態提升”

前言 在上一篇 vue3早已具備拋棄虛擬DOM的能力了文章中講了對於動態節點，vue做的優化是將這些動態節點收集起來，然後當響應式變量修改後進行靶向更新。那麼vue對靜態節點有沒有做什麼優化呢？答案是：當然有，對於靜態節點會進行“靜態提升”

2024-05-14 14:26:37 1

原创 vue3早已具備拋棄虛擬DOM的能力了

前言 jquery時代更新視圖是直接對DOM進行操作，缺點是頻繁操作真實 DOM，性能差。react和vue時代引入了虛擬DOM，更新視圖是對新舊虛擬DOM樹進行一層層的遍歷比較，然後找出需要更新的DOM節點進行更新。這樣做的缺點就是如果D

2024-05-06 14:23:16

原创 面試官：在原生input上面使用v-model和組件上面使用有什麼區別？

前言 還是上一篇面試官：來說說vue3是怎麼處理內置的v-for、v-model等指令？ 文章的那個粉絲，面試官接着問了他另外一個v-model的問題。 面試官：vue3的v-model都用過吧，來講講。 粉絲：v-model其實就

2024-04-24 14:22:31

原创 面試官：來說說vue3是怎麼處理內置的v-for、v-model等指令？

前言 最近有粉絲找到我，說被面試官給問懵了。 粉絲：面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM？”，當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM，最後就是

2024-04-18 14:21:23 1

原创 看不懂來打我，vue3如何將template編譯成render函數

前言 在之前的 通過debug搞清楚.vue文件怎麼變成.js文件 文章中我們講過了vue文件是如何編譯成js文件，通過那篇文章我們知道了，template編譯爲render函數底層就是調用了@vue/compiler-sfc包暴露出來的c

2024-04-11 14:21:30 1

原创 父組件明明使用了v-model，子組件竟然可以不用定義props和emit拋出事件，快來看看吧

前言 vue3.4增加了defineModel宏函數，在子組件內修改了defineModel的返回值，父組件上v-model綁定的變量就會被更新。大家都知道v-model是:modelValue和@update:modelValue的語法糖

2024-04-08 14:24:32 3

原创 面試官：只知道v-model是:modelValue和@onUpdate語法糖，那你可以走了

前言 我們每天都在用v-model，並且大家都知道在vue3中v-model是:modelValue和@update:modelValue的語法糖。那你知道v-model指令是如何變成組件上的modelValue屬性和@update:mod

2024-03-26 14:21:58 1

原创 天天用defineEmits宏函數，竟然不知道編譯後是vue2的選項式API？

前言 我們每天都在使用 defineEmits 宏函數，但是你知道defineEmits 宏函數經過編譯後其實就是vue2的選項式API嗎？通過回答下面兩個問題，我將逐步爲你揭祕defineEmits 宏函數的神祕面紗。爲什麼 Vue 的

2024-03-19 14:21:21

原创 爲什麼defineProps宏函數不需要從vue中import導入？

前言 我們每天寫vue代碼時都在用defineProps，但是你有沒有思考過下面這些問題。爲什麼defineProps不需要import導入？爲什麼不能在非setup頂層使用defineProps？defineProps是如何將聲明的 pr

2024-03-13 14:25:09

原创 通過debug搞清楚.vue文件怎麼變成.js文件

前言 我們每天寫的vue代碼都是寫在vue文件中，但是瀏覽器卻只認識html、css、js等文件類型。所以這個時候就需要一個工具將vue文件轉換爲瀏覽器能夠認識的js文件，想必你第一時間就想到了webpack或者vite。但是webpack

2024-03-07 14:22:03 1

原创 答應我，在vue中不要濫用watch好嗎？

前言 上週五晚上8點，開開心心的等着產品驗收完畢後就可以順利上線。結果產品突然找到我說要加需求，並且維護這一塊業務的同事已經下班走了，所以只有我來做。雖然內心一萬頭草泥馬在狂奔，但是嘴裏還是一口答應沒問題。由於這一塊業務很複雜並且我也不熟悉

2024-03-01 14:27:21

原创 Vue 3 的 setup語法糖到底是什麼東西？

前言 我們每天寫vue3項目的時候都會使用setup語法糖，但是你有沒有思考過下面幾個問題。setup語法糖經過編譯後是什麼樣子的？爲什麼在setup頂層定義的變量可以在template中可以直接使用？爲什麼import一個組件後就可以直接

2024-02-26 14:30:23

原创 vue3的宏到底是什麼東西？

前言 從vue3開始vue引入了宏，比如defineProps、defineEmits等。我們每天寫vue代碼時都會使用到這些宏，但是你有沒有思考過vue中的宏到底是什麼？爲什麼這些宏不需要手動從vue中import？爲什麼只能在setup

2024-02-20 14:24:00 2

原创 一文搞懂 Vue3 defineModel 雙向綁定：告別繁瑣代碼！

前言 隨着vue3.4版本的發佈，defineModel也正式轉正了。它可以簡化父子組件之間的雙向綁定，是目前官方推薦的雙向綁定實現方式。 vue3.4以前如何實現雙向綁定 大家應該都知道v-model只是一個語法糖，實際就是給組件定義了m

2024-02-04 14:22:49 9