1、MVC、MVP、MVVM模式的概念與區(qū)別
1】MVC

a、概念
Model（模型）：表示應(yīng)用程序核心（如數(shù)據(jù)庫(kù)）
View（視圖）：顯示UI效果（HTML頁(yè)面）
Controller（控制器）：處理輸入（業(yè)務(wù)邏輯）
b、過(guò)程（單向）
View 傳送指令到 Controller
Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
Model 將新的數(shù)據(jù)發(fā)送到 View，View得到更新
c、優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：M和V之間是完全隔離的, 所以在業(yè)務(wù)場(chǎng)景切換時(shí), 通常只需要替換相應(yīng)的C, 復(fù)用已有的M和V便可快速搭建新的業(yè)務(wù)場(chǎng)景. MVC因其復(fù)用性, 大大提高了開(kāi)發(fā)效率, 現(xiàn)已被廣泛應(yīng)用在各端開(kāi)發(fā)中
缺點(diǎn)： 視圖V與控制器C間的過(guò)于緊密的連接，沒(méi)有區(qū)分業(yè)務(wù)邏輯和業(yè)務(wù)展示，
1 這對(duì)單元測(cè)試很不友好，
2 視圖jsp模板引擎，這些還會(huì)讓前端人員和后端人員的一些職責(zé)重復(fù)

2】MVP
a、概念
MVP是針對(duì)MVC的缺點(diǎn)而進(jìn)行了改進(jìn)
模型（Model）：數(shù)據(jù)庫(kù)相關(guān)的操作、文件的訪問(wèn)和數(shù)據(jù)結(jié)構(gòu)等
視圖（View）：專注于顯示，如Web前端(HTML/CSS/JavaScript)
展示器（Presenter）：連接模型和視圖，處理視圖的請(qǐng)求并根據(jù)模型更新視圖（中介）

b、優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：
（mvc是m驅(qū)動(dòng)v的變更，mvp是p展示器驅(qū)動(dòng)v的變更）
MVP用展示器代替了控制器，而展示器是可以直接更新視圖，所以MVP中展示器可以處理視圖的請(qǐng)求并遞送到模型又可以根據(jù)模型的變化更新視圖，實(shí)現(xiàn)了視圖和模型的完全分離，有點(diǎn)類似雙向綁定
缺點(diǎn)：
視圖和Presenter的交互會(huì)過(guò)于頻繁，使得他們的聯(lián)系過(guò)于緊密。也就是說(shuō)，一旦視圖變更了，presenter也要變更

3】MVVM

a、概念
MVVM是MVP更進(jìn)一步的發(fā)展，把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和視圖模型（ViewModel）
模型（Model）：數(shù)據(jù)庫(kù)相關(guān)的操作、文件的訪問(wèn)和數(shù)據(jù)結(jié)構(gòu)等。
視圖（View）：專注于顯示，如Web前端（HTML/CSS/JavaScript）
視圖模型（ViewModel）：監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象，連接Model和View。在MVVM架構(gòu)下，View 和 Model 之間并沒(méi)有直接的聯(lián)系，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
b、優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 VM 來(lái)統(tǒng)一管理。
1】低耦合：視圖（View）可以獨(dú)立于 Model 變化和修改，一個(gè) ViewModel 可以綁定到不同的"View"上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變（React單向綁定）。
2】可重用性：你可以把一些視圖邏輯放在一個(gè)ViewModel里面，讓很多 view 重用這段視圖邏輯。
3】獨(dú)立開(kāi)發(fā)：開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)（ViewModel），設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)。
4】可測(cè)試：界面素來(lái)是比較難于測(cè)試的，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來(lái)寫。
***相對(duì)mvc，mvvm主要解決了：
mvc中大量的DOM 操作使頁(yè)面渲染性能降低，加載速度變慢，影響用戶體驗(yàn)。
缺點(diǎn)： 因?yàn)槭褂昧薲ataBinding，增加了大量的內(nèi)存開(kāi)銷，增加了程序的編譯時(shí)間（webpack），項(xiàng)目越大內(nèi)存開(kāi)銷越大。
c、MVVM的實(shí)現(xiàn)主要是三個(gè)核心點(diǎn)：
響應(yīng)式：vue如何監(jiān)聽(tīng)data的屬性變化
模板解析：vue的模板是如何被解析的
渲染：vue模板是如何被渲染成HTML的

2、單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)
單頁(yè)應(yīng)用，即在一個(gè)頁(yè)面里面加載了所有的HTML、JavaScript 和 CSS
1】?jī)?yōu)點(diǎn)：
1).良好的交互體驗(yàn)
用戶不需要重新刷新頁(yè)面，獲取數(shù)據(jù)也是通過(guò)Ajax異步獲取，頁(yè)面顯示流暢。
2).良好的前后端工作分離模式
單頁(yè)Web應(yīng)用可以和RESTful規(guī)約一起使用，通過(guò)REST API提供接口數(shù)據(jù)，并使用Ajax異步獲取，這樣有助于分離客戶端和服務(wù)器端工作。更進(jìn)一步，可以在客戶端也可以分解為靜態(tài)頁(yè)面和頁(yè)面交互兩個(gè)部分。
3).減輕服務(wù)器壓力
服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁(yè)面合成，吞吐能力會(huì)提高幾倍；
4).共用一套后端程序代碼
不用修改后端程序代碼就可以同時(shí)用于Web界面、手機(jī)、平板等多種客戶端；
2】缺點(diǎn)：
1).SEO難度較高
由于所有的內(nèi)容都在一個(gè)頁(yè)面中動(dòng)態(tài)替換顯示，所以在SEO上其有著天然的弱勢(shì)，所以如果你的站點(diǎn)對(duì)SEO很看重，且要用單頁(yè)應(yīng)用，那么就做些靜態(tài)頁(yè)面給搜索引擎用吧。
2).前進(jìn)、后退管理
由于單頁(yè)Web應(yīng)用在一個(gè)頁(yè)面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁(yè)面切換需要自己建立堆棧管理，當(dāng)然此問(wèn)題也有解決方案，比如利用URI中的散列+iframe實(shí)現(xiàn)。
3).初次加載耗時(shí)多
為實(shí)現(xiàn)單頁(yè)Web應(yīng)用功能及顯示效果，需要在加載頁(yè)面的時(shí)候?qū)avaScript、CSS統(tǒng)一加載，部分頁(yè)面可以在需要的時(shí)候加載。所以必須對(duì)JavaScript及CSS代碼進(jìn)行合并壓縮處理，如果使用第三方庫(kù)，建議使用一些大公司的CDN，因此帶寬的消耗是必然的。

3、Vue
（關(guān)鍵點(diǎn)：漸進(jìn)式框架，自底向上，只關(guān)注視圖層，一切皆組件）
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。
對(duì)于vue而言，一切皆組件（組件系統(tǒng)），因?yàn)榻M件本質(zhì)就是是可復(fù)用的 Vue 實(shí)例。vue初始化的時(shí)候，在mian.js里面通過(guò)Vue.component()創(chuàng)建一個(gè)全局組件之后，我們可以new一個(gè)Vue實(shí)例，然后就把根節(jié)點(diǎn)掛載上去。new Vue({ el: ‘#app’ })，然后在這個(gè) Vue 根實(shí)例中，把這個(gè)組件作為自定義元素來(lái)使用。

4、vue漸進(jìn)式框架的理解
每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求，這些要求就是主張，主張有強(qiáng)有弱，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開(kāi)發(fā)中的使用方式。
Vue可能有些方面是不如React，不如Angular，但它是漸進(jìn)的，沒(méi)有強(qiáng)主張，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開(kāi)發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。你可以在底層數(shù)據(jù)邏輯的地方用OO和設(shè)計(jì)模式的那套理念，也可以函數(shù)式，都可以，它只是個(gè)輕量視圖而已，只做了自己該做的事，沒(méi)有做不該做的事，僅此而已。

5、vue.js的兩個(gè)核心是什么？三要素是什么？
1】?jī)蓚€(gè)核心：雙向數(shù)據(jù)綁定 和 組件系統(tǒng)
2】三要素：響應(yīng)式、模板引擎 和 渲染

6、vue生命周期詳解
1】生命周期
Vue 實(shí)例從創(chuàng)建到銷毀的一系列過(guò)程，就是生命周期。從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過(guò)程，稱之為 Vue 的生命周期。
2】生命周期的作用是什么？
它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯。

Vue所有的生命周期鉤子自動(dòng)綁定在this上下文到實(shí)例中，因此你可以訪問(wèn)數(shù)據(jù)，對(duì)屬性和方法進(jìn)行運(yùn)算。這意味著你不能使用箭頭函數(shù)來(lái)定義一個(gè)生命周期方法。這是因?yàn)榧^函數(shù)綁定了父級(jí)上下文，因此this與你期待的Vue實(shí)例不同。
（注：vm.$el 是用于獲取和操作Vue實(shí)例關(guān)聯(lián)的DOM元素的一個(gè)對(duì)象）

1】beforeCreate
vue實(shí)例創(chuàng)建之前，data 和 $el(dom)都沒(méi)有初始化 全部為 undefined
應(yīng)用：可以在此時(shí)加一些loading效果，在created 時(shí)進(jìn)行移除（App.vue或者其他組件）

2】created
vue實(shí)例創(chuàng)建完成，data 初始化完成，但 $el 沒(méi)有初始化
應(yīng)用：如果業(yè)務(wù)邏輯不涉及到需要頁(yè)面加載完成之后的話，可以在這里進(jìn)行 ajax 請(qǐng)求

3】beforeMount（模板解析中）
虛擬dom解析成真實(shí)dom，并掛載到Vue實(shí)例之前~
data 和 $el 均已存在，template模板已導(dǎo)入渲染函數(shù)編譯。而當(dāng)前階段虛擬dom已經(jīng)創(chuàng)建完成，即將開(kāi)始渲染。在此時(shí)也可以對(duì)數(shù)據(jù)進(jìn)行更改，不會(huì)觸發(fā)updated。
應(yīng)用：這里實(shí)際應(yīng)用比較少

4】mounted
虛擬dom解析成真實(shí)dom，并掛載到Vue實(shí)例之后~
模板引擎已被完全解析成html，掛載到Vue實(shí)例上，并渲染到頁(yè)面
應(yīng)用：
1.可以進(jìn)行ajax請(qǐng)求；
2.因?yàn)閐om已經(jīng)完全渲染出來(lái)了，可以在這里進(jìn)行dom操作。
注意：若涉及父子組件，父組件mounted完畢以后，子組件還不一定mounted完畢。如果你希望等到整個(gè)視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

5】beforeUpdate
在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染之前。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程，會(huì)更新當(dāng)前組件數(shù)據(jù)，但未在頁(yè)面渲染出來(lái)。

6】updated
data發(fā)生變化，觸發(fā)DOM重新渲染，當(dāng)這個(gè)生命周期函數(shù)被調(diào)用時(shí)，組件 DOM 已經(jīng)更新完畢，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
應(yīng)用：
任何數(shù)據(jù)的更新，如果要做統(tǒng)一的業(yè)務(wù)邏輯處理，可以在這個(gè)鉤子里面進(jìn)行。
例如：
即時(shí)聊天項(xiàng)目，打開(kāi)當(dāng)前會(huì)話加載完消息后需要自動(dòng)滾動(dòng)到窗口最底部。滾動(dòng)到底部這個(gè)操作就可以放在這個(gè)鉤子函數(shù)里面來(lái)完成。
注意：
a、當(dāng)實(shí)例每次進(jìn)行數(shù)據(jù)更新時(shí)updated都會(huì)執(zhí)行。
b、無(wú)論是組件本身的數(shù)據(jù)變更，還是從父組件接收到的 props 或者從vuex里面拿到的數(shù)據(jù)有變更，都會(huì)觸發(fā)虛擬 DOM 重新渲染和打補(bǔ)丁，并在之后調(diào)用 updated。

7】beforeDestroy 【類似于React生命周期的componentWillUnmount】
實(shí)例銷毀之間調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在服務(wù)端渲染期間不被調(diào)用。
應(yīng)用：可以在這里清除定時(shí)器。

8】destroyed
Vue實(shí)例銷毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)端渲染不會(huì)被調(diào)用

***另外還有 keep-alive 獨(dú)有的生命周期，分別為 activated 和 deactivated
被keep-alive包含的組件不會(huì)被再次初始化，也就意味著不會(huì)重走生命周期函數(shù)
1】activated
keep-alive組件激活時(shí)調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
2】deactivated
keep-alive組件停用時(shí)調(diào)用。該鉤子在服務(wù)端渲染期間不被調(diào)用。

***關(guān)于updated鉤子函數(shù)一個(gè)問(wèn)題：
data里面數(shù)據(jù)發(fā)生變化，一定會(huì)觸發(fā)updated這個(gè)鉤子函數(shù)嗎？
答：只有data里的變量改變并且要在頁(yè)面重新渲染完成之后，才會(huì)進(jìn)updated生命周期。只改變data里的值，但是沒(méi)有再頁(yè)面上渲染該值的話，并不會(huì)觸發(fā)updated。
比如data里面某個(gè)值傳入Null，值是改變了，但是對(duì)于頁(yè)面還說(shuō)是沒(méi)有變化的，所以不會(huì)觸發(fā)updated。

7、生命周期鉤子函數(shù)可以用箭頭函數(shù)嗎？
不可以。箭頭函數(shù)的this指向父級(jí)上下文，而生命周期鉤子函數(shù)的this默認(rèn)指向Vue實(shí)例，強(qiáng)行用箭頭函數(shù)會(huì)導(dǎo)致this指向錯(cuò)誤。

8、this.$nextTick用法和實(shí)際應(yīng)用場(chǎng)景1】原理數(shù)據(jù)更新?>視圖更新完畢之后進(jìn)行的邏輯操作vue最大的特點(diǎn)是雙向綁定（響應(yīng)式），數(shù)據(jù)發(fā)生變化，視圖就會(huì)更新。但是，視圖更新這個(gè)操作是異步的。當(dāng)偵聽(tīng)到數(shù)據(jù)發(fā)生變化時(shí)，Vue將開(kāi)啟一個(gè)異步的視圖更新隊(duì)列，視圖需要等這個(gè)隊(duì)列中所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行更新。我們可以使用$nextTick(callback)。這里的回調(diào)函數(shù)（callback）將在數(shù)據(jù)更新完成，并且視圖更新完畢之后被調(diào)用。
nextTick的底層還是基于setTimeout來(lái)實(shí)現(xiàn)的，setTimeout本身是宏任務(wù)，可以優(yōu)先執(zhí)行。
2】應(yīng)用場(chǎng)景
1）如果要在created()鉤子函數(shù)中進(jìn)行的DOM操作，由于created()鉤子函數(shù)中還未對(duì)DOM進(jìn)行任何渲染，所以無(wú)法直接操作，需要通過(guò)KaTeX parse error: Expected '}', got 'EOF' at end of input: … () { this.nextTick(()=>{
this.KaTeX parse error: Expected 'EOF', got '}' at position 34: … = "鋼鐵的翅膀" }?) } 注：在created(…nextTick()會(huì)報(bào)錯(cuò)。
2）在使用某些第三方插件時(shí) ，比如echart 在初始化的時(shí)候，由于dom渲染還未完成，因此或造成初始化報(bào)錯(cuò)，所以要放在 this.$nextTick的回調(diào)里面。3）mounted不會(huì)承諾所有的子組件也都一起被掛載（父組件先mount，子組件后mount）。如果你希望等到整個(gè)視圖都渲染完畢，可以用vm.$nextTick 替換掉 mounted：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

9、vue中組件的data為什么是一個(gè)函數(shù)
組件是可復(fù)用的vue實(shí)例，一個(gè)組件被創(chuàng)建好之后，就可能被用在各個(gè)地方，而組件不管被復(fù)用了多少次，組件中的data數(shù)據(jù)都應(yīng)該是相互隔離，互不影響的，基于這一理念，組件每復(fù)用一次，data數(shù)據(jù)就應(yīng)該被復(fù)制一次，之后，當(dāng)某一處復(fù)用的地方組件內(nèi)data數(shù)據(jù)被改變時(shí)，其他復(fù)用地方組件的data數(shù)據(jù)不受影響。
恰好函數(shù)具備這個(gè)特性，函數(shù)內(nèi)部的局部變量，只有內(nèi)部感知，不會(huì)對(duì)外界造成影響。
***為什么在大型項(xiàng)目中data需要使用return返回?cái)?shù)據(jù)呢？
答：不使用return包裹的數(shù)據(jù)會(huì)在項(xiàng)目的全局可見(jiàn)，會(huì)造成變量污染；使用return包裹后數(shù)據(jù)中變量只在當(dāng)前組件中生效，不會(huì)影響其他組件。

10、父組件傳值給子組件遇到的生命周期問(wèn)題
項(xiàng)目遇到父組件傳值給子組件，子組件監(jiān)聽(tīng)數(shù)據(jù)變化可以用watch監(jiān)聽(tīng)數(shù)據(jù)變化

如果要在子組件打印父組件傳來(lái)的數(shù)據(jù)必須是在beforeUpdate和updated生命周期才能監(jiān)聽(tīng)的到
***Vue 的父組件和子組件生命周期鉤子執(zhí)行順序：
組件的調(diào)用順序都是先父后子,渲染完成的順序是先子后父。
組件的銷毀操作是先父后子，銷毀完成的順序是先子后父。
1】加載渲染過(guò)程
父組件掛載前準(zhǔn)備編譯模板的時(shí)候，先讓子組件編譯模板并掛載完畢以后，父組件再掛載。
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2】子組件更新過(guò)程
父beforeUpdate->子beforeUpdate->子updated->父updated

3】父組件更新過(guò)程
父beforeUpdate->父updated（跟子沒(méi)有關(guān)系）
4】銷毀過(guò)程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

11、vue打包后會(huì)生成哪些文件？
默認(rèn)生產(chǎn) dist 文件夾：
生產(chǎn)index.html單頁(yè)面文件
將組件中的 css 編譯合并成一個(gè) app.[hash].css 的文件，
js 則在合并后又拆解成 了 4 個(gè)文件：
app.[hash].js 包含了所有 components 中的 js 代碼
vendor.[hash].js 包含了生產(chǎn)環(huán)境所有引用的 node_modules 中的代碼
mainfest.[hash].js 則包含了 webpack 運(yùn)行環(huán)境及模塊化所需的 js 代碼
0.[hash].js 則是 vue-router 使用了按需加載生產(chǎn)的js文件
static 靜態(tài)文件夾
這樣拆分的好處是：
每塊組件修改重新編譯后不影響其他未修改的 js 文件 的 hash 值，這樣能夠最大限度地使用緩存，減少 HTTP 的請(qǐng)求數(shù)

12、Vue3.0和Vue2.0的區(qū)別
響應(yīng)式的變更：
2用的是Object.defineProperty，3用的是Proxy
1】默認(rèn)進(jìn)行懶觀察（lazy observation）
在 2.x 版本里，不管數(shù)據(jù)多大，都會(huì)在一開(kāi)始就為其創(chuàng)建觀察者。當(dāng)數(shù)據(jù)很大時(shí)，這可能會(huì)在頁(yè)面載入時(shí)造成明顯的性能壓力。3.x 版本，只會(huì)對(duì)「被用于渲染初始可見(jiàn)部分的數(shù)據(jù)」創(chuàng)建觀察者，而且 3.x 的觀察者更高效。
2】更精準(zhǔn)的變更通知
比例來(lái)說(shuō)：2.x 版本中，使用 Vue.set 來(lái)給對(duì)象新增一個(gè)屬性時(shí)，這個(gè)對(duì)象的所有 watcher 都會(huì)重新運(yùn)行；3.x 版本中，只有依賴那個(gè)屬性的 watcher 才會(huì)重新運(yùn)行。
3】3.0 新加入了 TypeScript 以及 PWA 的支持
4】部分命令發(fā)生了變化：
下載安裝 npm install -g vue@cli
刪除了vue list
創(chuàng)建項(xiàng)目 vue create
啟動(dòng)項(xiàng)目 npm run serve
5】默認(rèn)項(xiàng)目目錄結(jié)構(gòu)也發(fā)生了變化：
移除了配置文件目錄，config 和 build 文件夾
移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動(dòng)到 public 中
在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件
6】代碼體積變得更小

13、vue和react的區(qū)別
1】數(shù)據(jù)：
　　vue：雙向數(shù)據(jù)綁定和單向數(shù)據(jù)流。雙向數(shù)據(jù)綁定：DOM元素綁定的data值，當(dāng)發(fā)生改變后，vue的響應(yīng)式機(jī)制會(huì)自動(dòng)監(jiān)聽(tīng)data的變化重新渲染。單向數(shù)據(jù)流：當(dāng)父組件給子組件傳遞數(shù)據(jù)的時(shí)候，子組件只可以讀取而不能修改數(shù)據(jù)。可以用watch監(jiān)聽(tīng)數(shù)據(jù)的更改，再賦給父組件的變量。
　　react：單向數(shù)據(jù)流。DOM元素依賴于state，但改變state不會(huì)改變渲染好的DOM，通過(guò)setState()才能重新渲染。父組件傳值到子組件，如果頂級(jí)的props變了，會(huì)重新渲染所有的子組件。
2】虛擬DOM：
　　vue：計(jì)算出虛擬DOM的差異，在渲染的過(guò)程中跟蹤每個(gè)組件的依賴關(guān)系，不會(huì)重新渲染整個(gè)組件樹(shù)
　　react：當(dāng)應(yīng)用的狀態(tài)改變時(shí)，重新渲染全部子組件，可以通過(guò)shouldComponentUpdate生命周期進(jìn)行優(yōu)化
3】模板和jsx：
　　vue：具有單文件組件，可以把html、css、js寫在一個(gè)vue文件里----MVVM框架
　　react：依賴于jsx，在JavaScript中創(chuàng)建DOM----視圖層框架
4】構(gòu)建工具：
　　vue：vue-cli
　　react：create-react-app 項(xiàng)目名
5】app開(kāi)發(fā)
　　vue：Weex目前處于開(kāi)發(fā)的狀態(tài)
　　react：React Native能在手機(jī)上創(chuàng)建原生應(yīng)用，React在這方面處于領(lǐng)先位置。
6】團(tuán)隊(duì)支持：
　　vue：尤雨溪個(gè)人，目前和阿里合作
　　react：facebook維護(hù)
7】開(kāi)發(fā)選擇
快速開(kāi)發(fā)客戶端頁(yè)面可以選用vue，復(fù)雜的后臺(tái)管理系統(tǒng)可以用react

14、兩種路由模式
1】hash模式
本質(zhì)：window.location.hash，用來(lái)獲取或設(shè)置頁(yè)面的標(biāo)簽值。
a. HTTP請(qǐng)求不包括#，#是用來(lái)指導(dǎo)瀏覽器動(dòng)作的，對(duì)服務(wù)器端完全無(wú)用，對(duì)瀏覽器而言，就是一個(gè)位置標(biāo)識(shí)符
b.單單改變#后的部分，瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置，不會(huì)重新加載網(wǎng)頁(yè)
c.每一次改變#后的部分，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄
2】history模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）這兩個(gè)方法應(yīng)用于瀏覽器的歷史記錄棧，在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致，如：http://www.xxx.com/items/id。后端如果缺少對(duì) /items/id 的路由處理，將返回 404 錯(cuò)誤
注意：pushState和replaceState，都不會(huì)刷新瀏覽器頁(yè)面。
3】?jī)煞N模式對(duì)比
hash模式由于帶有#，導(dǎo)致做微信H5分享的時(shí)候，會(huì)出一些問(wèn)題。

15、router-link和傳統(tǒng)a鏈接的區(qū)別
1】通過(guò)a標(biāo)簽進(jìn)行跳轉(zhuǎn)，頁(yè)面會(huì)被重新渲染，即相當(dāng)于重新打開(kāi)一個(gè)新的網(wǎng)頁(yè)，體現(xiàn)為視覺(jué)上的“閃爍”（如果是本地的項(xiàng)目基本看不出來(lái)）
2】通過(guò)router-link進(jìn)行跳轉(zhuǎn)不會(huì)跳轉(zhuǎn)到新的頁(yè)面，也不會(huì)重新渲染，它會(huì)選擇路由所指的組件進(jìn)行渲染，避免了重復(fù)渲染的“無(wú)用功”。

16、vue是單向還是雙向數(shù)據(jù)流？
單向數(shù)據(jù)流。
單向數(shù)據(jù)流指的父組件傳值給子組件，子組件不能修改這個(gè)值，而父組件修改這個(gè)值的話子組件也會(huì)受影響，這個(gè)影響是單向的，只能從父組件流向子組件，不能反向。
ng貌似是雙向數(shù)據(jù)流。

17、Vue組件通信有哪些方式？
1】父子組件通信
父->子props，子->父 $on、$emit
獲取父子組件實(shí)例 $parent、$children
ref 獲取實(shí)例的方式調(diào)用組件的屬性或者方法
2】兄弟組件通信
Event Bus 實(shí)現(xiàn)跨組件通信 Vue.prototype.$bus = new Vue()
Vuex
3】跨級(jí)組件通信
Vuex
$attrs、$listeners

18、axios
1）axios如何封裝而成，有無(wú)閱讀過(guò)axios的源碼

2）axios的二次封裝
import axios from ‘a(chǎn)xios’;
import ui from ‘ui’;
let baseURL;
//是判斷生產(chǎn)環(huán)境或開(kāi)發(fā)環(huán)境的依據(jù)的
if(process.env.NODE_ENV==‘development’){
baseURL = ‘http://localhsot:8888/vue/demo1/api/’ //開(kāi)發(fā)環(huán)境
} else {
baseURL = ‘/xxx’ //生產(chǎn)環(huán)境
}
// axios.create 創(chuàng)建axios對(duì)象，包含baseURL axios.get(“url”)
const $http = axios.create({
baseURL,
})
//url 路徑 params 參數(shù) http://localhsot:8888/vue/demo1/api/a.php?page=3
export const get = (url,params)=>{
ui.loading(); //加載效果
params = params || {};//參數(shù)要么有 或 空對(duì)象
return new Promise((resolve,reject)=>{
// axiso 自帶 get 和 post 方法
$http.get(url,{params,}).then(res=>{ //get請(qǐng)求 url 路徑參數(shù)
ui.cancelLoding();
resolve(res.data);
}).catch(error=>{
ui.alert(‘網(wǎng)絡(luò)異常’);
})
})
}
export const post = (url,params)=>{
ui.loading(); //加載效果
params = params || {};
return new Promise((resolve,reject)=>{
$http.post(url,params).then(res=>{
ui.cancelLoding();
resolve(res.data);
}).catch(error=>{
ui.alert(‘網(wǎng)絡(luò)異常’);
})
})
}
3）axios的攔截器
在請(qǐng)求發(fā)送之前，以及數(shù)據(jù)返回之后，我們都可以對(duì)請(qǐng)求的結(jié)構(gòu)以及返回的數(shù)據(jù)做一個(gè)處理，然后在將請(qǐng)求發(fā)給后端（如在請(qǐng)求頭中增加token），如果是后端返回?cái)?shù)據(jù)，則可以根據(jù)狀態(tài)碼來(lái)進(jìn)行提前的一個(gè)提示。
// 構(gòu)建axios實(shí)例
const instance = axios.create({
baseURL: process.env.BASE_API, // 該處url會(huì)根據(jù)開(kāi)發(fā)環(huán)境進(jìn)行變化（開(kāi)發(fā)/發(fā)布）
timeout: 10000 // 設(shè)置請(qǐng)求超時(shí)連接時(shí)間
})
1】request 攔截器
instance.interceptors.request.use(
config => {
console.log(config); // 該處可以將config打印出來(lái)看一下，該部分將發(fā)送給后端（server端）
config.headers.token = ‘該處可設(shè)置token內(nèi)容’;
return config // 對(duì)config處理完后返回，下一步將向后端發(fā)送請(qǐng)求
},
error => { // 當(dāng)發(fā)生錯(cuò)誤時(shí)，執(zhí)行該部分代碼
console.log(error); //調(diào)試用
return Promise.reject(error)
}
)
2】response攔截器
instance.interceptors.response.use(
response => { // 該處為后端返回整個(gè)內(nèi)容
const res = response.data; // 該處可將后端數(shù)據(jù)取出，提前做一個(gè)處理
if (‘正常情況’) {
return response // 該處將結(jié)果返回，下一步可用于前端頁(yè)面渲染用
} else {
alert(‘該處異常’);
return Promise.reject(‘error’)
}
},
error => {
console.log(error),
return Promise.reject(error)
}
)
3）注意，axios 是 取不到 cookie的
1】開(kāi)發(fā)的時(shí)候，存在跨域
如果要發(fā)送Cookie，后端的Access-Control-Allow-Origin就不能設(shè)為星號(hào)，必須指定明確的、與請(qǐng)求網(wǎng)頁(yè)一致的域名。同時(shí)，Cookie依然遵循同源政策，只有用服務(wù)器域名設(shè)置的Cookie才會(huì)上傳
前端vue設(shè)置proxyTable代理
后端的Access-Control-Allow-Origin不能為*
注意：http 和 https 也算是跨域！

19、mixin
混入 (mixin) 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
var mixin = {
created: function () {
console.log(‘混入對(duì)象的鉤子被調(diào)用’)
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log(‘組件鉤子被調(diào)用’)
}
})
上面的例子：
執(zhí)行created優(yōu)先調(diào)用混入對(duì)象的created
但是data()里面數(shù)據(jù)沖突的時(shí)候，以組件的data為準(zhǔn)；同樣，methods方法里面的fun同名，也是以組件內(nèi)的為準(zhǔn)

1】全局混入
類似上面例子，new實(shí)例化Vue對(duì)象里面引入mixin
實(shí)際應(yīng)用場(chǎng)景：微信H5和微信小程序的分享功能（要求每個(gè)頁(yè)面都可以轉(zhuǎn)發(fā)分享）
2】選項(xiàng)合并
可以在單個(gè)組件里面引入 mixin

20、Vue.extend
Vue.extend是Vue實(shí)例的拓展，可以用于開(kāi)發(fā)一些獨(dú)立的組件。
1】基本用法
參數(shù)：Vue.extend(options)，options包含template 和 data
結(jié)合$mount，可以把自定義的標(biāo)簽掛載到指定的元素上面

2】源碼剖析
extend方法返回的其實(shí)是1個(gè)構(gòu)造函數(shù)，而且繼承自Vue，因此extend方法返回的是Vue的1個(gè)子類。
3】應(yīng)用場(chǎng)景
所有內(nèi)容都是在 #app 下渲染，注冊(cè)組件都是在當(dāng)前位置渲染。如果我要實(shí)現(xiàn)一個(gè)類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它，該怎么辦？
這時(shí)候，Vue.extend + vm.$mount 組合就派上用場(chǎng)了

21、Vue.use()
一般是用于全局注冊(cè)插件
1】用法
a、vue2.x使用Vue.use()
import Vue from ‘vue’;
Vue.use(xxx);
b、vue3.x使用app.use()
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
const app = createApp(App);
app.use(xxx);
2】參數(shù)
Vue.use(options)
options為1個(gè)對(duì)象或者函數(shù)，并且必須帶有install 方法，通過(guò)install 方法注冊(cè)到全局
a、對(duì)象
const demo = {
// 參數(shù)為對(duì)象時(shí)，需要提供install方法
install: (Vue) => {
Vue.prototype.$Toast=()=>console.log{(}^{\prime }全局toast提{示}^{\prime });//toast提示,通過(guò)this.$Toast調(diào)用
Vue.prototype.$request=()=>console.log{(}^{\prime }全局request請(qǐng){求}^{\prime });//request請(qǐng)求,通過(guò)this.$request調(diào)用
}
}
export default demo;
b、函數(shù)（本身作為1個(gè)install方法）
const common = (Vue) => {
// 定義一些vue中常用的全局方法
Vue.prototype.$Toast=()=>console.log{(}^{\prime }全局toast提{示}^{\prime });//toast提示,通過(guò)this.$Toast調(diào)用
Vue.prototype.$request=()=>console.log{(}^{\prime }全局request請(qǐng){求}^{\prime });//request請(qǐng)求,通過(guò)this.$request調(diào)用
};
export default common;
3】Vue.use源碼
a、首先先判斷插件plugin是否是對(duì)象或者函數(shù)：
b、判斷vue是否已經(jīng)注冊(cè)過(guò)這個(gè)插件，如果已經(jīng)注冊(cè)過(guò)，跳出方法
c、取Vue.use()里面的參數(shù)，通過(guò)toArray將傳入的參數(shù)整理成數(shù)組
d、判斷插件是否有install方法，如果有就執(zhí)行install()方法；沒(méi)有就直接把plugin當(dāng)Install執(zhí)行

22、vue插件機(jī)制
1】插件通常用來(lái)為 Vue 添加全局功能：比如添加全局指令vue-touch，或者全局混入一些組件選項(xiàng)比如vue-router
2】通過(guò)全局方法 Vue.use() 使用插件。它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成
3】開(kāi)發(fā)插件
Vue.js 的插件應(yīng)該暴露1個(gè) install 方法。這個(gè)方法的第1個(gè)參數(shù)是 Vue 構(gòu)造器，第2個(gè)參數(shù)是1個(gè)可選的選項(xiàng)對(duì)象：
MyPlugin.install = function (Vue, options) {
Vue.myGlobalMethod = function () { // 1. 添加全局方法或 property
// 邏輯…
}
Vue.directive(‘my-directive’, { // 2. 添加全局資源
bind (el, binding, vnode, oldVnode) {
// 邏輯…
}
})
Vue.mixin({ // 3. 注入組件選項(xiàng)
created: function () {
// 邏輯…
}
})
Vue.prototype.$myMethod = function (methodOptions) { // 4. 添加實(shí)例方法
// 邏輯…
}
}

23、自定義指令
1】創(chuàng)建局部指令
var app = new Vue({
el: ‘#app’,
data: {
},
// 創(chuàng)建指令(可以多個(gè))
directives: {
// 指令名稱
dir1: {
inserted(el) {
// 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
console.log(el);
console.log(arguments);
// 對(duì)DOM進(jìn)行操作
el.style.width = ‘200px’;
el.style.height = ‘200px’;
el.style.background = ‘#000’;
}
}
}
})
2】全局指令
Vue.directive(‘dir2’, {
inserted(el) {
console.log(el);
}
})
3】指令的使用

24、插槽
1】單個(gè)插槽 | 默認(rèn)插槽 | 匿名插槽
匿名插槽就是可以在父組件中的子組件的標(biāo)簽中直接添加內(nèi)容。
用法：
在子組件埋入，父組件引用子組件的時(shí)候，可以在子組件標(biāo)簽的內(nèi)部填入任何元素。
2】具名插槽
具名插槽就是一個(gè)擁有name屬性的插槽，具名插槽可以在同一組件中多次使用。
用法：
子組件：
父組件：

按鈕

3】作用域插槽
作用域插槽就是一個(gè)可以攜帶數(shù)據(jù)的具名插槽，稱為作用域插槽。
用法：
子組件：
父組件：

{{scope.message}}

25、組件的自我調(diào)用
1】實(shí)際用途
組件自我調(diào)用，一般都是用于實(shí)現(xiàn)遞歸展示。
比如類似這種嵌套的數(shù)據(jù)結(jié)構(gòu)，每一層的結(jié)構(gòu)都基本類似，在不清楚有多少層的情況下，利用組件的自我調(diào)用可以解決。
dataList:[
{
name:‘名稱1’,
children:[
{
name:‘名稱1-1’
children:[
{
name:‘名稱1-1-1’,
children:[
//…
]
}
]
}
]
}
]
2】用法
利用name這個(gè)屬性即可實(shí)現(xiàn)
export default {
name: “myTree”,
…
},
}

26、計(jì)算屬性computed與methods
1】computed與methods的區(qū)別
a、computed計(jì)算屬性中定義的是屬性而不是函數(shù)，所以使用時(shí)直接用{{xxx}}
methods中定義的是函數(shù)，因此使用時(shí)需要{{xxx()}}
b、計(jì)算屬性computed被使用時(shí)會(huì)進(jìn)行緩存，如果需要多次使用，則只需要調(diào)用1次
而methods中的函數(shù)無(wú)緩存，如果需要使用n次，則需要調(diào)用n次
2】為什么使用計(jì)算屬性時(shí)不用加()
計(jì)算屬性的實(shí)質(zhì)為屬性，其中定義了set()方法和get()方法

一般使用中不需要set方法，我們只需要get方法，因此計(jì)算屬性一般為“只讀屬性”
去掉無(wú)用的set方法后，computed屬性簡(jiǎn)寫為我們常見(jiàn)的方式：

只是形式上看起來(lái)像函數(shù)，實(shí)質(zhì)上computed計(jì)算屬性是屬性，所以不要加()。

27、Vue路由懶加載原理
組件的按需加載也是這個(gè)原理
1】定義
路由懶加載也可以叫做路由組件懶加載，原理： Vue 的異步組件 和 Webpack 的代碼分割。
const Foo = () => import(‘./Foo.vue’)
const router = new VueRouter({
routes: [
{ path: ‘/foo’, component: Foo }
]
})
2】Webpack 的代碼分割
（詳情見(jiàn)webpack篇）
通過(guò)Webpack編譯打包后，會(huì)把每個(gè)路由組件的代碼分割成一一個(gè)js文件（chunk塊），初始化時(shí)不會(huì)加載這些js文件，只當(dāng)激活路由組件才會(huì)去加載對(duì)應(yīng)的js文件。

3】Vue 的異步組件
異步組件主要通過(guò) 代碼分割 和 延遲加載 來(lái)實(shí)現(xiàn)。
a、靜態(tài)導(dǎo)入模塊
import utils from ‘./utils’

b、動(dòng)態(tài)導(dǎo)入模塊
1）a、使用vue-router中需求的’syntax-dynamic-import’插件，然后在webpack的plugin里面配置這個(gè)插件；b、在webpack配置文件的出口處，配置chunkFilename屬性；
這樣在代碼內(nèi)部，使用import語(yǔ)法。同時(shí)，在import語(yǔ)法使用的地方，指定對(duì)應(yīng)的模塊名webpackChunkName。
2）語(yǔ)法：通過(guò)箭頭函數(shù)+直接import相關(guān)的模塊
動(dòng)態(tài)導(dǎo)入是一個(gè)返回Promise的函數(shù)，這樣可以延遲加載相應(yīng)的模塊
() => import(/* webpackChunkName: ‘ImportFunc’ */ ‘./components/Tooltip’)
3）注意
沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件；
指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)js文件，把組件按組分塊。

c、也可以通require導(dǎo)入
component: resolve => require([‘@/components/home’], resolve)
這里的component配置返回了一個(gè)Promise函數(shù)

28、父組件監(jiān)聽(tīng)子組件的生命周期
可以在父組件引用子組件時(shí)通過(guò) @hook 來(lái)監(jiān)聽(tīng)即可
// Parent.vue
<Child @hook:mounted=“doSomething” >
doSomething() {
console.log(‘父組件監(jiān)聽(tīng)到 mounted 鉤子函數(shù) …’);
},
// Child.vue
mounted() {
console.log(‘子組件觸發(fā) mounted 鉤子函數(shù) …’); //先打印
},
// 以上輸出順序?yàn)?#xff1a;
// 子組件觸發(fā) mounted 鉤子函數(shù) …
// 父組件監(jiān)聽(tīng)到 mounted 鉤子函數(shù) …
@hook方法不僅僅是可以監(jiān)聽(tīng) mounted，其它的生命周期事件，例如：created，updated 等都可以監(jiān)聽(tīng)。

29、父子組件獲取對(duì)方的dom
1】父組件獲取子組件的dom
this.$refs.xxx

2】子組件獲取父組件的dom this.$parent.數(shù)據(jù) this.$parent.方法

總結(jié)

以上是生活随笔為你收集整理的Vue基础理论篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。