? ???? ??? ??? ?? 2023? ?? ??vue?? ?? ??? ??? ??(?? ??)? ???? ????. ??? ??? ???? ?? ??? ? ??? ????.
Vue-router ????? ??? ??????
- ?? ???/??: beforeEach, beforeResolve, afterEach
- Route ?? ??: beforeEnter
- ?? ?? ?? ??: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
(?? ?? ??: vue ?? ????)
Vue3.0?? Proxy? ???? Object.defineProperty? ??? ??? ??????
Object.defineProperty ???? ?? ??? ?? ??? ?????? ?? ??? ??? Vue??? ??/??? ?? ???? ???? ? ??? ???????(Vue? ?? ?? ??? ??? ? ?? ??). ? ??? ???? ?? Vue ?? ?? ? ?? ??? ???? ??? ????? ? ????
push(); pop(); shift(); unshift(); splice(); sort(); reverse();
? 7?? ??? ????? ??? ?? ??? ??? ??? ? ??? ??? ??? ??? ????. .
Object.defineProperty? ??? ??? ????? ? ???? ? ??? ? ??? ???? ???. Vue 2.x??? ??? ??? ?? + ??? ?? ??? ????? ??????. ?? ?? ???? ?? ??? ?????. ?? ??? ??? ??? ? ??? ? ?? ?????.
???? ?? ??? ?????? ? ??? ??? ? ????. ???? ???? ??? ??? ??? ???? ? ????. ???? ??? ??? ???? ?? ????.
v-for ?? ???? ??
?? ???? ?? ?? Vue? ?? ??? ????? ??? ??? ??? ??? ??/????? ????? ?????. ?? Vue?? vnode? ?? ??? ?????. ? ?? ?? diff ??? ? ???? ??? ? ????
? ?????: ?? ???? ??? ?? ???? ????? ????. key === b.key? ?? ?? ?? ???? ?? ? ????. ??? ? ??? ????.
Faster: ?? ???? ???? ? ??? ???? ?? ??? ?? ?? ?? ???? ????.
?? DOM?? ?? DOM?? ???? ??
???? ?????. ?? ????? Vue? ??? ??:
????
ast
??? ????,ast
? ??? ???? ?? JS ??? ?????(?? DOM? ???? ??) DOM)ast
樹,ast
用對象來描述真實的JS語法(將真實DOM轉換成虛擬DOM)優(yōu)化樹
將
ast
樹生成代碼
為什么Vue采用異步渲染呢?
Vue
是組件級更新,如果不采用異步更新,那么每次更新數(shù)據(jù)都會對當前組件進行重新渲染,所以為了性能, Vue
會在本輪數(shù)據(jù)更新后,在異步更新視圖。核心思想 nextTick
。
dep.notify()
通知 watcher進行更新, subs[i].update
依次調(diào)用 watcher 的 update
, queueWatcher
將watcher 去重放入隊列, nextTick( flushSchedulerQueue
?? ???
ast
???? ?? ??Vue? ??? ???? ???? ??? ??????
Vue
? ?? ?? ?? ???????. ??? ????? ???? ??? ???? ????? ??? ?? ?? ??? ?? ??????. ??? >Vue
? ??? ???? ??? ?? ?? ?????? ???????. ?? ???? nextTick
.
dep.notify()
? ????? ????? ???, subs[i].update
? ???? ????
? ??? ?????. queueWatcher ???? ???? ??? nextTick(<code> flashSchedulerQueue
)? ?? ??? ??? ???? (??????) ?? ????. - vue ?? ??? ???? ? ???? ????
- ??? ?? ?????. ??? ??? ?? ??? ??? ??? ????? ? ?? ???? ???? ???? ??? ??? ???? ?? ???? ?? ?? ??? ???? ??? ?????. object ??, ? ??(Object? ????)? ??? ??? ?? ??? ??? ??? ? ??? ???? ????.
MVC? MVVM? ???
MVC
MVC? ?? ??? Model View Controller?, Model-View-Controller? ??? ????? ?? ??????????? ?? : ??????? ?? ?????? ???? ??? ?????. ????? ?? ??? ??????? ???? ????? ??? ?????. ????View: ??? ??? ???? ??????? ?????. ????? ?? ?? ???? ???? ?????. ????????: ??? ?? ??? ???? ??????? ?????. ????? ????? ??? ???? ??, ??? ??? ????, ??? ???? ??? ?? ?????. MVC? ??? ????? ?? ???? ??? ???? ???? ?? ????? ????. ?, Model? Controller? ?????. ???? View? ?????. ??????MVVM??????MVVM? ??? VM ???? ?????????- ViewModel 層:做了兩件事達到了數(shù)據(jù)的雙向綁定 一是將【模型】轉化成【視圖】,即將后端傳遞的數(shù)據(jù)轉化成所看到的頁面。實現(xiàn)的方式是:數(shù)據(jù)綁定。二是將【視圖】轉化成【模型】,即將所看到的頁面轉化成后端的數(shù)據(jù)。實現(xiàn)的方式是:DOM 事件監(jiān)聽。
MVVM 與 MVC 最大的區(qū)別就是:它實現(xiàn)了 View 和 Model 的自動同步,也就是當 Model 的屬性改變時,我們不用再自己手動操作 Dom 元素,來改變 View 的顯示,而是改變屬性后該屬性對應 View 層顯示會自動改變(對應Vue數(shù)據(jù)驅動的思想)
整體看來,MVVM 比 MVC 精簡很多,不僅簡化了業(yè)務與界面的依賴,還解決了數(shù)據(jù)頻繁更新的問題,不用再用選擇器操作 DOM 元素。因為在 MVVM 中,View 不知道 Model 的存在,Model 和 ViewModel 也觀察不到 View,這種低耦合模式提高代碼的可重用性
注意:Vue 并沒有完全遵循 MVVM 的思想 這一點官網(wǎng)自己也有說明
那么問題來了 為什么官方要說 Vue 沒有完全遵循 MVVM 思想呢?
- 嚴格的 MVVM 要求 View 不能和 Model 直接通信,而 Vue 提供了$refs 這個屬性,讓 Model 可以直接操作 View,違反了這一規(guī)定,所以說 Vue 沒有完全遵循 MVVM。
Vue 為什么要用 vm.$set() 解決對象新增屬性不能響應的問題 ?你能說說如下代碼的實現(xiàn)原理么?
1)Vue為什么要用vm.$set() 解決對象新增屬性不能響應的問題
Vue使用了Object.defineProperty實現(xiàn)雙向數(shù)據(jù)綁定
在初始化實例時對屬性執(zhí)行 getter/setter 轉化
屬性必須在data對象上存在才能讓Vue將它轉換為響應式的(這也就造成了Vue無法檢測到對象屬性的添加或刪除)
所以Vue提供了Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)
2)接下來我們看看框架本身是如何實現(xiàn)的呢?
Vue 源碼位置:vue/src/core/instance/index.js
export?function?set?(target:?Array<any>?|?Object,?key:?any,?val:?any):?any?{ ??//?target?為數(shù)組?? ??if?(Array.isArray(target)?&&?isValidArrayIndex(key))?{ ????//?修改數(shù)組的長度,?避免索引>數(shù)組長度導致splcie()執(zhí)行有誤 ????target.length?=?Math.max(target.length,?key) ????//?利用數(shù)組的splice變異方法觸發(fā)響應式?? ????target.splice(key,?1,?val) ????return?val ??} ??//?key?已經(jīng)存在,直接修改屬性值?? ??if?(key?in?target?&&?!(key?in?Object.prototype))?{ ????target[key]?=?val ????return?val ??} ??const?ob?=?(target:?any).__ob__ ??//?target?本身就不是響應式數(shù)據(jù),?直接賦值 ??if?(!ob)?{ ????target[key]?=?val ????return?val ??} ??//?對屬性進行響應式處理 ??defineReactive(ob.value,?key,?val) ??ob.dep.notify() ??return?val }
我們閱讀以上源碼可知,vm.$set 的實現(xiàn)原理是:
如果目標是數(shù)組,直接使用數(shù)組的 splice 方法觸發(fā)相應式;
如果目標是對象,會先判讀屬性是否存在、對象是否是響應式,
最終如果要對屬性進行響應式處理,則是通過調(diào)用 defineReactive 方法進行響應式處理
defineReactive 方法就是 Vue 在初始化對象時,給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法
Vue3.0 和 2.0 的響應式原理區(qū)別
Vue3.x 改用 Proxy 替代 Object.defineProperty。因為 Proxy 可以直接監(jiān)聽對象和數(shù)組的變化,并且有多達 13 種攔截方法。
相關代碼如下
import?{?mutableHandlers?}?from?"./baseHandlers";?//?代理相關邏輯 import?{?isObject?}?from?"./util";?//?工具方法 export?function?reactive(target)?{ ??//?根據(jù)不同參數(shù)創(chuàng)建不同響應式對象 ??return?createReactiveObject(target,?mutableHandlers); } function?createReactiveObject(target,?baseHandler)?{ ??if?(!isObject(target))?{ ????return?target; ??} ??const?observed?=?new?Proxy(target,?baseHandler); ??return?observed; } const?get?=?createGetter(); const?set?=?createSetter(); function?createGetter()?{ ??return?function?get(target,?key,?receiver)?{ ????//?對獲取的值進行放射 ????const?res?=?Reflect.get(target,?key,?receiver); ????console.log("屬性獲取",?key); ????if?(isObject(res))?{ ??????//?如果獲取的值是對象類型,則返回當前對象的代理對象 ??????return?reactive(res); ????} ????return?res; ??}; } function?createSetter()?{ ??return?function?set(target,?key,?value,?receiver)?{ ????const?oldValue?=?target[key]; ????const?hadKey?=?hasOwn(target,?key); ????const?result?=?Reflect.set(target,?key,?value,?receiver); ????if?(!hadKey)?{ ??????console.log("屬性新增",?key,?value); ????}?else?if?(hasChanged(value,?oldValue))?{ ??????console.log("屬性值被修改",?key,?value); ????} ????return?result; ??}; } export?const?mutableHandlers?=?{ ??get,?//?當獲取屬性時調(diào)用此方法 ??set,?//?當修改屬性時調(diào)用此方法 };
Vue模版編譯原理知道嗎,能簡單說一下嗎?
簡單說,Vue的編譯過程就是將template
轉化為render
函數(shù)的過程。會經(jīng)歷以下階段:
- 生成AST樹
- 優(yōu)化
- codegen
首先解析模版,生成AST語法樹
(一種用JavaScript對象的形式來描述整個模板)。 使用大量的正則表達式對模板進行解析,遇到標簽、文本的時候都會執(zhí)行對應的鉤子進行相關處理。
Vue的數(shù)據(jù)是響應式的,但其實模板中并不是所有的數(shù)據(jù)都是響應式的。有一些數(shù)據(jù)首次渲染后就不會再變化,對應的DOM也不會變化。那么優(yōu)化過程就是深度遍歷AST樹,按照相關條件對樹節(jié)點進行標記。這些被標記的節(jié)點(靜態(tài)節(jié)點)我們就可以跳過對它們的比對
,對運行時的模板起到很大的優(yōu)化作用。
編譯的最后一步是將優(yōu)化后的AST樹轉換為可執(zhí)行的代碼
。
MVVM的優(yōu)缺點?
優(yōu)點:
- 分離視圖(View)和模型(Model),降低代碼耦合,提?視圖或者邏輯的重?性: ?如視圖(View)可以獨?于Model變化和修改,?個ViewModel可以綁定不同的"View"上,當View變化的時候Model不可以不變,當Model變化的時候View也可以不變。你可以把?些視圖邏輯放在?個ViewModel??,讓很多view重?這段視圖邏輯
- 提?可測試性: ViewModel的存在可以幫助開發(fā)者更好地編寫測試代碼
- ?動更新dom: 利?雙向綁定,數(shù)據(jù)更新后視圖?動更新,讓開發(fā)者從繁瑣的?動dom中解放
缺點:
- ??? ????? ?????. ??? ??? ??? ?? ??????? ??? ???? ? ??? ??? ??? ?? ??? ??? ?? ? ????. ??? ???? ???? ? ??? ??? ?? ??? ??? ????? ?? ?? ??? ?? ?? ?? ????. ?? ??? ??? ??? ? ???? ????? ?????. ??? ??? ????? ???? ? ????. ?? ??? ??? ???? ????? ?? ???. ???? ???? ???? ???? ???? ???? ??? ? ?? ???? ?????. ????? ?? ?.
- Vue ???? ?? ?? ??? ? ?? ?? ????? ?? ???????
???? ?? ????? ???? ????. Vue? ???? ???? ??? ?? DOM? ????? ?? ???? ?? ??? ?? ??? ?? DOM? ??????? ?? ?????. Vue? DOM? ?????? ???????. ??? ?? ??? ???? ? Vue? ???? ?? ??? ??? ???? ???? ?? ??? ?? ??? ??????. ??? ???? ?? ? ???? ???? ? ?? ?????. ??? ? ??? ?? ??? ???? ?? ? DOM ??? ???? ? ?????. ?? ?? ?? ??? ?? ??? Vue? ?? ????? ??(?? ???) ??? ?????.
diff ????
?? ???: ??? ?? diff
????? vue Convert? ?? ???? O(n*3)
? ?? ??????. O(n)
?? ?????.
?????: diff
算法是一個時間復雜度為 O(n*3)
,vue進行優(yōu)化轉化成 O(n)
。
理解:
-
最小量更新,
key
很重要。這個可以是這個節(jié)點的唯一標識,告訴diff
算法,在更改前后它們是同一個DOM節(jié)點- 擴展
v-for
為什么要有key
,沒有key
會暴力復用,舉例子的話隨便說一個比如移動節(jié)點或者增加節(jié)點(修改DOM),加key
只會移動減少操作DOM。
- 擴展
- 只有是同一個虛擬節(jié)點才會進行精細化比較,否則就是暴力刪除舊的,插入新的。
- 只進行同層比較,不會進行跨層比較。
diff算法的優(yōu)化策略:四種命中查找,四個指針
- 舊前與新前(先比開頭,后插入和刪除節(jié)點的這種情況)
- 舊后與新后(比結尾,前插入或刪除的情況)
- 舊前與新后(頭與尾比,此種發(fā)生了,涉及移動節(jié)點,那么新前指向的節(jié)點,移動到舊后之后)
- 舊后與新前(尾與頭比,此種發(fā)生了,涉及移動節(jié)點,那么新前指向的節(jié)點,移動到舊前之前)
--- 問完上面這些如果都能很清楚的話,基本O了 ---
以下的這些簡單的概念,你肯定也是沒有問題的啦?
Vue的優(yōu)點
- 輕量級框架:只關注視圖層,是一個構建數(shù)據(jù)的視圖集合,大小只有幾十
kb
; - 簡單易學:國人開發(fā),中文文檔,不存在語言障礙 ,易于理解和學習;
- 雙向數(shù)據(jù)綁定:保留了
angular
的特點,在數(shù)據(jù)操作方面更為簡單; - 組件化:保留了
react
的優(yōu)點,實現(xiàn)了html
的封裝和重用,在構建單頁面應用方面有著獨特的優(yōu)勢; - 視圖,數(shù)據(jù),結構分離:使數(shù)據(jù)的更改更為簡單,不需要進行邏輯代碼的修改,只需要操作數(shù)據(jù)就能完成相關操作;
- 虛擬DOM:
dom
操作是非常耗費性能的,不再使用原生的dom
操作節(jié)點,極大解放dom
操作,但具體操作的還是dom
不過是換了另一種方式; - 運行速度更快:相比較于
react
而言,同樣是操作虛擬dom
,就性能而言,vue
?? ????, ?
? ?? ?????. ?? ? ??? ?? ???? ? ??? diff
????? ?? ??? ??? DOM ???? ?????.
Extension v-for
? ?? ?? ?
? ??? ???? ???? ?????. ?? ?? ??? ????? ??? ???? ???(DOM ??). DOM? ???? ?????.
??? ?? ??? ???? ??? ??? ??????. ??? ??? ?? ??? ??? ???? ? ??? ?????.
??? ??? ???? ??? ?????, ??? ? ??? ????? ????.- Diff ???? ??? ?? : ?? ?? 4?, ??? 4?
Old before? new before(?? ??? ??? ?? ?? ?? ? ??)
Old after? new After(?? ??) , ?? ?? ?? ?) Old ??? New ?? (??? ??? ???? ?? ??? ???? ? ???? ???? ??? ?? ?? ??? ?????)
Old Back ? ? ??(?? ? ??, ?? ?? ??? ???? ???? ? ??? ???? ??? ?? ?? ???? ?????) --- ??? ? ???? ? ? ??? ?? ????? ?????? O---
??? ?? ??? ??? ??? ?? ??? ????- Vue? ??
-
?? ?????: ? ????? ???? ??? ?? ? ???? ??? ??
kb
???. - ??? ??: ???, ??? ??? ?????? ?? ??? ??? ???? ??? ????. ???:
angular
??? ???? ??? ??? ? ???? ????. ?????:react
? ??? ????html
? ??? ? ???? ?????. ?? ??? ?????? ?? ? ??? ??? ????. - ?, ??? ? ?? ??: ?? ??? ??? ?? ?? ??? ??? ? ???? ??? ?? ??? ???? ?? ???? ???? ???. : dom
dom
?? ??? ? ?? ???? ???? dom
??? ?? ???????. ?? ??? ??? ??dom
?? ?? ??? ? ????. react
? ?? ?? dom
? ????? ?? ???? vue
?? ? ??? ????. ??? ??? ?? ????? ??? ??, ??? ??, ???? ?????.
調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù),創(chuàng)建好的組件實例會作為回調(diào)函數(shù)的參數(shù)傳入。
Vue.js的template編譯
簡而言之,就是先轉化成AST樹,再得到的render函數(shù)返回VNode(Vue的虛擬DOM節(jié)點),詳細步驟如下:
首先,通過compile編譯器把template編譯成AST語法樹(abstract syntax tree 即 源代碼的抽象語法結構的樹狀表現(xiàn)形式),compile是createCompiler的返回值,createCompiler是用以創(chuàng)建編譯器的。另外compile還負責合并option。
然后,AST會經(jīng)過generate(將AST語法樹轉化成render funtion字符串的過程)得到render函數(shù),render的返回值是VNode,VNode是Vue的虛擬DOM節(jié)點,里面有(標簽名、子節(jié)點、文本等等)
$nextTick 是什么?
Vue 實現(xiàn)響應式并不是在數(shù)據(jù)發(fā)生后立即更新 DOM,使用 vm.$nextTick
是在下次 DOM 更新循環(huán)結束之后立即執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后使用,則可以在回調(diào)中獲取更新后的 DOM。
說說Vue的生命周期吧
什么時候被調(diào)用?
- beforeCreate :實例初始化之后,數(shù)據(jù)觀測之前調(diào)用
- created:實例創(chuàng)建萬之后調(diào)用。實例完成:數(shù)據(jù)觀測、屬性和方法的運算、
watch/event
事件回調(diào)。無$el
. - beforeMount:在掛載之前調(diào)用,相關
render
函數(shù)首次被調(diào)用 - mounted:了被新創(chuàng)建的
vm.$el
替換,并掛載到實例上去之后調(diào)用改鉤子。 - beforeUpdate:數(shù)據(jù)更新前調(diào)用,發(fā)生在虛擬DOM重新渲染和打補丁,在這之后會調(diào)用改鉤子。
- updated:由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁,在這之后會調(diào)用改鉤子。
- beforeDestroy:實例銷毀前調(diào)用,實例仍然可用。
- destroyed:實例銷毀之后調(diào)用,調(diào)用后,Vue實例指示的所有東西都會解綁,所有事件監(jiān)聽器和所有子實例都會被移除
每個生命周期內(nèi)部可以做什么?
- created:實例已經(jīng)創(chuàng)建完成,因為他是最早觸發(fā)的,所以可以進行一些數(shù)據(jù)、資源的請求。
- mounted:實例已經(jīng)掛載完成,可以進行一些DOM操作。
- beforeUpdate:可以在這個鉤子中進一步的更改狀態(tài),不會觸發(fā)重渲染。
- updated:可以執(zhí)行依賴于DOM的操作,但是要避免更改狀態(tài),可能會導致更新無線循環(huán)。
- destroyed:可以執(zhí)行一些優(yōu)化操作,清空計時器,解除綁定事件。
ajax放在哪個生命周期?:一般放在 mounted
中,保證邏輯統(tǒng)一性,因為生命周期是同步執(zhí)行的, ajax
是異步執(zhí)行的。單數(shù)服務端渲染 ssr
同一放在 created
中,因為服務端渲染不支持 mounted
方法。 什么時候使用beforeDestroy?:當前頁面使用 $on
,需要解綁事件。清楚定時器。解除事件綁定, scroll mousemove
。
Vue 怎么用 vm.$set() 解決對象新增屬性不能響應的問題 ?
受現(xiàn)代 JavaScript 的限制 ,Vue 無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉化,所以屬性必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value)
來實現(xiàn)為對象添加響應式屬性,那框架本身是如何實現(xiàn)的呢?
我們查看對應的 Vue 源碼:vue/src/core/instance/index.js
export?function?set?(target:?Array<any>?|?Object,?key:?any,?val:?any):?any?{ ??//?target?為數(shù)組?? ??if?(Array.isArray(target)?&&?isValidArrayIndex(key))?{ ????//?修改數(shù)組的長度,?避免索引>數(shù)組長度導致splcie()執(zhí)行有誤 ????target.length?=?Math.max(target.length,?key) ????//?利用數(shù)組的splice變異方法觸發(fā)響應式?? ????target.splice(key,?1,?val) ????return?val ??} ??//?key?已經(jīng)存在,直接修改屬性值?? ??if?(key?in?target?&&?!(key?in?Object.prototype))?{ ????target[key]?=?val ????return?val ??} ??const?ob?=?(target:?any).__ob__ ??//?target?本身就不是響應式數(shù)據(jù),?直接賦值 ??if?(!ob)?{ ????target[key]?=?val ????return?val ??} ??//?對屬性進行響應式處理 ??defineReactive(ob.value,?key,?val) ??ob.dep.notify() ??return?val }
我們閱讀以上源碼可知,vm.$set 的實現(xiàn)原理是:
- 如果目標是數(shù)組,直接使用數(shù)組的 splice 方法觸發(fā)相應式;
- 如果目標是對象,會先判讀屬性是否存在、對象是否是響應式,最終如果要對屬性進行響應式處理,則是通過調(diào)用 defineReactive 方法進行響應式處理( defineReactive 方法就是 Vue 在初始化對象時,給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法)
(學習視頻分享:web前端開發(fā)、編程基礎視頻)
? ??? 2023? Vue ??? ?? ?? ??(?? ?? ??)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!

? AI ??

Undress AI Tool
??? ???? ??

Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?

AI Clothes Remover
???? ?? ???? ??? AI ?????.

Clothoff.io
AI ? ???

Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!

?? ??

??? ??

???++7.3.1
???? ?? ?? ?? ???

SublimeText3 ??? ??
??? ??, ???? ?? ????.

???? 13.0.1 ???
??? PHP ?? ?? ??

???? CS6
??? ? ?? ??

SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)

SPR (Server-SiderEndering)? ????? ??? ??? ??? ????

VUE ?? ?? ?????? ????? ???? ???? ??? ??? ???? ?? ??, ??? ? ??? ????? ??????. 1. ?? ??? ?? ?? ??, ???? ?? ?? ? ???? ?? ??? ??? ?? ??? ?? ????????. 2. ??? ???? ???? ?? SCSS ?? CSS ??? ??????. 3. ?? ??? ???? ??? ?? ???? ???? ?? Eslint ? Pretier? ?????. 4. ?? ?? ???? ?? ??? ??? ?????. 5. VITE ? ?? ??? ???? NPM ???? ????? ? ??? ?????. 6. Semver ??? ?? ?? ? ? ?? ? Changelogs? ??????.

TOENHANCEVUE.JSDEVENCERMENTINSURDIMETEXT, installVuesynTaxHighlightingViaPackAgeControl, SetupEmmetForfasterHtmlTemplating, IntegrateSlintandPrettierforLintingAndAndingAntformatting, ConfigureKeysettings likeSerandformat-on-saveOptions ? optionallyCrateCustom

1. PHP ?? ?? ? ?? ?????? Laravel MySQL VUE/React ??? ? ?? ??? ???? ??? ?? ?? ??? ?? Laravel MySQL VUE/React ??? ? ?? ?????. 2. ???? ?? (REDIS), ?????? ???, CDN ? ??? ?? ???????. 3. ?? ???, CSRF ??, HTTPS, ???? ??? ? ?? ??? ??? ???????. 4. ? ??? ??, ?? ??, ??, ???, ?? ?? ? ?? ??? ??? ???? ? ? ??? ??? ?? ????.

? ??? VUE ??? ? ?????? ??? ??? ??? ??? ? ???? ??????. ??? ???? ?? ????? ????? ??? ??? Vue ??? ????? ??, ?? ? ??? ? ? ???? ?? ??? ???? ?? ??? ??? ???? ? ????.

??? PHP ??? ??? ??? ?? ???? ??? ?? ????? ???????. Laravel? ?? ??? ???? ??? ? ? ???? ??? ??? ???? ?????? ?? ? ?? ?? ???? ?????. Symfony? ? ???? ??? ???? ?????. Codeigniter? ??? ??? ?? ??? ?? ??? ?? ????? ?????. 2. AI ??? ???? ????? ??? ??? ??, ???? ?? ?? (? : ???, ??, F1 ?), ??? ? ?? ?? ? ?? ??? ?? ???? ?? ??? ???? ???? ?? ??? ? ?? ???? ?? ?? ??? ????? ?? ???? ????? ?????? ??? ????? ???????. 3. ??? ?? ?? ????? ?? ??? ?????. AES? ?? ??? ???? ????? ?????.

VUE ??????? ?? ??? ????? ??? ????? ???? ???? ?? ??? ??????. 1. vuecli ?? vite? ???? ???? ??? ???? Dist ????? ???? ??? ?? ??? ??????. 2. Vuerouter? ???? ??? ???? ?? Server? Index.html? ????? ???????. 3. dist ????? nginx/apache, netlify/vercel? ????? CDN ???? ??????. 4. GZIP ?? ? ???? ?? ??? ???????? ??????. 5. ????? ?? ?? ??, ??? UI ?????? ????, HTTPS ???, XSS ?? ??, CSP ?? ?? ? ? 3 ? SDK ??? ??? ???? ??? ??????.

VUE ??? ?? ????? ???? ?? ??? ?????. 1. ?? ??? ???? ???? ??? ??????. 2. ??? ???, ???? ??, ??, ??? ?? ??? ?? ?? ???? vue ??; 3. ?? ??? ???? ???? ?? ????? ??????. 4. ?? ?? ???? ???? vue.use (yourplugin)? ?? ????? ??????. ?? ??, ?? ?? ??? $ FormatCurrency ???? ???? ????? ??? ???? vue.prototype. $ formatcurrency? ??? ? ????. ????? ??? ?? ??? ?? ????? ??? ??? ??? ???? ??? ? ?????
