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

對(duì)于 vue 來(lái)說(shuō)，組件之間的數(shù)據(jù)傳遞具有單向數(shù)據(jù)流這樣的特性的，稱為單向數(shù)據(jù)流

兩個(gè)數(shù)據(jù)流之間相互獨(dú)立，單向數(shù)據(jù)流指 只能從一個(gè)方向來(lái)修改狀態(tài)

例：父子傳值，父組件給子組件傳遞數(shù)據(jù)，子組件想給父組件傳遞數(shù)據(jù)的話，需要通過(guò)綁定事件，讓父組件自己修改值，然后再將修改后的值傳給子組件

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

模型到視圖，綁定input框的value屬性

視圖到模型：綁定input事件，通過(guò)視圖改變數(shù)據(jù)

Object.defineProperty 的劣勢(shì)：

1、無(wú)法監(jiān)聽(tīng)es6的Set、Map變化

2、無(wú)法監(jiān)聽(tīng)class類型的數(shù)據(jù)

3、屬性的新加或者刪除也無(wú)法監(jiān)聽(tīng)

4、數(shù)組元素的增加或刪除也無(wú)法監(jiān)聽(tīng)

MVC：

把業(yè)務(wù)邏輯分離，模塊化程度高，但由于View是強(qiáng)依賴特定的Model的，所以View無(wú)法組件化，無(wú)法復(fù)用

MVP：

View不依賴Model，View可以進(jìn)行組件化，但Model-> View的手動(dòng)同步邏輯 ，麻煩、維護(hù)困難

MVVM：

解決了MVP大量的手動(dòng)View和Model同步的問(wèn)題，提供雙向數(shù)據(jù)機(jī)制，提高了代碼的可維護(hù)性問(wèn)題，對(duì)于大型的圖形應(yīng)用程序，視圖狀態(tài)較多，ViewModel的構(gòu)建和維護(hù)的成本都會(huì)比較高

生命周期：

vue2：

初始階段：beforeCreate、created、beforeMount、mounted

更新階段：beforeUpdate、updated

銷毀階段：beforeDestroy、destroyed

vue3：

初始階段：setup、onBeforeMount、onMounted

更新階段：onBeforeUpdate、onUpdated

銷毀階段：onBeforeUnmount、onUnmounted

常用的鉤子：

發(fā)送請(qǐng)求：create、mounted

銷毀定時(shí)器、清除綁定事件：beforeDestroy

vue的響應(yīng)式原理：

vue的響應(yīng)式主要是利用了Object.defineProperty的方法里面的setter、getter方法的觀察者模式來(lái)實(shí)現(xiàn)。一旦屬性發(fā)生了改變，我們的setter方法通知調(diào)用我們的watcher，watcher的話調(diào)用我們的render函數(shù)，render函數(shù)生成我們新的虛擬dom，虛擬dom對(duì)比老的虛擬dom發(fā)現(xiàn)有區(qū)別，通過(guò)最小的代價(jià)更新我們的dom節(jié)點(diǎn)，實(shí)現(xiàn)頁(yè)面的更新操作。

Proxy 和 Object.defineProperty 優(yōu)劣對(duì)比：

proxy的優(yōu)勢(shì)：

proxy 可以直接監(jiān)聽(tīng)對(duì)象而非屬性，可以直接監(jiān)聽(tīng)數(shù)組的變化

proxy 有多達(dá)13中攔截方法，不限于 apply、ownKeys、deleteProperty、has 等是 Object.defineProperty 不具備的

proxy 返回的是一個(gè)新的對(duì)象，我們可以只操作新的對(duì)象達(dá)到目的，而 Object.defineProperty 只能遍歷對(duì)象屬性直接修改

Object.defineProperty 的優(yōu)勢(shì)：

兼容性好，支持IE9，而proxy存在瀏覽器兼容性問(wèn)題，而且無(wú)法使用polyfill來(lái)彌補(bǔ)

兼容性問(wèn)題：如果低版本不支持 proxy 的話，走的還 Object.defineProperty

Composition API :

1、在 Composition API 中根據(jù)邏輯相關(guān)組織代碼，提高可讀性和可維護(hù)性，類似react中的hook

2、更好的重用邏輯，在 option API 中通過(guò)Mixins重用邏輯代碼，容易發(fā)生命名沖突且關(guān)系不清

3、解決在生命周期函數(shù)經(jīng)常包含不相關(guān)的邏輯，但又不得不把相關(guān)的邏輯分離到幾個(gè)不同的方法中的問(wèn)題

例：

在mounted設(shè)置定時(shí)器，但需要在destroyed中來(lái)清除定時(shí)器，將同一功能的代碼拆分到不同的位置，造成后期代碼維護(hù)困難

jQuery 和 vue 的區(qū)別：

jQuery 專注視圖層，通過(guò)直接操作dom去實(shí)現(xiàn)頁(yè)面的一些邏輯渲染

vue 專注于數(shù)據(jù)層，通過(guò)數(shù)據(jù)的雙向綁定，最終表現(xiàn)在dom層，減少dom操作，vue使用組件化思想，提高開(kāi)發(fā)效率，方便重復(fù)利用，便于協(xié)同開(kāi)發(fā)

vue單文件組件定義全局css：

默認(rèn)為全局 css 樣式

獨(dú)享樣式：在style標(biāo)簽加上 scoped 屬性，它是通過(guò)給標(biāo)簽 添加自定義屬性實(shí)現(xiàn)，通過(guò)內(nèi)容得到不同的哈希值，是標(biāo)簽唯一

$root、$parent、$refs：

$root、$parent，都能訪問(wèn)父組件的屬性和方法，區(qū)別在于如果存在多級(jí)子組件，通過(guò)parent 訪問(wèn)得到的是他最近一級(jí)的父組件，通過(guò)root訪問(wèn)得到的是根父組件。通過(guò)在子組件標(biāo)簽定義 ref 屬性，在父組件中可以使用$refs訪問(wèn)子組件實(shí)例

ref：

定義模型，獲取dom節(jié)點(diǎn)，獲取子組件實(shí)例，關(guān)聯(lián)form表單

vue中的自定義指令：

通過(guò)directive來(lái)自定義指令，自定義指令分為全局抬令和局部指令，自定義指令也有幾個(gè)的鉤子函數(shù)，常用的有bind和update，當(dāng) bind 和 update 時(shí)觸發(fā)相同行為，而不關(guān)心其它的鉤子時(shí)可以簡(jiǎn)寫。

Vue.directive('focus', {
 inserted: (el) => {
  el.focus
 }
})
......
<input v-focus />