1.常用(yong)的vue指令有哪(na)些:

v-if

v-else

v-on

v-bind

v-show

v-model

2.瀏覽器頁面(mian)之前(qian)如何(he)傳參

query

url?a=xxx&b=yyy

query+path

query+name

params

注冊:url/:id

請求:url/123

params+name

props

布爾值

對象

函數

meta

路由元信息

3.父(fu)子組件互相調用方法

父(fu)組件(jian)主動獲取子組件(jian)的數據和方法：

1.調(diao)用(yong)子(zi)組件的時候(hou)定義一個ref,其中children為子(zi)組件別(bie)名

2.在父組件腳(jiao)本里面(mian)通過

this.$refs.header.屬(shu)性

this.$refs.header.方法

子(zi)組件主動獲取父組件的數據(ju)和(he)方(fang)法，在(zai)子(zi)組件腳本中通過(guo)如下方(fang)式獲取：

this.$parent.數據

this.$parent.方法

在腳本中(zhong)獲取另(ling)一(yi)個組件的值時展示在頁(ye)面，需要在mounted屬性(xing)中(zhong)加一(yi)個方法(fa)，初始化要展示的值，

4.vue設計模式請簡(jian)述

MVVM的模式

由 Model、View、ViewModel 三部分構(gou)成(cheng)，Model 層代表數(shu)據模(mo)型，也(ye)可(ke)以在Model中定(ding)義(yi)數(shu)據修改(gai)和操作的業務邏(luo)輯；View 代表UI 組件，它負責(ze)將數(shu)據模(mo)型轉化成(cheng)UI 展現出來，ViewModel 是一個同(tong)步View 和 Model的對(dui)象。

在MVVM架(jia)構下，View 和(he) Model 之間并沒有直(zhi)接的聯系，而(er)是通過ViewModel進行交互，Model 和(he) ViewModel 之間的交互是雙向的， 因此View 數(shu)據的變化會同步到Model中，而(er)Model 數(shu)據的變化也會立(li)即反應到View 上(shang)。

ViewModel 通(tong)過雙向數據(ju)綁定把 View 層(ceng)和 Model 層(ceng)連(lian)接了起來，而View 和 Model 之間的同(tong)步工作完(wan)全是(shi)自動的，無需(xu)人(ren)為(wei)干涉，因此(ci)開發者(zhe)只(zhi)需(xu)關注(zhu)業務邏輯，不需(xu)要手動操作DOM， 不需(xu)要關注(zhu)數據(ju)狀態的同(tong)步問(wen)題，復雜的數據(ju)狀態維護完(wan)全由 MVVM 來統一管理。

5.組件保持狀態怎么做

1. 組件沒有沒銷毀(hui)keep-alive

2. 組件(jian)(jian)被銷(xiao)毀的情況在頁面(mian)刷新(xin)的時(shi)候，將數據存至sessionStorage頁面(mian)刷新(xin)的時(shi)候，可(ke)以將組件(jian)(jian)的狀態(tai)發送給服務器保存，組件(jian)(jian)再次 加(jia)載的時(shi)候發請求(qiu)獲取之前的狀態(tai)數據

6.圖片懶加(jia)載原理(li),如何(he)實現

原理:

圖(tu)片(pian)(pian)懶(lan)加載的(de)原(yuan)理(li)很(hen)簡單，就(jiu)是我們先設(she)置圖(tu)片(pian)(pian)的(de)data-set屬(shu)性（當然也可(ke)(ke)以是其他(ta)任意的(de)，只(zhi)要不(bu)會(hui)發送http請求就(jiu)行了，作(zuo)用就(jiu)是為(wei)了存取值）值為(wei)其圖(tu)片(pian)(pian)路徑，由于(yu)(yu)不(bu)是src，所以不(bu)會(hui)發送http請求。 然后我們計算出(chu)頁(ye)面scrollTop的(de)高度和瀏覽器的(de)高度之(zhi)和， 如果圖(tu)片(pian)(pian)舉例頁(ye)面頂端的(de)坐標Y（相對(dui)于(yu)(yu)整個頁(ye)面，而(er)不(bu)是瀏覽器窗口(kou)）小于(yu)(yu)前兩者之(zhi)和，就(jiu)說明圖(tu)片(pian)(pian)就(jiu)要顯示(shi)出(chu)來(lai)了（合(he)適的(de)時(shi)機(ji)，當然也可(ke)(ke)以是其他(ta)情況），這時(shi)候我們再將 data-set 屬(shu)性替(ti)換為(wei) src 屬(shu)性即可(ke)(ke)。

7.vue路由(you)模式(shi)的區(qu)別

在vue-router路由對象中(zhong),路由有兩(liang)種模式(shi): hash 和(he) history,而默認的是hash模式(shi),hash模式(shi)背(bei)后(hou)的原理是:

hash路由

監聽路由的(de)變(bian)化：onhashchange事件(jian),只有#后面的(de)地(di)址(zhi)發(fa)生變(bian)化，可(ke)以在window對象上(shang)監聽這個(ge)事件(jian):

window.onhashchange = function(event) {    console.log(event.oldURL, event.newURL);    let hash = loaction.hash  //通過location對象來獲取hash地址    console.log(hash)    // "#/notebooks/260827/list"  從#號開始}

因為hash發生變化的url都(dou)會被(bei)瀏覽器記錄(lu)下來，從而你會發現瀏覽器的前進后(hou)退(tui)都(dou)可以用

隨(sui)著history api的到來，前(qian)(qian)端(duan)(duan)路(lu)由開始進化了(le),前(qian)(qian)面的hashchange，你只能改變(bian)#后面的url片段(duan)，而history api則給了(le)前(qian)(qian)端(duan)(duan)完全的自由

history api可以分為兩大部分，切(qie)換和修改，參考MDN

切換歷史狀態

包(bao)括back,forward,go三個方法，對應瀏覽(lan)器的(de)前(qian)(qian)(qian)(qian)進(jin)，后(hou)退(tui)，跳(tiao)轉操作，有同(tong)學說了，(谷歌)瀏覽(lan)器只有前(qian)(qian)(qian)(qian)進(jin)和后(hou)退(tui)，沒(mei)有跳(tiao)轉，嗯，在前(qian)(qian)(qian)(qian)進(jin)后(hou)退(tui)上長按鼠標，會(hui)出來所有當前(qian)(qian)(qian)(qian)窗口的(de)歷(li)史記錄，從(cong)而可(ke)以(yi)跳(tiao)轉(也(ye)許叫跳(tiao)更合適)：

history.go(-2);//后退兩次history.go(2);//前進兩次history.back(); //后退hsitory.forward(); //前進

修改歷史狀態

包括了history.pushState(),history.replaceState()兩(liang)個(ge)方法(fa),這(zhe)兩(liang)個(ge)方法(fa)接收三(san)個(ge)參(can)數(shu):stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})
history.back();

history.forward();

通(tong)(tong)過pushstate把(ba)頁面(mian)的(de)狀態保存(cun)在state對象中，當頁面(mian)的(de)url再變回這個(ge)url時，可以通(tong)(tong)過event.state取(qu)到(dao)這個(ge)state對象.

8.vue之間組件通信方式(shi)

//segmentfault.com/a/1190000019208626#item-6

9.watch和computed的(de)區別(bie),data和computed的(de)區別(bie)

計(ji)算屬性computed :

支持緩存，只有(you)依賴數據發生改變，才會重新(xin)進行計算

不支(zhi)持異步，當computed內有異步操作(zuo)時無效，無法監(jian)聽數(shu)據的變化

computed 屬(shu)性值會默(mo)認走緩存，計(ji)算屬(shu)性是(shi)基(ji)于它們的(de)響應式(shi)依(yi)賴(lai)進行緩存的(de)，也就是(shi)基(ji)于data中聲明過或者父組件傳遞的(de)props中的(de)數(shu)據通過計(ji)算得到的(de)值

如果一(yi)個屬(shu)性是(shi)由其他屬(shu)性計算(suan)而來的，這(zhe)個屬(shu)性依(yi)賴其他屬(shu)性，是(shi)一(yi)個多對一(yi)或(huo)者(zhe)一(yi)對一(yi)，一(yi)般用computed

如果computed屬(shu)(shu)性屬(shu)(shu)性值(zhi)是(shi)函(han)數，那么(me)默(mo)認會走(zou)get方(fang)(fang)法(fa)(fa)；函(han)數的返(fan)回值(zhi)就(jiu)是(shi)屬(shu)(shu)性的屬(shu)(shu)性值(zhi)；在computed中的，屬(shu)(shu)性都有一個get和(he)一個set方(fang)(fang)法(fa)(fa)，當數據變(bian)化時，調用(yong)set方(fang)(fang)法(fa)(fa)。

偵聽屬性(xing)watch：

不(bu)支持(chi)緩存，數據變，直接會(hui)觸發相應的操作；

watch支持(chi)異步；

監聽的函數(shu)接(jie)收兩個(ge)(ge)參(can)(can)(can)數(shu)，第一(yi)個(ge)(ge)參(can)(can)(can)數(shu)是最新的值；第二(er)個(ge)(ge)參(can)(can)(can)數(shu)是輸入之前的值；

當一個屬性發生變化時，需(xu)要執行對(dui)應的操作(zuo)；一對(dui)多；

監(jian)聽數據必須(xu)是data中聲明過或(huo)者父組件傳遞(di)過來的(de)props中的(de)數據，當數據變化時，觸發其(qi)他操作，函數有兩(liang)個參(can)數，

immediate：組(zu)件加載立即觸(chu)發回(hui)調函(han)數執(zhi)行，

deep: 深(shen)度監(jian)(jian)聽，為了發現對象(xiang)內部值的(de)變化，復雜類型的(de)數據時(shi)使用(yong)，例(li)如(ru)數組(zu)中的(de)對象(xiang)內容(rong)的(de)改變，注(zhu)(zhu)意監(jian)(jian)聽數組(zu)的(de)變動不需要(yao)這么做。注(zhu)(zhu)意：deep無法(fa)監(jian)(jian)聽到(dao)數組(zu)的(de)變動和對象(xiang)的(de)新增，參考vue數組(zu)變異(yi),只有以響應式(shi)的(de)方式(shi)觸發才(cai)會(hui)被監(jian)(jian)聽到(dao)。

data 和 computed 最核心的區別在于 data 中的屬性并不會隨賦值變量的改動而改動，而computed 會。

10.vue中路由傳參的方式

和2一樣

11.vue的生命周期,哪個生命周期可以看到this,第一個發送請求的是哪一個

beforeCreate

實例組件(jian)剛創建，元素DOM和數(shu)據(ju)都還沒(mei)有初始化，暫(zan)時不知(zhi)道能(neng)在這個周期里面進行(xing)生命操(cao)作。

created

數據data已經初(chu)始化完成(cheng)，方法也已經可(ke)以(yi)調用，但是(shi)(shi)DOM未渲染。有人問了，請(qing)求(qiu)都是(shi)(shi)異步(bu)(bu)的(de)，并不會(hui)阻(zu)礙實(shi)例(li)加載(zai)(zai)。這(zhe)是(shi)(shi)我個(ge)人水平的(de)問題，這(zhe)邊改正，在這(zhe)個(ge)周期(qi)里面(mian)，請(qing)求(qiu)因為(wei)是(shi)(shi)異步(bu)(bu)的(de)，不會(hui)阻(zu)礙實(shi)例(li)加載(zai)(zai)，除非是(shi)(shi)那些(xie)同步(bu)(bu)操(cao)走才會(hui)導致頁面(mian)空白。這(zhe)樣說來，在這(zhe)個(ge)周期(qi)里面(mian)進行請(qing)求(qiu)，渲染速度反(fan)而會(hui)更快(kuai)。

第一個發送ajax請(qing)求的地方(fang),注意(yi)不要將運算(suan)量特別大的代(dai)碼或者多個請(qing)求操作放(fang)置在此，因(yin)為(wei)會影(ying)響(xiang)頁面的渲(xuan)染時間，可能導致界面長時間白屏

beforeMount

DOM未完成(cheng)掛載，數(shu)(shu)據也(ye)初(chu)始化完成(cheng)，但是(shi)數(shu)(shu)據的雙向綁定(ding)還是(shi)顯(xian)示(shi){{}}，這(zhe)是(shi)因為Vue采(cai)用(yong)了(le)Virtual DOM（虛擬Dom）技術。先占住了(le)一個(ge)坑。

可以(yi)發送ajax請求(qiu),注意(yi)不要將運算量特(te)別(bie)大的代碼或者多個請求(qiu)操作放置在此，因為(wei)會影(ying)響頁面的渲(xuan)染時(shi)間，可能導致界面長時(shi)間白屏

mounted

數據和DOM都完成掛載，在上一個周(zhou)期(qi)占位的數據把值給(gei)渲染進去。可以(yi)在這邊請(qing)求(qiu)，不過created請(qing)求(qiu)會更好一些(xie)。這個周(zhou)期(qi)適合執(zhi)行初始化(hua)需要操作DOM的方法(fa)。

beforeUpdate

只要是(shi)頁面(mian)數據改變(bian)了都會觸發，數據更(geng)新之前，頁面(mian)數據還是(shi)原來的(de)數據，當你(ni)請求賦值一(yi)個(ge)數據的(de)時候(hou)會執行(xing)這個(ge)周期，如果沒有(you)數據改變(bian)不執行(xing)。

updated

只要(yao)是頁面(mian)數(shu)據(ju)(ju)改變(bian)了都(dou)會觸發，數(shu)據(ju)(ju)更(geng)新完(wan)(wan)畢(bi)，頁面(mian)的數(shu)據(ju)(ju)是更(geng)新完(wan)(wan)成的。beforeUpdate和(he)updated要(yao)謹(jin)慎使用，因為頁面(mian)更(geng)新數(shu)據(ju)(ju)的時候都(dou)會觸發，在這里操作(zuo)數(shu)據(ju)(ju)很影響性能和(he)容易死循環。

beforeDestroy

這(zhe)個(ge)(ge)周期是在(zai)(zai)組件銷毀之前執行(xing)，在(zai)(zai)我項目開發(fa)中，覺得這(zhe)個(ge)(ge)其實(shi)有點(dian)類似(si)路由(you)鉤子beforeRouterLeave,都是在(zai)(zai)路由(you)離(li)開的時(shi)候(hou)執行(xing)，只不過(guo)beforeDestroy無法阻止路由(you)跳轉，但(dan)是可(ke)以做一些路由(you)離(li)開的時(shi)候(hou)操作(zuo)，因為這(zhe)個(ge)(ge)周期里面還可(ke)以使用data和method。比(bi)如一個(ge)(ge)倒計(ji)時(shi)組件，如果在(zai)(zai)路由(you)跳轉的時(shi)候(hou)沒有清(qing)(qing)除，這(zhe)個(ge)(ge)定時(shi)器還是在(zai)(zai)的，這(zhe)時(shi)候(hou)就可(ke)以在(zai)(zai)這(zhe)個(ge)(ge)里面清(qing)(qing)除計(ji)時(shi)器。

Destroyed

說實在的(de)，我還真的(de)不知道(dao)這(zhe)個周期(qi)跟beforeDestroy有什么區別，我在這(zhe)個周期(qi)里面(mian)調用(yong)data的(de)數據和(he)methods的(de)方法都能調用(yong)，所以我會覺得跟beforeDestroy是一樣的(de)。

activated

被 keep-alive 緩存(cun)的組件激活時調用。

該(gai)鉤子在(zai)服(fu)務器端渲染(ran)期間不被調用。

deactivated

被 keep-alive 緩(huan)存(cun)的組件停(ting)用時調(diao)用。

該(gai)鉤(gou)子在(zai)服務器端渲染期(qi)間不被調(diao)用(yong)。

errorCapturde

當捕獲(huo)一個(ge)來自子(zi)(zi)孫組(zu)(zu)件的錯(cuo)(cuo)誤(wu)時(shi)被(bei)調用。此鉤子(zi)(zi)會收到三個(ge)參數：錯(cuo)(cuo)誤(wu)對(dui)象、發生(sheng)錯(cuo)(cuo)誤(wu)的組(zu)(zu)件實例以及一個(ge)包(bao)含錯(cuo)(cuo)誤(wu)來源信息的字符(fu)串。此鉤子(zi)(zi)可以返(fan)回(hui) false 以阻止該錯(cuo)(cuo)誤(wu)繼續向上傳播。

你可以在此鉤子中(zhong)修改組件(jian)的(de)狀態。因(yin)此在捕獲錯誤時(shi)，在模板或(huo)渲染函數中(zhong)有一個條(tiao)件(jian)判斷來繞(rao)過(guo)其它內容就很重要；不然該組件(jian)可能會進入一個無限的(de)渲染循環。

在(zai)哪個生命周期(qi)中都可(ke)以看到this

12.對于(yu)vuex的(de)理(li)解一些使用場(chang)景

對于vuex的理解

Vuex 是一(yi)個專為(wei) Vue.js 應用(yong)程序開發的狀態(tai)(tai)管理模式。它采用(yong)集中(zhong)式存(cun)儲管理應用(yong)的所有組(zu)件(jian)的狀態(tai)(tai)，并(bing)以相應的規則保證(zheng)狀態(tai)(tai)以一(yi)種可(ke)預測(ce)的方式發生變化。

一些使用場景

vuex 一(yi)般用(yong)(yong)(yong)于中大型 web 單頁應(ying)用(yong)(yong)(yong)中對(dui)應(ying)用(yong)(yong)(yong)的狀態進行管理，對(dui)于一(yi)些(xie)組件(jian)間(jian)關系較為(wei)簡單的小型應(ying)用(yong)(yong)(yong)，使用(yong)(yong)(yong) vuex 的必要(yao)性不是很大，因為(wei)完(wan)(wan)全可以用(yong)(yong)(yong)組件(jian) prop 屬性或(huo)者事件(jian)來完(wan)(wan)成父子(zi)組件(jian)之(zhi)間(jian)的通信，vuex 更多(duo)地(di)用(yong)(yong)(yong)于解決(jue)跨(kua)組件(jian)通信以及作為(wei)數據(ju)中心(xin)集(ji)中式存儲數據(ju)。

13.對(dui)于vue中v-model的原理的理解,v-on可(ke)以監(jian)聽多(duo)個方法么

一，v-model是(shi)什么

v-model就是vue的(de)(de)雙向綁定的(de)(de)指(zhi)令，能將頁面上控件(jian)輸入(ru)的(de)(de)值(zhi)(zhi)同步更新到相關(guan)綁定的(de)(de)data屬性，也(ye)會在更新data綁定屬性時(shi)候，更新頁面上輸入(ru)控件(jian)的(de)(de)值(zhi)(zhi)。

二，為什么使用v-model

v-model作為雙向綁定指令也(ye)是vue兩大(da)核心功能(neng)之一，使(shi)用非常方便(bian)，提高前端(duan)開(kai)發效率。在view層，model層相互需要數(shu)據交互，即可使(shi)用v-model。

三，v-model的原理簡(jian)單描述

v-model主(zhu)要提供(gong)了兩(liang)個功能，view層輸入值(zhi)影響data的屬(shu)性值(zhi)，data屬(shu)性值(zhi)發生改變會(hui)更新view層的數(shu)值(zhi)變化。

v-on可以監聽多個方法

14.vue初始化(hua)頁面閃動問題

在根(gen)dom上加上 style=“display: none;” :style="{display: ‘block’}"

<div class="app" style="display: none;" :style="{display: 'block'}">	{{message}}</div>

ok，完美解(jie)決vue初(chu)始(shi)加(jia)載(zai)前的花屏現象(xiang)

15.談談對vue雙向數據綁定原理(li)的理(li)解(jie)

實現(xian)mvvm的雙向綁定，是采用數據劫持結合發(fa)布(bu)者(zhe)-訂(ding)(ding)閱者(zhe)模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發(fa)布(bu)消息給訂(ding)(ding)閱者(zhe)，觸發(fa)相應的監聽回(hui)調(diao)。就必須要(yao)實現(xian)以下幾點：

1、實現一個數(shu)據監聽(ting)器Observer，能夠對(dui)數(shu)據對(dui)象的所有屬性(xing)進行監聽(ting)，如有變動可拿到最新值并通知訂閱者

2、實現一個(ge)指(zhi)令(ling)(ling)解(jie)析器Compile，對每個(ge)元素節(jie)點的指(zhi)令(ling)(ling)進行掃描和解(jie)析，根據(ju)(ju)指(zhi)令(ling)(ling)模板替換數(shu)據(ju)(ju)，以及綁定相應的更新函數(shu)

3、實現一個Watcher，作(zuo)為連接Observer和Compile的橋(qiao)梁(liang)，能(neng)夠訂閱并收到每個屬性變動的通(tong)知，執(zhi)行指(zhi)令(ling)綁定的相應回調(diao)函數，從而更新視圖

4、mvvm入口函數，整合以上三者

16.鉤子的actived和mounted的區(qu)別

mounted鉤子在主頁掛載時(shi)執(zhi)行(xing)一次(ci)，如果沒有緩存的話，再次(ci)回到主頁時(shi)，mounted還會執(zhi)行(xing)，從而(er)導致ajax反(fan)復獲取數據。

activated鉤子則(ze)不受緩存的影響，每次重新回到(dao)主(zhu)頁都會執行。

17.router和route的(de)區別

router是VueRouter的(de)(de)(de)一(yi)個(ge)對(dui)(dui)象(xiang)，通過Vue.use(VueRouter)和VueRouter構(gou)造(zao)函數(shu)得到(dao)一(yi)個(ge)router的(de)(de)(de)實(shi)例對(dui)(dui)象(xiang)，這個(ge)對(dui)(dui)象(xiang)中是一(yi)個(ge)全局的(de)(de)(de)對(dui)(dui)象(xiang)，他(ta)包含了(le)所(suo)有的(de)(de)(de)路由(you)包含了(le)許(xu)多關鍵的(de)(de)(de)對(dui)(dui)象(xiang)和屬性。

route是一(yi)個(ge)跳轉的(de)路由(you)對象，每一(yi)個(ge)路由(you)都會有一(yi)個(ge)route對象，是一(yi)個(ge)局(ju)部的(de)對象，可以獲取對應的(de)name,path,params,query等

18.路由(you)守衛都有什么,哪個守衛可以在在next中(zhong)傳函數(shu)(beforeRouteEnter)

19.mvc和(he)mvvm的區(qu)別,數據劫(jie)持(chi)的優點(dian)

MVC是三個單詞的首字母縮寫，它們是Model（模型(xing)）、View（視(shi)圖）和Controller（控制(zhi)）。

這個模式(shi)認為(wei)，程序不論簡(jian)單(dan)或復雜，從結構上(shang)看，都可以(yi)分成三(san)層。

最(zui)上(shang)面的(de)一層(ceng)，是(shi)(shi)直接面向最(zui)終用戶的(de)"視圖層(ceng)"（View）。它是(shi)(shi)提供(gong)給用戶的(de)操(cao)作界面，是(shi)(shi)程序的(de)外殼。

最底下(xia)的一層，是(shi)核心的"數(shu)(shu)據層"（Model），也就是(shi)程序需要操作的數(shu)(shu)據或(huo)信息。

中(zhong)間的一層(ceng)，就是(shi)"控制層(ceng)"（Controller），它負責根據(ju)(ju)(ju)用戶從"視圖層(ceng)"輸(shu)入(ru)的指令(ling)，選取"數(shu)(shu)據(ju)(ju)(ju)層(ceng)"中(zhong)的數(shu)(shu)據(ju)(ju)(ju)，然后對其進(jin)行相應的操作，產生最終結果。

這(zhe)三層是(shi)緊密聯系在(zai)一(yi)起的(de)，但(dan)又(you)是(shi)互(hu)相獨(du)立的(de)，每(mei)一(yi)層內部的(de)變化不(bu)影響其他(ta)層。每(mei)一(yi)層都對外提供(gong)接(jie)口（Interface），供(gong)上面一(yi)層調用。這(zhe)樣一(yi)來，軟件就可以實現(xian)模塊化，修改(gai)外觀或者(zhe)變更數(shu)據都不(bu)用修改(gai)其他(ta)層，大(da)(da)大(da)(da)方便了維(wei)護和升級。

MVVM的模式

由 Model、View、ViewModel 三部分構成，Model 層代(dai)表數據模型，也可(ke)以在(zai)Model中定義數據修(xiu)改和操作的業務邏輯；View 代(dai)表UI 組件，它負責將數據模型轉(zhuan)化成UI 展現出來，ViewModel 是一個同步View 和 Model的對象(xiang)。

在MVVM架構下(xia)，View 和(he) Model 之(zhi)間(jian)并(bing)沒有(you)直接的聯(lian)系(xi)，而是通過ViewModel進(jin)行交互，Model 和(he) ViewModel 之(zhi)間(jian)的交互是雙(shuang)向的， 因此View 數據的變化會同步(bu)到(dao)Model中，而Model 數據的變化也會立即(ji)反應(ying)到(dao)View 上。

ViewModel 通過(guo)雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的(de)同(tong)步工作完全是自動的(de)，無需(xu)人為(wei)干(gan)涉，因(yin)此開(kai)發者只需(xu)關注業務邏(luo)輯，不(bu)需(xu)要手(shou)動操作DOM， 不(bu)需(xu)要關注數據狀(zhuang)態的(de)同(tong)步問題(ti)，復雜(za)的(de)數據狀(zhuang)態維護完全由 MVVM 來統一管理。

20.頁(ye)面(mian)加載會調用幾(ji)個鉤子

會觸發(fa) 下面這幾(ji)個beforeCreate, created, beforeMount, mounted 。

21.常用的事件修飾符有(you)哪些(xie)

stop：阻止冒(mao)泡(pao)（通俗(su)講就是阻止事件向上級DOM元素傳遞）

prevent：阻(zu)止(zhi)默認事件(jian)的發(fa)生

capture：捕獲(huo)冒泡(pao)，即有(you)(you)冒泡(pao)發(fa)生(sheng)時，有(you)(you)該修飾符的dom元(yuan)素會(hui)先執(zhi)行(xing)，如(ru)果有(you)(you)多個，從外到內依次執(zhi)行(xing)，然后再按自(zi)然順序執(zhi)行(xing)觸發(fa)的事(shi)件。

self：將事件綁定到自身(shen)，只有自身(shen)才能觸(chu)發，通常用(yong)于(yu)避免冒泡事件的(de)影響

once：設置事件只(zhi)能觸發一(yi)次(ci)，比如(ru)按鈕的點(dian)擊等。

passive：該修飾符大概意思(si)用(yong)于對DOM的(de)默認事件(jian)進行性能優化(hua)，根據官網的(de)例子比如超出最(zui)大范(fan)圍的(de)滾動條(tiao)滾動的(de)。

native：在父組件(jian)(jian)(jian)(jian)中給子組件(jian)(jian)(jian)(jian)綁定一個原生的事件(jian)(jian)(jian)(jian)，就將子組件(jian)(jian)(jian)(jian)變成了(le)普(pu)通的HTML標簽，不加’. native’事件(jian)(jian)(jian)(jian)是無法觸(chu) 發的。

22.vif,vshow的區(qu)別

　1.手段：v-if是(shi)動態的(de)向DOM樹內(nei)添加或者刪除DOM元素；v-show是(shi)通過設置DOM元素的(de)display樣式屬性控制(zhi)顯隱(yin)；

2.編譯(yi)過(guo)程(cheng)：v-if切換(huan)(huan)(huan)有一個局部編譯(yi)/卸載的過(guo)程(cheng)，切換(huan)(huan)(huan)過(guo)程(cheng)中合適地銷毀和(he)重建內部的事件監聽和(he)子組件；v-show只是簡單的基于css切換(huan)(huan)(huan)；

**4.性(xing)能消耗(hao)：**v-if有更(geng)高(gao)的切換消耗(hao)；v-show有更(geng)高(gao)的初始渲染消耗(hao)；

**5.使用場景：**v-if適合運營條件(jian)不大可能改(gai)變(bian)；v-show適合頻繁切換。

23.同(tong)時寫(xie)vif和vfor執行結(jie)果是怎么樣的(de)

v-for和v-if不(bu)應該一(yi)起使用(yong)，必要情(qing)況(kuang)下應該替換成(cheng)computed屬(shu)性(xing)。

v-for比v-if優先級高，所以嵌(qian)套使用的(de)的(de)話，每次(ci)v-for都會(hui)執行(xing)v-if，造成不必要的(de)計(ji)算，影響性能，尤其是(shi)當之(zhi)需要渲染很小一部分的(de)時候。

24.虛擬(ni)DOM和真實(shi)DOM的區別,虛擬(ni)DOM的優缺點

虛(xu)擬DOM不會進行(xing)排版(ban)與重繪(hui)操作

虛(xu)擬DOM進行(xing)頻繁修改,然(ran)后(hou)一次性比較(jiao)并修改真(zhen)實(shi)(shi)DOM中(zhong)需要改的部分(注(zhu)意(yi)!),最后(hou)并在真(zhen)實(shi)(shi)DOM中(zhong)進行(xing)排(pai)版與(yu)重繪,減少(shao)過多DOM節(jie)點排(pai)版與(yu)重繪損耗(hao)

虛擬DOM有效降低大面積(真實DOM節(jie)點)的重繪與(yu)排版,因為最終與(yu)真實DOM比較差異,可以只(zhi)渲染局部(同2)

真實DOM頻繁排(pai)版與(yu)重(zhong)繪的效率是相當低(di)的

虛擬dom的優點

虛擬DOM具有批(pi)處理和(he)高效的(de)(de)Diff算法(fa),最終表現在DOM上的(de)(de)修(xiu)改只是變更的(de)(de)部(bu)分(fen)，可以保(bao)證(zheng)非常高效的(de)(de)渲染,優化(hua)性能.

虛擬dom的缺點

首(shou)次渲染(ran)大量DOM時，由于多了一層虛擬DOM的計算，會(hui)比(bi)innerHTML插入(ru)慢(man)。

25.觀察者(zhe)和發(fa)布者(zhe)訂閱有(you)什么區別

觀察者模式

比較概念(nian)的(de)(de)解釋是，目(mu)標(biao)(biao)和觀察(cha)者(zhe)是基類，目(mu)標(biao)(biao)提(ti)供(gong)維護(hu)觀察(cha)者(zhe)的(de)(de)一系列方(fang)法(fa)，觀察(cha)者(zhe)提(ti)供(gong)更(geng)新接(jie)口。具體(ti)觀察(cha)者(zhe)和具體(ti)目(mu)標(biao)(biao)繼承(cheng)各自(zi)(zi)的(de)(de)基類，然后具體(ti)觀察(cha)者(zhe)把(ba)自(zi)(zi)己注冊(ce)到具體(ti)目(mu)標(biao)(biao)里，在(zai)具體(ti)目(mu)標(biao)(biao)發生變化時候，調(diao)度觀察(cha)者(zhe)的(de)(de)更(geng)新方(fang)法(fa)。

比如有個“天氣中心”的(de)具體目(mu)標A，專門(men)監聽天氣變(bian)化，而有個顯示天氣的(de)界面(mian)的(de)觀察(cha)者B，B就把自己(ji)注冊到A里，當(dang)A觸發天氣變(bian)化，就調度B的(de)更新方(fang)法，并帶(dai)上自己(ji)的(de)上下文。

1.發布/訂閱模式

比較概念的(de)解釋是(shi)，訂閱者把自(zi)己想訂閱的(de)事件注冊(ce)到(dao)(dao)調(diao)度(du)中心(xin)(xin)，當該事件觸發(fa)時候，發(fa)布者發(fa)布該事件到(dao)(dao)調(diao)度(du)中心(xin)(xin)（順(shun)帶上下(xia)文），由(you)調(diao)度(du)中心(xin)(xin)統(tong)一(yi)調(diao)度(du)訂閱者注冊(ce)到(dao)(dao)調(diao)度(du)中心(xin)(xin)的(de)處理代碼(ma)。

比如有個界面(mian)是實時(shi)(shi)顯示天(tian)(tian)氣，它(ta)就(jiu)(jiu)訂(ding)閱天(tian)(tian)氣事件(jian)（注冊到調(diao)度(du)中(zhong)心(xin)(xin)，包括處(chu)理(li)程(cheng)序），當天(tian)(tian)氣變(bian)化時(shi)(shi)（定(ding)時(shi)(shi)獲取數據），就(jiu)(jiu)作為發布者(zhe)發布天(tian)(tian)氣信息到調(diao)度(du)中(zhong)心(xin)(xin)，調(diao)度(du)中(zhong)心(xin)(xin)就(jiu)(jiu)調(diao)度(du)訂(ding)閱者(zhe)的天(tian)(tian)氣處(chu)理(li)程(cheng)序。

26.跨(kua)域問題是如何(he)解決的(de),對跨(kua)域的(de)理解,服務器之間存(cun)在跨(kua)域么

解決跨域問題

設置document.domain解決無(wu)法讀(du)取(qu)非(fei)同源網頁的 Cookie問題

因為(wei)瀏覽器是通過document.domain屬性(xing)來檢查兩個(ge)頁面是否同源，因此只要通過設置相同的document.domain，兩個(ge)頁面就可以共(gong)享Cookie（此方案僅限主域相同，子域不同的跨(kua)域應(ying)用場(chang)景。）

跨文(wen)檔(dang)通信 API：window.postMessage()

調用postMessage方法實現父窗口向子窗口發消息（子窗口同樣可以通過該方法發送消息給父窗口）

它可用(yong)于(yu)解決以下方面的(de)問題：

頁面(mian)和其(qi)打開的(de)新窗口(kou)的(de)數據(ju)傳遞

多窗口之間消息傳遞

頁面與嵌(qian)套的(de)iframe消(xiao)息(xi)傳(chuan)遞(di)

上(shang)面三個場景的(de)跨域數據傳遞

JSONP

JSONP是服務器與(yu)客戶端跨(kua)源通信(xin)的常用方(fang)法(fa)。最大特點就是簡單適用，兼容性好（兼容低版本IE），缺(que)點是只支持(chi)get請(qing)求(qiu)，不支持(chi)post請(qing)求(qiu)。

核心思想(xiang)：網頁通過添(tian)加一個

27.在(zai)開發(fa)中使用axios用于干什么,axios的封裝

Axios是基于ajax＋promise開發一個(ge)交互插(cha)件。目前(qian)基本(ben)用(yong)于vue項目中進行(xing)前(qian)后數(shu)據(ju)請求。項目中一般基于axios做二次封裝使用(yong)。

只做(zuo)過簡單的axios封裝

28.restful接口規范

RestFul風格(ge)(接口)

專人專職

一個方法只對應(ying)一種功能