mvc與mvvm的區(qū)別：
Model-View- Controlle? ??模型-視圖-控制?（業(yè)務(wù)邏輯） 單向通信
View 接受用戶交互請求==>請求轉(zhuǎn)交給Controller處理==>Controller 操作Model進行數(shù)據(jù)更新保存==>Model通知View更新==>View 更新變化數(shù)據(jù)使用戶得到反饋
MVC的思想：Controller負責(zé)將Model的數(shù)據(jù)用View顯示出來。
MVC的特點：實現(xiàn)關(guān)注點分離，即應(yīng)用程序中的數(shù)據(jù)模型與業(yè)務(wù)和展示邏輯解耦。就是將模型和視圖之間實現(xiàn)代碼分離，松散耦合，使之成為一個更容易開發(fā)、維護和測試的客戶端應(yīng)用程序。
MVC的優(yōu)點：
1、耦合度低，視圖層和業(yè)務(wù)層分離
2、重用度高
3、生命周期成本低
4、可維護性高
5、部署快
MVC的缺點：
1、不適合小型項目的開發(fā)
2、視圖與控制器間的過于緊密的連接，視圖與控制器是相互分離，但卻是聯(lián)系緊密的部件，妨礙了他們的獨立重用
3、降低了視圖對模型數(shù)據(jù)的訪問，依據(jù)模型操作接口的不同，視圖可能需要多次調(diào)用才能獲得足夠的顯示數(shù)據(jù)。4、對未變化數(shù)據(jù)的不必要的頻繁訪問，也將損害操作性能。
MVC的應(yīng)用：主要用于中大型項目的分層開發(fā)。
mvvm：
Model 層代表數(shù)據(jù)模型，View 代表UI 組件，ViewModel 是一個同步View 和 Model的對象。
MVVM是Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。【模型】指的是后端傳遞的數(shù)據(jù)?！疽晥D】指的是所看到的頁面?！疽晥D模型】mvvm模式的核心，它是連接view和model的橋梁。它有兩個方向：一是將【模型】轉(zhuǎn)化成【視圖】，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實現(xiàn)的方式是：DOM 事件監(jiān)聽。這兩個方向都實現(xiàn)的，我們稱之為數(shù)據(jù)的雙向綁定?？偨Y(jié)：在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實現(xiàn)一個observer觀察者，當數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應(yīng)的視圖做自動更新，而當用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動，這實際上就實現(xiàn)了數(shù)據(jù)的雙向綁定。
MVVM的優(yōu)點：
MVVM模式的主要目的是分離視圖（View）和模型（Model），有幾大優(yōu)點：
1、低耦合，視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
2、可重用性，可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
3、獨立開發(fā)，開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計，使用Expression Blend可以很容易設(shè)計界面并生成xml代碼。
4、可測試，界面向來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來寫
5、雙向數(shù)據(jù)綁定，它實現(xiàn)了View和Model的自動同步，當Model的屬性改變時，不需要手動操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應(yīng)View層顯示會自動改變
MVVM適用場景： 適合數(shù)據(jù)驅(qū)動的場景，數(shù)據(jù)操作比較多的場景。
JS內(nèi)置對象：array、boolean、date、math、number、string、regexp、error...
瀏覽器對象：window、navigator、screen、history、location
dom對象：document、body、event、style、input、table....
手寫響應(yīng)式:
減少頁面加載時間：
減少html，js，css的大小。
合并壓縮css，js
減少圖片大小，雪碧圖之類
減少http請求，請求會很耗時。
多使用緩存。
降低頁面的回流，能使用重繪使用重繪
多使用懶加載
阻止事件冒泡和默認事件：
阻止冒泡：e.stopPropagation();??e.cancelBubble=true;
阻止默認事件：e.preventDefault();??return false
vue? v-for 為什么要用key？
用v-for正在更新已渲染過的元素列表時，它默認用“就地復(fù)用”策略。
key的作用是給dom節(jié)點添加唯一標識，讓vue里的diff算法能快速找到有變化的dom節(jié)點，高效的更新虛擬DOM。
為什么不提倡用index下標綁定key呢，因為，用下標綁定key,刪除中間的item，那后面的每一項的下標就全部發(fā)生變化會更新全部的dom節(jié)點，這樣會造成性能消耗。此外還會出現(xiàn)一些bug。（選中項被刪除 后面的就變?yōu)檫x中等）
BFC 即 Block Formatting Contexts (塊級格式化上下文)
形成一個完全獨立的空間，讓空間中的子元素不會影響到外面的布局。
觸發(fā)bfc：
html 根元素
float浮動position (absolute、fixed)
overflow 除了 visible 以外的值 (hidden、auto、scroll)
display 為 inline-block、table-cells、flex
解決：
浮動元素的父元素高度塌陷
兩欄自適應(yīng)布局
外邊距垂直方向重合
特性：
1、同一個 BFC 下外邊距會發(fā)生折疊。（避免外邊距的重疊，可以將其放在不同的 BFC 容器中）
2、BFC 可以包含浮動的元素（清除浮動，父級overflow：hidden）
3、BFC 可以阻止元素被浮動元素覆蓋（盒子里有兩個元素 其中一個元素浮動 第二個將不會被覆蓋）
CSS 怎么畫一個大小為父元素寬度一半的正方形？
不設(shè)寬高、水平垂直居中？
1、彈性盒模型 flex或者grid，justify-content：center、align-items：center
2、子絕父相 top：50%、left：50%，transform：translate（-50%，-50%）
3、父級display:flex; 子級 margin：auto；【margin:auto是具有強烈計算意味的關(guān)鍵字，用來計算元素對應(yīng)方向應(yīng)該獲得的剩余空間大小? (1) 如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小(2) 如果兩側(cè)均是auto，則平分剩余空間】
4、父級 display: table-cell;vertical-align: middle;text-align: center; 子級 display:inline-block
一些定寬高 知曉父子元素的就能用 line-height：xx；text-align:center / 絕對定位，top：calc（50%-子級自身一半），left：calc（50%-子級自身一半）/ margin-left/right等
cookie、local storage和session storage區(qū)別？
cookie：
1、有數(shù)量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2、安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。
3、在設(shè)置的過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。每次發(fā)請求，都會攜帶在http請求頭中。所以只適合保存很小的數(shù)據(jù)保存的是文本。
session storage，local storage存儲能達到5M，保存的是字符串
session storage，僅在當前瀏覽器窗口關(guān)閉前有效，不能持久保存
localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)
函數(shù)的節(jié)流和防抖？
防抖與節(jié)流
函數(shù)節(jié)流: 指定時間間隔內(nèi)只會執(zhí)行一次任務(wù)；（滾動條例子）
函數(shù)防抖:? 任務(wù)觸發(fā)的間隔超過指定間隔的時候，任務(wù)才會執(zhí)行。（注冊用戶例子）
重繪和回流？
當Render Tree中部分或全部元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時，瀏覽器重新渲染部分或全部文檔的過程稱為回流。
導(dǎo)致回流的操作：
1、頁面首次渲染
2、瀏覽器窗口大小發(fā)生改變
3、元素尺寸或位置發(fā)生改變
4、元素內(nèi)容變化（文字數(shù)量或圖片大小改變而引起的計算值寬度和高度改變）
5、元素字體大小變化
6、添加或者刪除可見的DOM元素
7、激活CSS偽類（例如：:hover）
8、查詢某些屬性或調(diào)用某些方法
9、offsetWidth,width,clientWidth,scrollTop/scrollHeight的計算， 會使瀏覽器將漸進回流隊列Flush，立即執(zhí)行回流。
當頁面中元素樣式的改變并不影響它在文檔流中的位置時（例如：color、background-color、visibility等），瀏覽器會將新樣式賦予給元素并重新繪制它，這個過程稱為重繪。
回流必定會發(fā)生重繪，重繪不一定會引發(fā)回流。
如何避免重繪和回流？
css：
避免使用table布局，可能很小的一個小改動會造成整個table的重新布局
盡可能在DOM樹的最末端改變class。
避免設(shè)置多層內(nèi)聯(lián)樣式。
將動畫效果應(yīng)用到position屬性為absolute或fixed的元素上。
動畫實現(xiàn)的速度的選擇，動畫速度越快，回流次數(shù)越多，也可以選擇使用requestAnimationFrame
避免使用CSS表達式（例如：calc()）
使用transform替代top
使用visibility替換display: none，因為前者只會引起重繪，后者會引發(fā)回流（改變了布局）
將頻繁重繪或者回流的節(jié)點設(shè)置為圖層，圖層能夠阻止該節(jié)點的渲染行為影響別的節(jié)點
js：
避免頻繁操作樣式，最好一次性重寫style屬性，或者將樣式列表定義為class并一次性更改class屬性。
避免頻繁操作DOM，創(chuàng)建一個documentFragment，在它上面應(yīng)用所有DOM操作，最后再把它添加到文檔中。
也可以先為元素設(shè)置display: none，操作結(jié)束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發(fā)回流和重繪。
避免頻繁讀取會引發(fā)回流/重繪的屬性，如果確實需要多次使用，就用一個變量緩存起來。
對具有復(fù)雜動畫的元素使用絕對定位，使它脫離文檔流，否則會引起父元素及后續(xù)元素頻繁回流。
談?wù)凥5和CSS3?
H5:
新增和移除了一些元素。移除font、center、strike等標簽 ，這些css可以做。新增語義化標簽、音視頻、canvas、為表單提供了更多的控件類型url，email，date，tel等。新增了Drag&Drop（拖拽）、Geolocation（地理定位）、webstorage、webworkers等。
語義化標簽的作用?
1、去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
2、用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
3、有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重；
4、方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；
5、便于團隊開發(fā)和維護，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
css3:
選擇器上的豐富（屬性、兄弟、偽類等選擇器）、樣式的支持（彈性盒模型）、動畫的支持（transform、transition、animation）
em和rem？
em 大小取決于使用元素的font-size，錯誤的認為是父元素，其實是繼承。
上訴例子，瀏覽器默認16px，.wrap盒子font-size=16px*10=160px，.box盒子font-size=160px*0.5=80px, 則padding就為80px*0.5=40px。（因為該使用元素有自己的font-size）
上訴例子，瀏覽器默認16px 父元素繼承根元素的font-size，.box沒有自己的font-size，也繼承的是父元素的。所以padding為 16px*0.5=8px。
rem：相對于根元素大小的單位。（html）
px:相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
適配移動端方案？
1、媒介查詢
優(yōu)點：方法簡單，只需修改css文件、調(diào)整屏幕寬度時不用刷新頁面就可以響應(yīng)頁面布局
缺點：代碼量大，不方便維護、不能夠完全適配所有的屏幕尺寸，需要編寫多套css樣式
2、百分比布局方案
優(yōu)點：寬度自適應(yīng)，在不同的分辨率下都能達到適配
缺點：百分比的值不好計算、需要確定父級的大小，因為要根據(jù)父級的大小進行計算、各個屬性中如果使用百分比，相對父元素的屬性并不是唯一的、高度不好設(shè)置，一般需要固定高度
3、rem方案（使用js修改html的font-size或者媒介查詢修改）
優(yōu)點：rem單位是根據(jù)根元素font-size決定大小，只要改變font-size的值，以rem為固定單位的元素大小也會發(fā)生響應(yīng)式的改變
缺點：必須通過一段js代碼控制font-size的大小、控制font-size的js代碼必須放在在頁面第一次加載完成之前，并且放在引入的css樣式代碼之前
4、vw和vh方案
優(yōu)點：指定vw\vh相對與視口的寬高，由px換算單位成vw單位比較簡單、通過postcss-px-to-viewport插件進行單位轉(zhuǎn)換比較方便
缺點：直接進行單位換算時百分比可能出現(xiàn)小數(shù),計算不方便、兼容性- 大多數(shù)瀏覽器都支持、ie11不支持 少數(shù)低版本手機系統(tǒng) ios8、android4.4以下不支持
編碼習(xí)慣？
可讀性強的命名、備注好注釋、
git flow?
Git Flow是構(gòu)建在Git之上的一個組織、管理軟件開發(fā)活動的模型。Git Flow是一套使用Git進行源代碼管理時的一套行為規(guī)范和，通過利用Git創(chuàng)建和管理分支的能力，為每個分支設(shè)定具有特定的含義名稱，并將軟件生命周期中的各類活動歸并到不同的分支上。實現(xiàn)了軟件開發(fā)過程不同操作的相互隔離。這種軟件開發(fā)的活動模型被稱為“Git Flow”。
master、develop、feature、release、hotfix
vue $set原理？
vue初始化時已處理成響應(yīng)式的，即當我們改變對象obj的值或?qū)傩缘闹禃r，會觸發(fā)其在頁面上的更新，但是當頁面加載完成后，新增的屬性就不是響應(yīng)式的，雖然通過打印this.obj可以看出對象obj上確實增加了新的屬性，但是由于新增屬性不是響應(yīng)式的，所以新增的屬性不會體現(xiàn)在頁面上。原理則是將新增屬性設(shè)置為響應(yīng)式，并手動觸發(fā)通知該屬性值的更新。
計算屬性與watch的區(qū)別？
計算屬性變量在computed中定義，屬性監(jiān)聽在data中定義。
計算屬性初始化的時候就可以被監(jiān)聽并且計算，watch是發(fā)生改變的時候才會觸發(fā)。
如果一個數(shù)據(jù)依賴于其他數(shù)據(jù)的簡易計算處理的，那么使用computed比較合適。如果需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)變化。
eslint？
它可輔助規(guī)范代碼風(fēng)格，有效控制代碼質(zhì)量，并且在多人合作的情況下，也可以使代碼看起來更加的整潔。所以在開發(fā)過程中，還是建議保留eslint的校驗的，養(yǎng)成一個好的編碼習(xí)慣。
關(guān)閉：
1、在vue.config.js中配置? lintOnSave: false
?2、package.json文件中注釋掉eslint的配置
3、修改eslint 文件中的規(guī)則配置參數(shù)
js設(shè)計模式有哪些？
單例模式、發(fā)布-訂閱模式、中介者模式、代理模式、組合模式、命令模式等。。。
原型 、原型鏈？
原型鏈：
當訪問一個對象的某個屬性時，會先在這個對象本身屬性上查找，如果沒有找到，則會去它的__proto__隱式原型上查找，即它的構(gòu)造函數(shù)的prototype，如果還沒有找到就會再在構(gòu)造函數(shù)的prototype的__proto__中查找，這樣一層一層向上查找就會形成一個鏈式結(jié)構(gòu)，我們稱為原型鏈。
js的繼承？
1.原型鏈繼承
2.借用構(gòu)造函數(shù)（經(jīng)典繼承）
3.組合繼承
4.原型繼承
5.寄生式繼承
6.寄生組合式繼承
原型鏈繼承：
將父類的實例作為子類的原型
優(yōu)點：父類方法可以復(fù)用
缺點：父類的所有引用屬性會被所有子類共享，更改一個子類的引用屬性，其他子類也會受影響、子類型實例不能給父類型構(gòu)造函數(shù)傳參
構(gòu)造函數(shù)繼承:
在子類構(gòu)造函數(shù)中調(diào)用父類構(gòu)造函數(shù)，可以在子類構(gòu)造函數(shù)中使用call()和apply()方法
優(yōu)點：可以在子類構(gòu)造函數(shù)中向父類傳參數(shù)、父類的引用屬性不會被共享
缺點：子類不能訪問父類原型上定義的方法（即不能訪問Parent.prototype上定義的方法），因此所有方法屬性都寫在構(gòu)造函數(shù)中，每次創(chuàng)建實例都會初始化
組合繼承：
組合繼承綜合了原型鏈繼承和構(gòu)造函數(shù)繼承，將兩者的優(yōu)點結(jié)合了起來，
基本的思路就是使用原型鏈繼承原型上的屬性和方法，而通過構(gòu)造函數(shù)繼承實例屬性，這樣既可以把方法定義在原型上以實現(xiàn)重用，又可以讓每個實例都有自己的屬性
優(yōu)點：
1、父類的方法可以復(fù)用
2、可以在Child構(gòu)造函數(shù)中向Parent構(gòu)造函數(shù)中傳參
3、父類構(gòu)造函數(shù)中的引用屬性不會被共享
原型繼承：
優(yōu)點：父類方法可用
缺點：父類的引用會被所有子類所共享、子類實例不能向父類傳參
ES6class extends 繼承：
Vue響應(yīng)式原理？
Vue為MVVM框架，當數(shù)據(jù)模型data變化時，頁面視圖會得到響應(yīng)更新，其原理對data的getter/setter方法進行攔截（Object.defineProperty或者Proxy），利用發(fā)布訂閱的設(shè)計模式，在getter方法中進行訂閱，在setter方法中發(fā)布通知，讓所有訂閱者完成響應(yīng)。
在響應(yīng)式系統(tǒng)中，Vue會為數(shù)據(jù)模型data的每一個屬性新建一個訂閱中心作為發(fā)布者，而監(jiān)聽器watch、計算屬性computed、視圖渲染template/render三個角色同時作為訂閱者，對于監(jiān)聽器watch，會直接訂閱觀察監(jiān)聽的屬性，對于計算屬性computed和視圖渲染template/render，如果內(nèi)部執(zhí)行獲取了data的某個屬性，就會執(zhí)行該屬性的getter方法，然后自動完成對該屬性的訂閱，當屬性被修改時，就會執(zhí)行該屬性的setter方法，從而完成該屬性的發(fā)布通知，通知所有訂閱者進行更新。
談?wù)剆pa？談?wù)勊膬?yōu)缺點？
整個項目中只有一個頁面，頁面切換而不重新請求數(shù)據(jù)。實現(xiàn)思路：頁面初始化時加載所有的 HTML、JavaScript 和 CSS，頁面內(nèi)容的變化，靠js動態(tài)變化html的內(nèi)容與用戶交互。
優(yōu)點：提高用戶體驗，擁有和桌面應(yīng)用一樣的響應(yīng)速度，關(guān)注點分離。
缺點：對搜索引擎seo不友好，初次加載耗時多，不能使用瀏覽器的前進后退按鈕，需自己建立堆棧。
vue項目優(yōu)化？
1、懶加載（路由懶加載、圖片懶加載）
2、抽取功能重復(fù)組件和函數(shù)封裝，提高代碼復(fù)用率
3、采用服務(wù)端渲染ssr和預(yù)渲染
4、第三方插件按需引入
5、使用webpack對圖片進行壓縮
跨域？
指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本，是瀏覽器的同源策略引起的，是瀏覽器施加的安全限制。如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。
限制：
（1）Cookie、LocalStorage 和 IndexDB 無法讀取。（2） DOM 無法獲得。（3） AJAX 請求不能發(fā)送
跨域解決方案：
1、通過jsonp跨域
2、跨域資源共享cors
3、搭建代理服務(wù)器
4、postMessage
