原创 面試官：在原生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

原创 看不懂來打我，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 1

原创 面試官：只知道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

原创 沒有虛擬DOM版本的vue（Vue Vapor）

前言 隨着Svelte和SolidJS的流行，無虛擬DOM模式逐漸開始火了起來。vue也推出了無虛擬DOM模式的版本，就是我們今天要講的Vue Vapor。 什麼是Vue Vapor Vue Vapor是一個無虛擬DOM模式版本的vue。這

2024-01-26 14:21:55 3

原创 有了Composition API後，有些場景或許你不需要pinia了

前言 日常開發時有些業務場景功能很複雜，如果將所有代碼都寫在一個vue組件中，那個vue文件的代碼量可能就幾千行了，維護極其困難。這時我們就需要將其拆分爲多個組件，拆完組件後就需要在不同組件間共享數據和業務邏輯。有的小夥伴會選擇將數據和業務

2024-01-24 14:23:51 1

原创 5分鐘教會你如何在生產環境debug代碼

前言 有時出現的線上bug在測試環境死活都不能復現，靠review代碼猜測bug出現的原因，然後盲改代碼直接在線上測試明顯不靠譜。這時我們就需要在生產環境中debug代碼，快速找到bug的原因，然後將鍋丟出去。 生產環境的代碼一般都是關閉

2024-01-19 14:21:46 2