????

?哈哈哈哈哈哈哈

????我是麥菜，又宅又菜的麥菜

????話不，我直接進(jìn)入正題

一、Vue的基本原理 ？

二、雙向數(shù)據(jù)綁定的原理 ？

四、MVVM、MVC、MVP的區(qū)別 ？

三、使用 Object.defineProperty() 來進(jìn)行數(shù)據(jù) 劫持有什么缺點(diǎn) ？

五、Computed 和 Watch 的區(qū)別 ?

六、 Computed 和 Methods 的區(qū)別 ？

一、Vue的基本原理 ？

????當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)

????Vue會(huì)遍歷data中的屬性

????用 Object.defineProperty（vue3.0使用proxy ）

????將它們轉(zhuǎn)為 getter/setter

????并且在內(nèi)部追蹤相關(guān)依賴

????在屬性被訪問和修改時(shí)通知變化

????每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗?/p>

????它會(huì)在組件渲染的過程中把屬性記錄為依賴

????之后當(dāng)依賴項(xiàng)的setter被調(diào)用時(shí)

????會(huì)通知watcher重新計(jì)算

????從而致使它關(guān)聯(lián)的組件得以更新

二、雙向數(shù)據(jù)綁定的原理 ？

????Vue.js 是采用

????數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式

????通過Object.defineProperty()來劫持

????各個(gè)屬性的setter、getter

????在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者

????觸發(fā)相應(yīng)的監(jiān)聽回調(diào)

原理步驟主要分為：

???（1）需要observe的數(shù)據(jù)對象進(jìn)行遞歸

????遍歷包括子屬性對象的屬性

????都加上setter和getter這樣的話

????給這個(gè)對象的某個(gè)值賦值

????就會(huì)觸發(fā)setter

????那么就能監(jiān)聽到了數(shù)據(jù)變化?

???（2）compile解析模板指令步驟

????將模板中的變量替換成數(shù)據(jù)

????然后初始化渲染頁面視圖

????并將每個(gè)指令對應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)

????添加監(jiān)聽數(shù)據(jù)的訂閱者

????一旦數(shù)據(jù)有變動(dòng)

????收到通知

????更新視圖?

???（3）Watcher訂閱者是Observer和Compile之間

????通信的橋梁

????主要做的事情是:?

????①在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己?

????②自身必須有一個(gè)update()方法?

????③待屬性變動(dòng)dep.notice()通知時(shí)

????能調(diào)用自身的update()方法

????并觸發(fā)Compile中綁定的回調(diào)

????則功成身退

???（4）MVVM作為數(shù)據(jù)綁定的入口

????整合Observer、Compile和Watcher三者

????通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化

????通過Compile來解析編譯模板指令

????最終利用Watcher搭起Observer和Compile之間的

????通信橋梁

????達(dá)到數(shù)據(jù)變化 -> 視圖更新；

????視圖交互變化(input) -> 數(shù)據(jù)model變更的

??雙向綁定效果

三、使用 Object.defineProperty() 來進(jìn)行數(shù)據(jù)劫持

有什么缺點(diǎn)？

????在對一些屬性進(jìn)行操作時(shí)

????使用這種方法無法攔截

????比如通過下標(biāo)方式修改數(shù)組數(shù)據(jù)或者給對象

????新增屬性

????這都不能觸發(fā)組件的重新渲染

????因?yàn)?Object.defineProperty 不能攔截到

????這些操作

????更精確的來說

????對于數(shù)組而言

????大部分操作都是攔截不到的

????只是 Vue 內(nèi)部通過重寫函數(shù)的方式解決了

????這個(gè)問題

????在 Vue3.0 中已經(jīng)不使用這種方式了

????而是通過使用 Proxy 對對象進(jìn)行代理

????從而實(shí)現(xiàn)數(shù)據(jù)劫持

????使用Proxy 的好處是它可以完美的監(jiān)聽到

????任何方式的數(shù)據(jù)改變

????唯一的缺點(diǎn)是兼容性的問題

????因?yàn)?Proxy 是 ES6 的語法

四、MVVM、MVC、MVP的區(qū)別 ？

????MVC、MVP 和 MVVM 是三種常見的

????軟件架構(gòu)設(shè)計(jì)模式

????主要通過分離關(guān)注點(diǎn)的方式來組織代碼結(jié)構(gòu)

????優(yōu)化開發(fā)效率

????在開發(fā)單頁面應(yīng)用時(shí)

????往往一個(gè)路由頁面對應(yīng)了一個(gè)腳本文件

????所有的頁面邏輯都在一個(gè)腳本文件里

????頁面的渲染、數(shù)據(jù)的獲取

????對用戶事件的響應(yīng)所有的應(yīng)用邏輯

????都混合在一起

????這樣在開發(fā)簡單項(xiàng)目時(shí)

????可能看不出什么問題

????如果項(xiàng)目變得復(fù)雜

????那么整個(gè)文件就會(huì)變得冗長、混亂

????這樣對項(xiàng)目開發(fā)和后期的項(xiàng)目維護(hù)是

????非常不利的

（1）MVC ：

????MVC 通過分離?

????Model、View 和 Controller

????的方式來組織代碼結(jié)構(gòu)

????其中 View 負(fù)責(zé)頁面的顯示邏輯

????Model 負(fù)責(zé)存儲(chǔ)頁面的業(yè)務(wù)數(shù)據(jù)

????以及對相應(yīng)數(shù)據(jù)的操作

????并且 View 和 Model 應(yīng)用了觀察者模式

????當(dāng) Model 層發(fā)生改變的時(shí)候它會(huì)通知

????有關(guān) View 層更新頁面

????Controller 層是 View 層和 Model 層的紐帶

????它主要負(fù)責(zé)用戶與應(yīng)用的響應(yīng)操作

????當(dāng)用戶與頁面產(chǎn)生交互的時(shí)候

????Controller 中的事件觸發(fā)器就開始工作了

????通過調(diào)用 Model 層

????來完成對 Model 的修改

????然后 Model 層再去通知 View 層更新

（2）MVVM：

??MVVM 分為

????Model、View、ViewModel：

????Model代表數(shù)據(jù)模型

????數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；?

????View代表UI視圖

????負(fù)責(zé)數(shù)據(jù)的展示；

????ViewModel負(fù)責(zé)監(jiān)聽Model中數(shù)據(jù)的改變

????并且控制視圖的更新

????處理用戶交互操作；

????Model和View并無直接關(guān)聯(lián)

????而是通過ViewModel來進(jìn)行聯(lián)系的

????Model和ViewModel之間有著

????雙向數(shù)據(jù)綁定的聯(lián)系

????因此當(dāng)Model中的數(shù)據(jù)改變時(shí)

????會(huì)觸發(fā)View層的刷新

????View中由于用戶交互操作而改變的數(shù)據(jù)

????也會(huì)在Model中同步

????這種模式實(shí)現(xiàn)了 Model和View的數(shù)據(jù)

????自動(dòng)同步

????因此開發(fā)者只需要專注于數(shù)據(jù)的

????維護(hù)操作即可

????而不需要自己操作DOM

（3）MVP：?

????MVP 模式與 MVC 唯一不同的在于

????Presenter 和 Controller

????在 MVC 模式中使用觀察者模式

????來實(shí)現(xiàn)當(dāng) Model 層數(shù)據(jù)發(fā)生變化的時(shí)候

????通知 View 層的更新

????這樣 View 層和 Model 層耦合在一起

????當(dāng)項(xiàng)目邏輯變得復(fù)雜的時(shí)候

????可能會(huì)造成代碼的混亂

????并且可能會(huì)對代碼的復(fù)用性造成一些問題

????MVP 的模式通過使用 Presenter 來實(shí)現(xiàn)

????對 View 層和 Model 層的解耦

????MVC 中的Controller 只知道 Model 的接口

????因此它沒有辦法控制 View 層的更新

????MVP 模式中

????View 層的接口暴露給了 Presenter?

????因此可以在 Presenter 中將 Model 的變化

????和 View 的變化綁定在一起

????以此來實(shí)現(xiàn) View 和 Model 的同步更新

????這樣就實(shí)現(xiàn)了對 View 和 Model 的解耦

????Presenter 還包含了其他的響應(yīng)邏輯

五、Computed 和 Watch 的區(qū)別 ?

????對于Computed：

????它支持緩存

????只有依賴的數(shù)據(jù)發(fā)生了變化

????才會(huì)重新計(jì)算 不支持異步

????當(dāng)Computed中有異步操作時(shí)

????無法監(jiān)聽數(shù)據(jù)的變化 computed的值會(huì)

????默認(rèn)走緩存

????計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行

????緩存的

????也就是基于data聲明過

????或者父組件傳遞過來的props中的數(shù)據(jù)

????進(jìn)行計(jì)算的

????如果一個(gè)屬性是由其他屬性計(jì)算而來的

????這個(gè)屬性依賴其他的屬性

????一般會(huì)使用computed 如果computed屬性

????的屬性值是函數(shù)

????那么默認(rèn)使用get方法

????函數(shù)的返回值就是屬性的屬性值；

????在computed中

????屬性有一個(gè)get方法和一個(gè)set方法

????當(dāng)數(shù)據(jù)發(fā)生變化時(shí)

????會(huì)調(diào)用set方法

????對于Watch：

????它不支持緩存

????數(shù)據(jù)變化時(shí)

????它就會(huì)觸發(fā)相應(yīng)的操作 支持異步監(jiān)聽

????監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)

????第一個(gè)參數(shù)是最新的值

????第二個(gè)是變化之前的值 當(dāng)一個(gè)屬性發(fā)生

????變化時(shí)

????就需要執(zhí)行相應(yīng)的操作?

????監(jiān)聽數(shù)據(jù)必須是data中聲明的或者父組件

????傳遞過來的props中的數(shù)據(jù)

????當(dāng)發(fā)生變化時(shí)

????會(huì)觸發(fā)其他操作

????函數(shù)有兩個(gè)的參數(shù)：

????immediate：

????組件加載立即觸發(fā)回調(diào)函數(shù) deep：

????深度監(jiān)聽

????發(fā)現(xiàn)數(shù)據(jù)內(nèi)部的變化

????在復(fù)雜數(shù)據(jù)類型中使用

????例如數(shù)組中的對象發(fā)生變化

????需要注意的是

????deep無法監(jiān)聽到數(shù)組和對象內(nèi)部的變化

????當(dāng)想要執(zhí)行異步或者昂貴的操作以

????響應(yīng)不斷的變化時(shí)

????就需要使用watch

????總結(jié)：

????computed 計(jì)算屬性 : 依賴其它屬性值

????并且 computed 的值有緩存

????只有它依賴的屬性值發(fā)生改變

????下一次獲取 computed 的值時(shí)才會(huì)

????重新計(jì)算 computed 的值

????watch 偵聽器 : 更多的是觀察的作用

????無緩存性

????類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)

????每當(dāng)監(jiān)聽的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)

????進(jìn)行后續(xù)操作

????運(yùn)用場景：

????當(dāng)需要進(jìn)行數(shù)值計(jì)算,并且依賴于其它

????數(shù)據(jù)時(shí)

????應(yīng)該使用 computed

????因?yàn)榭梢岳?computed 的緩存特性

????避免每次獲取值時(shí)都要重新計(jì)算

????當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷

????較大的操作時(shí)

????應(yīng)該使用 watch

????使用 watch 選項(xiàng)允許執(zhí)行

????異步操作 ( 訪問一個(gè) API )

????限制執(zhí)行該操作的頻率

????并在得到最終結(jié)果前

????設(shè)置中間狀態(tài)

????這些都是計(jì)算屬性無法做到的

六、 Computed 和 Methods 的區(qū)別 ?

????可以將同一函數(shù)定義為一個(gè) method?

????或者一個(gè)計(jì)算屬性

????對于最終的結(jié)果

????兩種方式是相同的 不同點(diǎn)：

????computed: 計(jì)算屬性是基于它們的

????依賴進(jìn)行緩存的

????只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值；

????method 調(diào)用總會(huì)執(zhí)行該函數(shù)

????

????我是麥菜，能不能點(diǎn)個(gè)贊

????感謝你的觀看