P13

1、單向數(shù)據(jù)流：

在Vue中，數(shù)據(jù)流是單向的，從父組件向子組件進(jìn)行數(shù)據(jù)傳遞。父組件通過props向子組件傳遞數(shù)據(jù)，子組件接收并使用這些數(shù)據(jù)。子組件不能直接修改父組件傳遞的數(shù)據(jù)，只能通過觸發(fā)事件來(lái)向父組件傳遞數(shù)據(jù)變化。

雙向數(shù)據(jù)綁定：

雙向數(shù)據(jù)綁定允許數(shù)據(jù)在父組件和子組件之間進(jìn)行雙向的同步更新。在Vue中，可以使用v-model指令實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

補(bǔ)充v-model 語(yǔ)法糖的實(shí)現(xiàn)方式????

模型到視圖：給 input 輸入框的 value 屬性綁定模型值 <input v-bind:value="模型時(shí)" />

視圖到模型：監(jiān)聽 input 輸入框的 input 事件，然后去更改對(duì)應(yīng)的模型值 <input @input="changeXxx"/>

2、Object.defineProperty有什么缺點(diǎn)!

1、無(wú)法監(jiān)聽es6的set、Map 變化:只能監(jiān)聽對(duì)象的屬性變化，無(wú)法直接監(jiān)聽 ES6 中的 Set 和 Map 數(shù)據(jù)結(jié)構(gòu)以及其內(nèi)部的變化。

2、無(wú)法監(jiān)聽class類型的數(shù)據(jù):只能監(jiān)聽對(duì)象的屬性變化，無(wú)法直接監(jiān)聽 Class 實(shí)例的屬性變化。

3、屬性的新加或者刪除也無(wú)法監(jiān)聽:只能監(jiān)聽對(duì)象已有屬性的變化，無(wú)法監(jiān)聽屬性的新增或刪除。

4、數(shù)組元素的增加和刪除也無(wú)法監(jiān)聽:可以通過對(duì)數(shù)組的方法進(jìn)行劫持來(lái)實(shí)現(xiàn)監(jiān)聽，但這種方式并不方便。

為了解決上述問題，Vue3采用了更強(qiáng)大的 Proxy 對(duì)象來(lái)監(jiān)聽屬性的變化。Proxy 對(duì)象具有更多的優(yōu)勢(shì)和靈活性，可以監(jiān)聽更多類型的數(shù)據(jù)變化。

3、對(duì)MVC,MVP,MVVM的理解

MVC是一種將應(yīng)用程序分成模型、視圖和控制器三個(gè)部分的架構(gòu)模式，用于分離關(guān)注點(diǎn)和管理代碼結(jié)構(gòu)。

MVP是在MVC模式基礎(chǔ)上的改進(jìn)，引入了Presenter來(lái)處理視圖和模型之間的通信。

MVVM是一種用于構(gòu)建客戶端應(yīng)用程序的架構(gòu)模式，結(jié)合了數(shù)據(jù)綁定和命令模式，通過ViewModel實(shí)現(xiàn)視圖和模型的解耦。

4、生命周期

版本2的生命周期方法：

beforeCreate：在實(shí)例被創(chuàng)建之前調(diào)用，此時(shí)組件的選項(xiàng)和觀察者都未初始化。

created：在實(shí)例創(chuàng)建完成后用，此時(shí)可以訪問到組件的選項(xiàng)和觀察者。

beforeMount在掛載之前調(diào)用，此時(shí)但還未替換掛載的DOM元素。

mounted：在組件掛載到DOM之后調(diào)用，此時(shí)可以訪問到DOM元素。

beforeUpdate：在組件更新之前調(diào)用，此時(shí)組件數(shù)據(jù)發(fā)生變化。

updated：在組件更新之后調(diào)用，此時(shí)DOM已經(jīng)更新完成。

beforeDestroy：在組件銷毀前調(diào)用。

destroyed：在組件銷毀之后調(diào)用。

版本3的生命周期方法（使用Composition API）：

setup：在組件過程調(diào)用，可以用來(lái)組件狀態(tài)和邏輯。

onBeforeMount：在組件掛載到DOM之前調(diào)用。

onMounted：在組件掛載到DOM之后調(diào)用。

onBeforeUpdate：在組件更新之前調(diào)用。

onUpdated：在組件更新之后調(diào)用。

onBeforeUnmount：在組件銷毀前調(diào)用。

onUnmounted：在組件銷毀之后調(diào)用。

5、你知道Vue響應(yīng)式數(shù)據(jù)原理嗎? Proxy 與object.defineProperty 優(yōu)劣對(duì)比?

響應(yīng)式原理：

kerwin老師筆記提取

vue的響應(yīng)式實(shí)現(xiàn)主要是利用了object.defineproperty的方法里面的setter 與getter方法的觀察者模式來(lái)實(shí)現(xiàn)。在組件初始化時(shí)會(huì)給每一個(gè)data屬性注冊(cè)getter和setter，然后再new 一個(gè)自己的watcher對(duì)象，此時(shí)watcher會(huì)立即調(diào)用組件的render函數(shù)去生成虛擬DOM。在調(diào)用render的時(shí)候，就會(huì)需要用到data的屬性值，此時(shí)會(huì)觸發(fā)qetter函數(shù)，將當(dāng)前的watcher函數(shù)注冊(cè)進(jìn)sub里。當(dāng)data屬性發(fā)生改變之后，就會(huì)遍歷sub里所有的watcher對(duì)象，通知它們?nèi)ブ匦落秩窘M件。

Proxy的優(yōu)點(diǎn)：

可以監(jiān)聽對(duì)象的新增、刪除和修改操作，無(wú)需特殊處理。

可直接監(jiān)聽數(shù)組的變化，無(wú)需特殊處理。

性能較好，無(wú)需遍歷對(duì)象的每個(gè)屬性。

功能更強(qiáng)大，可以攔截更多操作。

Proxy的缺點(diǎn)：

兼容性不如Object.defineProperty，無(wú)法在舊版瀏覽器中使用。

Object.defineProperty的優(yōu)點(diǎn)：

支持所有現(xiàn)代瀏覽器，包括IE9+等舊版本瀏覽器。

可以對(duì)已有對(duì)象的屬性進(jìn)行劫持。

可以監(jiān)聽屬性的讀取和寫入操作。

Object.defineProperty的缺點(diǎn)：

對(duì)新增或刪除的屬性無(wú)法直接監(jiān)聽，需要額外處理。

需要遍歷對(duì)象的每個(gè)屬性，性能較低。

無(wú)法直接監(jiān)聽數(shù)組的變化，需要使用特殊方法。

6、Composition API的出現(xiàn)帶來(lái)哪些新的開發(fā)體驗(yàn)，為啥需要這個(gè)?

kerwin老師筆記提取

1:在Compostion API 中時(shí)根據(jù)邏輯相關(guān)組織代碼的，提高可讀性和可維護(hù)性，類似于react的hook寫法。2:更好的重用邏輯代碼，在options API中通過MIxins重用邏輯代碼，容易發(fā)生命名沖突且關(guān)系不清。3:解決在生命周期函數(shù)經(jīng)常包含不相關(guān)的邏輯，但又不得不把相關(guān)邏輯分離到了幾個(gè)不同方法中的問題，如在mounted中沒置定時(shí)器，但需要在destroyed中來(lái)清除定時(shí)器，將同一功能的代碼拆分到不同的位置，造成后期代碼維護(hù)的困難。

7、對(duì)比jQuery，Vue 有什么不同

響應(yīng)式能力：Vue是一個(gè)完整的MVVM（Model-View-ViewModel）框架，內(nèi)置了響應(yīng)式能力，可以自動(dòng)追蹤數(shù)據(jù)的變化并實(shí)時(shí)更新視圖。而jQuery并沒有內(nèi)置響應(yīng)式能力，需要手動(dòng)操作DOM來(lái)更新視圖。

組件化開發(fā)：Vue采用組件化開發(fā)的思想，將界面拆分成獨(dú)立的可復(fù)用組件，每個(gè)組件有自己的模板、邏輯和樣式。這樣可以極大地提高代碼的可維護(hù)性和復(fù)用性。而在jQuery中，通常將操作封裝成函數(shù)，但沒有明確的組件概念。

數(shù)據(jù)驅(qū)動(dòng)視圖：Vue通過數(shù)據(jù)綁定實(shí)現(xiàn)視圖和數(shù)據(jù)的自動(dòng)同步。開發(fā)者只需要關(guān)注數(shù)據(jù)的變化，Vue會(huì)自動(dòng)更新相關(guān)的視圖。而在jQuery中，開發(fā)者需要手動(dòng)操作DOM來(lái)實(shí)現(xiàn)視圖的更新。

8、如何再Vue的單文件組件里的樣式定義全局CSS?

在style標(biāo)簽上不加上scoped的屬性，默認(rèn)為全局css樣式

9、說一下$root，$parent，$refs

$root屬性指向Vue實(shí)例的根組件。它允許您從任何子組件訪問根組件的數(shù)據(jù)和方法。通過this.$root可以訪問根組件的實(shí)例。

$parent屬性指向當(dāng)前組件的父組件實(shí)例。可以使用this.$parent訪問父組件的數(shù)據(jù)和方法。需要注意的是，使用$parent會(huì)使組件和父組件之間產(chǎn)生緊耦合，不太推薦頻繁使用。

$refs屬性用于在模板或組件中引用元素或子組件。您可以給元素或組件設(shè)置ref屬性，然后通過this.$refs訪問引用的元素或組件實(shí)例。

10、Vue 中怎么自定義指令

全局注冊(cè)指令是在Vue實(shí)例化之前，在項(xiàng)目的入口文件（通常是main.js）中使用Vue.directive全局方法注冊(cè)指令。這樣注冊(cè)的指令可以在整個(gè)應(yīng)用程序中的任何組件中使用。

局部注冊(cè)指令是在組件中定義并注冊(cè)指令，這樣指令只在該組件內(nèi)部可用。通過在組件選項(xiàng)中的directives屬性中定義指令，可以在組件的模板中使用自定義指令。

在自定義指令的選項(xiàng)中，可以利用多個(gè)鉤子函數(shù)來(lái)定義指令的行為，常見的有bind、inserted、update、componentUpdated和unbind等。每個(gè)鉤子函數(shù)會(huì)接收三個(gè)參數(shù)：指令所綁定的元素(el)，指令的綁定值(binding)和Vue編譯生成的虛擬節(jié)點(diǎn)(vnode)。