html and css

1、doctype作用：

!Doctype聲明叫做文件類型定義（DTD），位于文檔中的最前面，是告知瀏覽器以哪種模式來解析文檔。 嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼。 混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。 保障頁面在瀏覽器中正確的顯示

2、html5，css3的新特性

1.語義化標(biāo)簽，豐富的表單元素，canvas，關(guān)于拖放的api，h5的一些接口（全屏，網(wǎng)絡(luò)等）
2.b邊框圓角，漸變背景，flex布局，多列布局，陰影，新增偽元素(::selection)，邊框圖片等

3、清除浮動

浮動的影響：浮動元素會脫離文檔流，不占據(jù)空間，浮動元素碰到包含它的邊框的時候會停留，父元素的高度不會被撐開，后面的相同的浮動元素跟隨其后，會影響頁面結(jié)構(gòu)。
清除浮動：
1.父元素的末尾添加空塊元素標(biāo)簽并設(shè)置clear:both
2.觸發(fā)bfc獨(dú)立布局（父overflow：hidden；position：absolute或者fixed；display:inline-block；浮動）
3.after偽元素來清除浮動（父::after{content:'',display:block;clear:both}）

4、水平垂直居中方式（3種以上）

首先對父元素設(shè)置相對定位father{position:relative}
1.son{position:absolute;top:50%；left：50%；margin-left:-width/2margin-top:-height/2;}適用于已知元素寬高
2.son{transform:translate(-50%,50%)}適用未知寬高
3.son{top,left,right,bottom:0;margin:auto}適用未知寬高
flex布局居中
4.father{display：flex;justify-content:center;align-items: center;}

5、src和href的區(qū)別

href：標(biāo)識超文本引用，用在link和a等元素上，href是引用和頁面關(guān)聯(lián)，是在當(dāng)前元素和引用資源之間建立聯(lián)系
src：表示引用資源，表示替換當(dāng)前元素，用在img，script，iframe上，src是頁面內(nèi)容不可缺少的一部分

6、適用不同分辨率方案?

1.媒體查詢
2.百分比布局
3.rem布局

7、px em rem

他們都是相對單位
px不會隨瀏覽器變化
em是相對于父級
rem是相對于html標(biāo)簽的font-size而言

8、css sprites

雪碧圖一般適用于比較小的icon式的圖片，將他們放到一張畫布上，集成為一張圖片，使用是用定位的方式展示用使用的圖片
一般用作優(yōu)化提高頁面的加載速度

9、scss/sass 和less區(qū)別?

scss和less都是css的預(yù)處理器，讓css代碼具有語法功能，提高css的復(fù)用與簡便使用
1.編譯環(huán)境
2.定義變量scss支持語法，scss更強(qiáng)大
@mixin -@include ?@extend+類名或者占位符%創(chuàng)建的類

10、常用的meta頭

移動端添加當(dāng)前的meta頭，用來解決移動端窗口的問題，方便用戶操作，如窗口的width，縮放比列等，還可以設(shè)置一些縮放限制
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"?/>

11、標(biāo)簽語義化

語義化標(biāo)簽：就是讓標(biāo)簽有自己的含義，常用的header,footer,nav,article（定義文檔外獨(dú)立的布局）main,aside,section
好處：css樣式未加載出來，任然可以呈現(xiàn)頁面的結(jié)構(gòu) 有利于SEO和搜索引擎建立良好的溝通，有利于爬蟲抓取更多的有效信息 便于開發(fā)和維護(hù)，更具有可讀性

12、html渲染解析過程，js（會阻塞頁面加），css位置，重繪，重排（回流）

頁面的解析過程：
在頁面加載時，瀏覽器把獲取到的HTML代碼解析成1個DOM樹，DOM樹里包含了所有HTML標(biāo)簽，包括display:none隱藏，還有用JS動態(tài)添加的元素等。
瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結(jié)構(gòu)體
DOM Tree 和樣式結(jié)構(gòu)體組合后構(gòu)建render tree, render tree類似于DOM tree，但區(qū)別很大，因?yàn)閞ender tree能識別樣式，render tree中每個NODE都有自己的style，而且render tree不包含隱藏的節(jié)點(diǎn)(比如display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn))，因?yàn)檫@些節(jié)點(diǎn)不會用于呈現(xiàn)，而且不會影響呈現(xiàn)的，所以就不會包含到 render tree中。我自己簡單的理解就是DOM Tree和我們寫的CSS結(jié)合在一起之后，渲染出了render tree。
回流：當(dāng)render tree中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為回流。
重繪：當(dāng)render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如background-color。則就叫稱為重繪。
注意：回流必將引起重繪，而重繪不一定會引起回流。

13、flex布局

flex布局在前端開發(fā)使用的比較多，可以參考阮一峰flex講解

14、權(quán)重css，盒模型，動畫，flex布局

!important>內(nèi)聯(lián)樣式>id>class>div

15、移動和web開發(fā)有何不同，

1.業(yè)務(wù)場景不同
2.技術(shù)不太相同
3.移動端適配
4.性能（網(wǎng)絡(luò)問題）

16、如何實(shí)現(xiàn)響應(yīng)式布局（3種）

1.meta標(biāo)簽viewport+媒體查詢
2.百分比布局
3.rem布局

17、url解析過程

1.首先，在瀏覽器地址欄中輸入url
2.瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三步操作
3.在發(fā)送http請求前，需要域名解析(DNS解析)，解析獲取相應(yīng)的IP地址
4.瀏覽器向服務(wù)器發(fā)起tcp連接，與瀏覽器建立tcp三次握手
5.握手成功后，瀏覽器向服務(wù)器發(fā)送http請求，請求數(shù)據(jù)包
6.服務(wù)器處理收到的請求，將數(shù)據(jù)返回至瀏覽器
7.瀏覽器收到HTTP響應(yīng)
8.瀏覽器解析渲染頁面:解析html源碼;生成Dom樹、解析css樣式、js交互

javascript

1、事件委托

事件委托：利用冒泡機(jī)制，把子元素的事件委托到父級元素上，
優(yōu)點(diǎn)：不需要循環(huán)綁定事件，能夠動態(tài)添加元素

2、防抖節(jié)流

為什么使用：有些瀏覽器事件可以在短時間內(nèi)快速觸發(fā)多次，這可能會導(dǎo)致一些嚴(yán)重的性能問題，構(gòu)建應(yīng)用程序，出現(xiàn)滾動、窗口大小調(diào)整或按下鍵等事件請務(wù)必提及防抖(Debouncing)和函數(shù)節(jié)流（Throttling）來提升頁面速度和性能。這兩兄弟的本質(zhì)都是以閉包的形式存在。通過對事件對應(yīng)的回調(diào)函數(shù)進(jìn)行包裹、以自由變量的形式緩存時間信息，最后用setTimeout來控制事件的觸發(fā)頻率。
節(jié)流：主要思想在于：在某段時間內(nèi)，不管你觸發(fā)了多少次回調(diào)，都只認(rèn)第一次，并在計時結(jié)束時給予響應(yīng)。
防抖：主要思想在于：在某段時間內(nèi)，不管你觸發(fā)了多少次回調(diào)，我都只認(rèn)最后一次。

3、閉包

閉包：就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁。
原因：外層函數(shù)調(diào)用后，外層函數(shù)的函數(shù)作用域（AO）對象無法釋放，被內(nèi)層函數(shù)引用者
好處：1.防止命名沖突，實(shí)現(xiàn)封裝，當(dāng)做公有變量 2.可以做緩存
壞處：1.私有變量不能被銷毀，內(nèi)存大量消耗，造成內(nèi)存泄露 2.由于閉包需要突破作用域鏈，性能會有損失

4、原型鏈

原型：是function對象的一個屬性，它定義了構(gòu)造函數(shù)制造出的對象的公共祖先。通過該構(gòu)造函數(shù)產(chǎn)生的對象，可以繼承該原型的屬性和方法。原型也是對象。
原型鏈：當(dāng)函數(shù)被new操作符調(diào)用時，會創(chuàng)建出一個對象，并且該對象中會有一個指向其原型對象的屬性_proto_，這樣新建的對象實(shí)例就可以調(diào)用相關(guān)原型對象中的成員；原型對象自身也具原型，因此，也包含了指向其原型對象的屬性，原型鏈的終端是Object.prototype.__proto__。這樣就形成了一個鏈?zhǔn)浇Y(jié)構(gòu)。

5、繼承

1.原型鏈繼承,方式：子類的構(gòu)造函數(shù)的原型等于父類的實(shí)例
function Parent(){this.lastName = 'parent'};
function Child(){this.name = 'child'};
Child.prototype = new Parent();
var child = new Child();?
2.構(gòu)造繼承
function Parent(){}
function Sub(){ Parent.call(this);}
var sub = new Sub()
繼承：（字面意思理解）訪問實(shí)例對象上面的某一個屬性或者方法的是時候，如果實(shí)例對象上面沒有，就會沿著原型鏈往上找，找到自己的原型，如果原型上也沒有，直到找到終點(diǎn)，這個過程中，訪問實(shí)例對象沒有的屬性，也能找到屬性值，稱為繼承null->Object.prototype -> Function.prototype -> Object,Array,Function,Boolean,String,Number

6、call，apply，bind

作用：用來改變this指向
傳參列表不同：call,bind挨個添加，apply是數(shù)組，bind綁定后不會立即執(zhí)行函數(shù)，需要再次執(zhí)行

7、對象，數(shù)組，字符串常用的方法

1.string對象：字符串操作不會改變原來的字符串length,indexOf(),lastIndexOf(),toLowerCase().toUpperCase(),
replace(),substr(,參數(shù)2為個數(shù)),substring(，參數(shù)2為索引) split("分割符")最強(qiáng)大的讓字符創(chuàng)變成數(shù)組 charAt(index),charCodeAt()，includes(),starWith(),endWith(),repeat(),concat();
padStart(maxlength,fillString),padEnd()
2.arr對象 ：length ?shift(),unshift(),push(),pop(),join(),slice(),reverse(),splice(index,delNumber,addEle...),
concat(),sort(),from(),of(),find(f),fundIndex(),map(),forEach(),filter(),each(),indexOf(),lastIndexOf()
3.object：Object.assign(obj,obj1)合并對象，Object.is()類似于===，Object.keys()，values,entries返回一個屬性名,屬性值，鍵值對的數(shù)組，Object.create(null||obj)創(chuàng)建一個對象（可以創(chuàng)建一個沒有原型的對象，或者創(chuàng)建一個固定原型的對象）
4.Math對象：floor(向下取整),ceil(上),round(四舍五入),max(),min(),random(),abs()

8、對象深度克隆

1.JSON.stringify()適合沒有函數(shù)的對象
2.function?deepClone(Origin){
?if(typeof?Origin?!==?'object')?return?Origin;
? var?Target?=?Origin?instanceof?Array???[]?:?{};
? ?for(var?key?in?Origin){ if(Origin.hasOwnProperty(key)){
? ? ?Target[key]?=?typeof?Origin[key]?===?'object'?deepClone(Origin[key])?:?Origin[key];}
? }
?return?Target;
}
3.Object.assign({},obj)適用于只有一層結(jié)構(gòu)對象

9、作用域，變量提升，預(yù)編譯

作用域：每個javascript函數(shù)都是一個對象，對象中有些屬性我們可以訪問，但有些不可以，這些屬性僅供javascript引擎存取，[[scope]]就是其中一個。[[scope]]指的就是我們所說的作用域,其中存儲了運(yùn)行期上下文的集合。
作用域鏈：[[scope]]中所存儲的執(zhí)行期上下文對象的集合，這個集合呈鏈?zhǔn)芥溄樱覀儼堰@種鏈?zhǔn)芥溄咏凶鲎饔糜蜴?br>運(yùn)行期上下文：當(dāng)函數(shù)執(zhí)行時，會創(chuàng)建一個稱為執(zhí)行期上下文的內(nèi)部對象。一個執(zhí)行期上下文定義了一個函數(shù)執(zhí)行時的環(huán)境，函數(shù)每次執(zhí)行時對應(yīng)的執(zhí)行上下文都是獨(dú)一無二的，所以多次調(diào)用一個函數(shù)會導(dǎo)致創(chuàng)建多個執(zhí)行上下文，當(dāng)函數(shù)執(zhí)行完畢，執(zhí)行上下文被銷毀
預(yù)編譯的四個環(huán)節(jié)
1.創(chuàng)建AO對象
2.找形參和變量聲明，將變量和形參名作為AO屬性名，值為undefined
3.將實(shí)參值和形參統(tǒng)一
4.在函數(shù)體里面找函數(shù)聲明，值賦予函數(shù)體

10、this

1.全局this指向window
2.預(yù)編譯this指向window
3.call,apply,bind會改變this指向
4.this指向調(diào)用者，
5.構(gòu)造函數(shù)指向?qū)嵗龑ο?/p>

11、數(shù)據(jù)類型基本

基本值：Number String Boolean undefined null symbol
引用值：array ?object ?function

12、typeof返回值

?number string function object boolean undefined symbol

13、創(chuàng)建數(shù)組，對象的常用方式

數(shù)組：字面量[]，new Array(2) , 2為長度，new Array(12,21)值
對象：字面量{}，new Object()，構(gòu)造函數(shù)，Object.create()

14、new的原理?

在函數(shù)體的邏輯最上面新建一個this對象，在最后return這個對象，可參考：原理

15、跨域常用的方法

1.axios封裝了ajax然后本地使用proxy代理
2.jsonp

16、同源策略

是一種瀏覽器的安全性的約定，既沒有明確授權(quán)，就不能讀取對方資源協(xié)議，ip，端口號不一致都會跨域

17、宏任務(wù)，微任務(wù)Event-Loop

可以參考：教程詳解
常見的宏任務(wù)：setTimeout
常見的微任務(wù):promise.then() ?process.nextTick
執(zhí)行順序:同步代碼=》微任務(wù)=》宏任務(wù)

18、事件冒泡，事件捕獲（阻止方法默認(rèn)事件）

冒泡：結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。
捕獲：結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）
先捕獲-》元素執(zhí)行-》冒泡?
冒泡阻止方法：? ? event.stopPropagation()?event.cancelBubble = true;
捕獲阻止方法：1.return false; 2.event.preventDefault();3.event.returnValue = false;

19、js垃圾回收機(jī)制

1.可達(dá)性（一個對象，里面有一些屬性，當(dāng)對象重新被賦值的時候，原來對象的不可訪問的屬性）
2.兩個引用。（就是說對象的賦值，必須兩個對象都重新賦值，才能被銷毀）
算法：標(biāo)記-清除算法：就是找到根并標(biāo)記，標(biāo)記來自它的引用，以此類推，除了標(biāo)記外都清除

20、怎么判斷一個變量是否 null/undefined

區(qū)別就是null已經(jīng)定義了，但是沒有值，而undefined是未定義

1.typeof ->'object','undefined' 2.String()->'null','undefined' 3.Number()->0,NaN 4.===

21、callee caller

arguments在函數(shù)中存著實(shí)參列表，arguments.callee()返回當(dāng)前偽數(shù)組所屬的函數(shù)func.caller()返回當(dāng)前函數(shù)的運(yùn)行環(huán)境，如果為全局返回null,如果是其他函數(shù)，則返回該函數(shù)

22、|| &&運(yùn)算機(jī)制

常見的判斷返回false的值：undefined,null,false,0,''
（||(&&)遇到真(假)的停，都為假(真)，返回最后
例如：11||0 返回11,0||11返回11,0&&11返回0，

23、Regexp

請參考我的另一篇關(guān)于正則表達(dá)式的文章

24、隱式類型轉(zhuǎn)換 運(yùn)算符號的優(yōu)先級

（）[] .》++，--》*/》+-》==》&&》|| 》=

25、區(qū)分?jǐn)?shù)組還是對象方法

1.Object.prototype.toString.call([])"[object Array]"
2.String([])"",String({})"[object Object]"
3.[] instanceof Array4.Array.isArray([])5.[].constructor

26、原生ajax

Var xhr = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp');
xhr.open('get/post',url);
xhr.onreadystatechange(){if(xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300){var data = xhr.responseText}};
xhr.send(post參數(shù));
readyState：狀態(tài)0：請求未初始化 1：服務(wù)器連接已經(jīng)建立 2：請求已接收 3：請求正在處理 4：請求已完成，且響應(yīng)已就緒

27.?狀態(tài)碼

1** 信息，服務(wù)器收到請求，需要請求者繼續(xù)執(zhí)行操作
2** 成功，操作被成功接收并處理，200 OK請求成功
3** 重定向，需要進(jìn)一步的操作以完成請求，301 Moved Permanently永久重定向；302 Found臨時重定向；303 Not Modified未修改 （所請求的資源未修改）
4** 客戶端錯誤，請求包含語法錯誤或無法完成請求：400 Bad request客戶端錯誤語法錯誤；403 Forbidden服務(wù)端理解客戶端的請求，但是拒絕執(zhí)行請求；404 Not Found找不到客戶端請求的資源
5** 服務(wù)器錯誤，服務(wù)器在處理請求的過程中發(fā)生了錯誤，500 :服務(wù)器內(nèi)部錯誤，無法完成請求任務(wù)
知識點(diǎn)：tcp三次握手（客戶端服務(wù)器數(shù)據(jù)傳輸協(xié)議）
第一次握手：建立連接時，客戶端發(fā)送syn包（syn=j）到服務(wù)器，并進(jìn)入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)；SYN：同步序列編號（Synchronize Sequence Numbers）。syn_sent。第二次握手：服務(wù)器收到syn包，必須確認(rèn)客戶的SYN（ack=j+1），同時自己也發(fā)送一個SYN包（seq=k），即SYN+ACK包，此時服務(wù)器進(jìn)入SYN_RECV狀態(tài)；syn_recv。第三次握手：客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1），此包發(fā)送完畢，客戶端和服務(wù)器進(jìn)入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手。established

Es6

1、let const var

let const塊級作用域，暫時性死區(qū)，沒有變量提升，不能重復(fù)定義，const標(biāo)記的是地址不能變化（對象級就可以變化）

2、模板字符串

``變量可以直接在字符串里面使用${變量}

3、參數(shù)默認(rèn)值

function(a = ‘a(chǎn)aa’){}

4、箭頭函數(shù)和普通函數(shù)的區(qū)別

1.箭頭函數(shù)不能new
2.箭頭函數(shù)的實(shí)參不會綁定arguments而是形參的...運(yùn)算符
3.箭頭函數(shù)沒有自己的this，或者說他綁定了自己定義時的this

5、數(shù)組，對象擴(kuò)展方法

數(shù)組：
偽數(shù)組->真數(shù)組Array.from(),
把數(shù)值轉(zhuǎn)化成數(shù)組Array.of()，
找到符合的第一個元素find()找到索引findIndex()，
[].entries()，keys(),values()返回一個Interator遍歷器，可以使用呢些（）獲取，也可以使用for...of遍歷接口得到數(shù)據(jù)
includes()flat()數(shù)組扁平化
對象:
Object.assign() Object.is() keys() values() entries()

6、set map

Set:不重復(fù)的value的集合 方法：add delete has clear has size
Map：類似于object但是屬性值不限制為字符串，可以是一個對象map可key值地址不一樣視為兩個key ?方法：set get delete size has clear

7、for ... of ?for ... in

For of可以遍歷數(shù)組，對象，字符串，set結(jié)構(gòu)等具有Interator接口的數(shù)據(jù)結(jié)構(gòu)

8、import export

9、解構(gòu)賦值

Var [a,b,c] = [1,2,3],多的為undefined
Var {name,age} = {name:’1’,age’2’}定義的變量和屬性值一樣，沒有的undefined。
字符串可以解構(gòu)賦值

10、...展開運(yùn)算符

展開對象和數(shù)組，函數(shù)中放到形參位置接收實(shí)參

11、es5和es6構(gòu)造函數(shù)的區(qū)別，

1.不new，es6報錯，2.class造成暫時性死區(qū)，3啟用嚴(yán)格模式

12、Symbol（原始數(shù)據(jù)類型）

number string undefined null boolean
根本上是解決命名沖突，var a = Symbol(‘描述信息，用于控制臺區(qū)分變量’)這就是一個獨(dú)一無二的變量了，如果穿進(jìn)去對象，則會執(zhí)行對象的toString()方法

13、promise async

Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果 有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和rejected（已失?。?/p>

14、Class

Class Person{constructor(x,y){this.x = x;this.y = y} say(){}}
New Person()
class ColorPoint?extends Point{} ??//繼承

15、Proxy reflect

提供了一些基于對象的升級的方法?？梢岳斫獬?，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫。Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”。

Vue

1、vue2.x原理很重要（vue3.0原理）

Object.defineProperty會遍歷data對象的所有屬性，轉(zhuǎn)換成getter和setter，這兩個屬性對用戶是不可見的，但是在內(nèi)部它們讓Vue能夠追蹤依賴，在屬性被訪問和修改時通知變更。
重點(diǎn)：Object.defineProperty(obj, prop, desc)Obj:需要定義的當(dāng)前對象Prop當(dāng)前需要定義的是屬性名Desc屬性描述desc:{value:’’,writable,configurable,enumerable進(jìn)行配置，get:()=>{return;},set:()=>{}

2.mvvm

m: model層; v view視圖層;? vm view-model層充當(dāng)一個觀察者的角色，當(dāng)v層的數(shù)據(jù)發(fā)生變化后，會通過vm傳遞到m層,相同的，當(dāng)m層發(fā)生變化，相應(yīng)的v層也會發(fā)生變化

3.v-if,v-show

v-if:控制dom節(jié)點(diǎn)的顯示和隱藏，v-show是控制dom節(jié)點(diǎn)的樣式為display：none
v-if具有更高的切換消耗，v-show是渲染消耗
v-if當(dāng)值第一次為false是不會渲染該組件，v-show在任何情況都會渲染

4.父子組件傳值 非父子（eventBus，vuex）

父->子：子組件props來接收
子->父：子組件在自己的方法中調(diào)用父組件的方法this.$emit(‘fatherMethod’,payload)

5、watch，computed(高級用法)

watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的，它們都試圖處理這樣一件事情：當(dāng)某一個數(shù)據(jù)（稱它為依賴數(shù)據(jù)）發(fā)生變化的時候，所有依賴這個數(shù)據(jù)的“相關(guān)”數(shù)據(jù)“自動”發(fā)生變化，也就是自動調(diào)用相關(guān)的函數(shù)去實(shí)現(xiàn)數(shù)據(jù)的變動。
1.watch擅長處理的場景：一個數(shù)據(jù)影響多個數(shù)據(jù),可以監(jiān)視路由
2.computed擅長處理的場景：一個數(shù)據(jù)受多個數(shù)據(jù)影響,1.存在依賴型數(shù)據(jù) 2.依賴型數(shù)據(jù)發(fā)生改變這兩個條件,computed才會重新計算。

6、this.$set()?

一般是在data中某個對象添加一個屬性的時候

7、This.$nextTick()?

當(dāng)你執(zhí)行對data中的數(shù)據(jù)進(jìn)行賦值的時候，此時data中的數(shù)據(jù)會更新，但是dom此事并沒有跟新，而是把這個事件放在一個隊(duì)列中，等同一時刻需要變化的數(shù)據(jù)集齊后才會一起渲染dom，但是如果我想在dom更新后做點(diǎn)什么就會比較棘手這樣使用nextTick就會在dom個更新后立即調(diào)用

8、Vue生命周期函數(shù)

beforeCreate， created ，beforeMount， mounted，beforeUpdata，updated，beforeDestory, destoryed, activited，deactivie， errorCapture

9、路由的hash與history

hash在瀏覽器中符號“#”hash雖然在URL中，但不被包括在HTTP請求中；
history 前端的URL 必須和實(shí)際向后端發(fā)起請求的 URL 一致

10、路由守衛(wèi)

1. router.beforeEach((to,from,next)=>{})
2.回調(diào)函數(shù)中的參數(shù)，to：進(jìn)入到哪個路由去，from：從哪個路由離開，next：函數(shù)，決定是否展示你要看到的路由頁面。

課后練習(xí)

1、寫出代碼對下列數(shù)組去重并從大到小排列{5,2,3,6,8,6,5,4,7,1,9}

2、用 JavaScript 實(shí)現(xiàn)冒泡排序。數(shù)據(jù)為 23、45、18、37、92、13、24

3、用 js 實(shí)現(xiàn)隨機(jī)選取 10–100 之間的 10 個數(shù)字，存入一個數(shù)組，并排序。

4、已知數(shù)組var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert

出”This is Baidu Campus”

5、已知有字符串 foo=”get-element-by-id”,寫一個 function 將其轉(zhuǎn)化

成駝峰表示法”getElementById”

7、有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一

段JS程序提取 URL 中的各個 GET 參數(shù)(參數(shù)名和參數(shù)個數(shù)不確定)，將其按

key-value形式返回到一個 json 結(jié)構(gòu)中，如{a:’1′, b:’2′, c:”, d:’

xxx’, e:undefined}。

8、var numberArray = [3,6,2,4,1,5];

1)實(shí)現(xiàn)對該數(shù)組的倒排，輸出[5,1,4,2,6,3]

2)實(shí)現(xiàn)對該數(shù)組的降序排列，輸出[6,5,4,3,2,1]

9、輸出今天的日期，以 YYYY-MM-DD 的方式，比如今天是 2014 年 9 月

26日，則輸出 2014-09-26

以上內(nèi)容是自己復(fù)習(xí)面試的匯總，有些答案比較簡潔，可能有錯的，希望大家諒解上述內(nèi)容純屬是自己面試做的筆記，為了方便自己，后續(xù)會整理格式和錯的信息（有時間的話會繼續(xù)整理一些有用的知識）