一：什么是閉包？閉包的用處？

（1）閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)扔亥。在本質(zhì)上场躯，閉包就

是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。

（2）閉包可以用在許多地方旅挤。它的最大用處有兩個(gè)踢关，一個(gè)是可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中

閉包的特性：

①.封閉性：外界無(wú)法訪問(wèn)閉包內(nèi)部的數(shù)據(jù)粘茄，如果在閉包內(nèi)聲明變量签舞，外界是無(wú)法訪問(wèn)的，除非閉包主動(dòng)向外界提供訪問(wèn)接口柒瓣；

②.持久性：一般的函數(shù)儒搭，調(diào)用完畢之后，系統(tǒng)自動(dòng)注銷(xiāo)函數(shù)芙贫，而對(duì)于閉包來(lái)說(shuō)搂鲫，在外部函數(shù)被調(diào)用之后，閉包結(jié)構(gòu)依然保存在系統(tǒng)中磺平，閉包中的數(shù)據(jù)依然存在魂仍，從而實(shí)現(xiàn)對(duì)數(shù)據(jù)的持久使用。

閉包的缺點(diǎn)就是常駐內(nèi)存拣挪，會(huì)增大內(nèi)存使用量擦酌，使用不當(dāng)很容易造成內(nèi)存泄露。

vue面試題

一：簡(jiǎn)述vue的理解

Vue是一個(gè)漸進(jìn)式的輕量級(jí)框架菠劝，核心是關(guān)注視圖層赊舶，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的頁(yè)面，將數(shù)據(jù)綁定視圖上赶诊，vue提供數(shù)據(jù)和視圖雙向綁定原理使我們開(kāi)發(fā)頁(yè)面更簡(jiǎn)單笼平，修改數(shù)據(jù)，視圖自動(dòng)更新甫何。?vue是模塊化和組塊化出吹，如果頁(yè)面要更改數(shù)據(jù)之類(lèi)的遇伞，就只在組件來(lái)修改就可以辙喂，vue有幾大特點(diǎn)：（1）?簡(jiǎn)潔 （2） 輕量 （3）快速 （4） 數(shù)據(jù)驅(qū)動(dòng) （5） 模塊化（6） 組件化Vue

通過(guò)添加組件系統(tǒng)、客戶(hù)端路由鸠珠、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架巍耗，可以通過(guò)豐富的指令擴(kuò)展模板，可以通過(guò)各種各樣的插件來(lái)增強(qiáng)功能

過(guò)濾器是針對(duì)一些數(shù)據(jù)?進(jìn)行篩選渐排、過(guò)濾炬太、格式化等相關(guān)的處理，變成我們想要的數(shù)據(jù)驯耻。

過(guò)濾器的本質(zhì)?就是一個(gè)帶有參數(shù)帶有返回值的方法亲族。

Vue組件的過(guò)程：組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率炒考，能夠把頁(yè)面拆分為多個(gè)獨(dú)立的模塊，解決了效率低霎迫，難維護(hù)斋枢，復(fù)用性，等問(wèn)題知给。

Vue是一個(gè)數(shù)據(jù)驅(qū)動(dòng)頁(yè)面的一個(gè)框架瓤帚，基于MVVM模式，M指的是數(shù)據(jù)涩赢，V值得是視圖戈次，VM是視圖模型，將數(shù)據(jù)綁定視圖上（雙向綁定）

Vue.js是一套構(gòu)建用戶(hù)界面的漸進(jìn)式（沒(méi)有強(qiáng)主張筒扒，沒(méi)有多做職責(zé)之外的事怯邪。）框架。

Vue的生命周期

生命周期就是鉤子函數(shù)霎肯，主要是在什么時(shí)候來(lái)調(diào)用這些函數(shù)擎颖，比如是在創(chuàng)建，掛載观游，更新搂捧，銷(xiāo)毀完成之后還是之前，初始化數(shù)據(jù)完成之前還是之后等

???從開(kāi)始創(chuàng)建懂缕、初始化數(shù)據(jù)允跑、編譯模板、掛載Dom→渲染搪柑、更新→渲染聋丝、卸載等一系列過(guò)程，我們稱(chēng)這是?Vue 的生命周期beforeCreate :?數(shù)據(jù)聲明還沒(méi)被調(diào)用時(shí)使用created :?vue渲染完畢后工碾，所有數(shù)據(jù)和方法初始化后調(diào)用mounted : 掛載元素之后

updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理弱睦，在這里寫(xiě)上相應(yīng)函數(shù)beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框nextTick : 更新數(shù)據(jù)后立即操作dom

BeforeMount 掛載開(kāi)始之前被調(diào)用

1.?vue生命周期的作用是什么？答：它的生命周期中有多個(gè)事件鉤子渊额，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯况木。

2.?第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？答：第一次頁(yè)面加載時(shí)會(huì)觸發(fā)?beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

3.vue的優(yōu)點(diǎn)是什么旬迹？

低耦合火惊。視圖（View）可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的"View"上奔垦，當(dāng)View變化的時(shí)候Model可以不變屹耐，當(dāng)Model變化的時(shí)候View也可以不變。

可重用性椿猎。你可以把一些視圖邏輯放在一個(gè)ViewModel里面惶岭，讓很多view重用這段視圖邏輯寿弱。

獨(dú)立開(kāi)發(fā)。開(kāi)發(fā)人員可以專(zhuān)注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)（ViewModel）按灶，設(shè)計(jì)人員可以專(zhuān)注于頁(yè)面設(shè)計(jì)脖捻，使用Expression Blend可以很容易設(shè)計(jì)界面并生成xml代碼。

可測(cè)試兆衅。界面素來(lái)是比較難于測(cè)試的地沮，而現(xiàn)在測(cè)試可以針對(duì)ViewModel來(lái)寫(xiě)。

5.vue組件之間的傳值??

1.父組件給子組件傳值 （props）?

2.子組件給父組件傳值 （emit）

3.兄弟組件間的傳值（on和emit）

6.框架的好處

提高代碼的質(zhì)量羡亩，開(kāi)發(fā)速度

提高代碼的復(fù)用率

降低模塊之間的耦合度（高內(nèi)聚低耦合）

二摩疑。Vue.js開(kāi)發(fā)環(huán)境

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基于node.js,利用淘寶npm鏡像安裝相關(guān)依賴(lài)

?在cmd里直接輸入：npm install -g cnpm --registry=https://registry.npm.taobao.org，回車(chē)畏铆，等待安裝...

3.安裝全局vue-cli腳手架,用于幫助搭建所需的模板框架

在cmd里 1)輸入：cnpm install -g vue-cli雷袋，回車(chē)，等待安裝...

? ? ? ? ? ? 2).輸入：vue辞居，回車(chē)楷怒，若出現(xiàn)vue信息說(shuō)明表示成功

4.創(chuàng)建項(xiàng)目

在cmd里輸入：vue init webpack vue_test(項(xiàng)目文件夾名)，回車(chē)瓦灶，等待一小會(huì)兒

5.安裝依賴(lài)

在cmd里 ?1).輸入：cd vue_test（項(xiàng)目名）鸠删，回車(chē)，進(jìn)入到具體項(xiàng)目文件夾

? ? ? ?2).輸入：cnpm install贼陶，回車(chē)刃泡，等待一小會(huì)兒

回到項(xiàng)目文件夾，會(huì)發(fā)現(xiàn)項(xiàng)目結(jié)構(gòu)里碉怔，多了一個(gè)node_modules文件夾（該文件里的內(nèi)容就是之前安裝的依賴(lài)）

6.測(cè)試環(huán)境是否搭建成功

方法1：在cmd里輸入：cnpm run?dev

方法2：在瀏覽里輸入：localhost:8080(默認(rèn)端口為8080)

三烘贴、vue中常見(jiàn)的指令有哪些?

v-for/v-if/v-else-if/v-else/v-on/v-bind/v-show/v-html/v-model

四、雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的撮胧？好處有哪些

v-model

好處桨踪？

組件是一個(gè)具有特定功能的?可被反復(fù)使用的視圖，

各個(gè)指令實(shí)現(xiàn)數(shù)據(jù)和視圖的綁定芹啥，解耦（降低耦合度的過(guò)程）

組件有什么好處锻离？

封裝好了組件，提高了代碼復(fù)用率

提高了代碼的可讀性

降低了測(cè)試難度

五叁征、Vue實(shí)例中常見(jiàn)的屬性有哪些纳账？

data 存儲(chǔ)數(shù)據(jù)

methods 方法

directives 指令

filters 過(guò)濾器/管道

router 路由

props 接收調(diào)用該組件時(shí)傳來(lái)的數(shù)據(jù)

watch 監(jiān)聽(tīng)雙向數(shù)據(jù)綁定的數(shù)據(jù)的變化

computed 用在邏輯復(fù)雜的地方逛薇，計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的捺疼，提高性能

六、過(guò)濾器

本質(zhì)是一個(gè)帶有參數(shù)?有返回值的方法;支持多重過(guò)濾

{{表達(dá)式?| myFilter(arg1,arg2) | myFilter2}}

七永罚、refs

1啤呼、給子組件要指定一個(gè)屬性?

2卧秘、通過(guò)引用名字mySon怎么得到子組件的實(shí)例？?this.$refs.mySon

1Vue組件化的理解

首先組件的基本構(gòu)成分別是：樣式結(jié)構(gòu)官扣，行為邏輯翅敌，數(shù)據(jù)。web中的組件其實(shí)就是頁(yè)面組成的一部分惕蹄，每個(gè)組件都會(huì)提供一些對(duì)外接口蚯涮，允許使用者設(shè)置和調(diào)整參數(shù)屬性，可以將不同功能的組件結(jié)合在一起卖陵，快速的構(gòu)成一個(gè)符合實(shí)際需求的應(yīng)用遭顶。

2Vue路由的理解

首先Vue的單頁(yè)面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問(wèn)路徑泪蔫，并將路徑和組件映射起來(lái)棒旗。傳統(tǒng)的頁(yè)面應(yīng)用，是通過(guò)超鏈接來(lái)實(shí)現(xiàn)頁(yè)面的切換和跳轉(zhuǎn)撩荣。在Vue-router中是路徑之間的切換铣揉，也就是組件的切換。

3你對(duì)Vue鉤子函數(shù)的理解

vue-router的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航餐曹，讓他完成跳轉(zhuǎn)或取消逛拱。

4如何讓css只在當(dāng)前組件中起作用

在每一個(gè)vue組件中都可以定義各自的css，js台猴，如果希望組件內(nèi)寫(xiě)的css只對(duì)當(dāng)前組件起作用橘券，只需要在style中寫(xiě)入scoped：

5created和mounted區(qū)別

created實(shí)例創(chuàng)建完成之后的鉤子函數(shù)；$el屬性不可見(jiàn)為undefined

mounted將編譯好的HTML掛載到頁(yè)面完成后執(zhí)行的鉤子函數(shù)卿吐，在整個(gè)實(shí)例生命周期中只執(zhí)行一次旁舰；$el已創(chuàng)建，同時(shí)DOM結(jié)構(gòu)已生成

6mounted和created分別什么時(shí)候用

只有ajax數(shù)據(jù)請(qǐng)求放在created里面就可以了嗡官，這樣可以及早發(fā)請(qǐng)求獲取數(shù)據(jù)箭窜；如果有依賴(lài)DOM的情況下，就放到mounted里面

7Vue和angular分別采用什么技術(shù)實(shí)現(xiàn)雙向數(shù)據(jù)綁定衍腥？

AngularJS?采用“臟值檢測(cè)”的方式磺樱，數(shù)據(jù)發(fā)生變更后，對(duì)于所有的數(shù)據(jù)和視圖的綁定關(guān)系進(jìn)行一次檢測(cè)婆咸，識(shí)別是否有數(shù)據(jù)發(fā)生了改變竹捉，有變化進(jìn)行處理，可能進(jìn)一步引發(fā)其他數(shù)據(jù)的改變尚骄，所以這個(gè)過(guò)程可能會(huì)循環(huán)幾次块差，一直到不再有數(shù)據(jù)變化發(fā)生后，將變更的數(shù)據(jù)發(fā)送到視圖，更新頁(yè)面展現(xiàn)憨闰。如果是手動(dòng)對(duì)?ViewModel?的數(shù)據(jù)進(jìn)行變更状蜗，為確保變更同步到視圖，需要手動(dòng)觸發(fā)一次“臟值檢測(cè)”鹉动。

VueJS?則使用?ES5?提供的?Object.defineProperty()?方法轧坎，監(jiān)控對(duì)數(shù)據(jù)的操作，從而可以自動(dòng)觸發(fā)數(shù)據(jù)同步泽示。并且缸血，由于是在不同的數(shù)據(jù)上觸發(fā)同步，可以精確的將變更發(fā)送給綁定的視圖械筛，而不是對(duì)所有的數(shù)據(jù)都執(zhí)行一次檢測(cè)属百。

8v-show和v-if區(qū)別

v-show指令是通過(guò)修改元素的displayCSS屬性讓其顯示或者隱藏

v-if指令是直接銷(xiāo)毀和重建DOM達(dá)到讓元素顯示和隱藏的效果

一般來(lái)說(shuō)，?v-if?有更高的切換開(kāi)銷(xiāo)变姨，而?v-show?有更高的初始渲染開(kāi)銷(xiāo)族扰。因此，如果需要非常頻繁地切換定欧，則使用?v-show?較好渔呵；如果在運(yùn)行時(shí)條件不太可能改變，則使用?v-if?較好

9的作用是什么

?包裹動(dòng)態(tài)組件時(shí)砍鸠，會(huì)緩存不活動(dòng)的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染扩氢。

大白話:?比如有一個(gè)列表和一個(gè)詳情，那么用戶(hù)就會(huì)經(jīng)常執(zhí)行打開(kāi)詳情=>返回列表=>打開(kāi)詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁(yè)面爷辱，那么就可以對(duì)列表組件使用進(jìn)行緩存录豺，這樣用戶(hù)每次返回列表的時(shí)候，都能從緩存中快速渲染饭弓，而不是重新渲染

10Vue中引入組件的步驟

1.采用ES6的import ... from ...語(yǔ)法或CommonJS的require()方法引入組件

2.對(duì)組件進(jìn)行注冊(cè),代碼如下

//?注冊(cè)Vue.component('my-component', { ?template:?'

3.使用組件

11請(qǐng)列舉出3個(gè)Vue中常用的生命周期鉤子函數(shù)

created:?實(shí)例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實(shí)例已經(jīng)完成數(shù)據(jù)觀測(cè),?屬性和方法的運(yùn)算, watch/event事件回調(diào).?然而,?掛載階段還沒(méi)有開(kāi)始, $el屬性目前還不可見(jiàn)

mounted: el被新創(chuàng)建的?vm.$el?替換双饥，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果?root?實(shí)例掛載了一個(gè)文檔內(nèi)元素弟断，當(dāng)?mounted?被調(diào)用時(shí)?vm.$el?也在文檔內(nèi)咏花。

activated::keep-alive組件激活時(shí)調(diào)用

12請(qǐng)簡(jiǎn)述下Vuex的原理和使用方法

一個(gè)應(yīng)用可以看作是由上面三部分組成: View, Actions,State,數(shù)據(jù)的流動(dòng)也是從View => Actions => State =>View?以此達(dá)到數(shù)據(jù)的單向流動(dòng).但是項(xiàng)目較大的,?組件嵌套過(guò)多的時(shí)候,?多組件共享同一個(gè)State會(huì)在數(shù)據(jù)傳遞時(shí)出現(xiàn)很多問(wèn)題.Vuex就是為了解決這些問(wèn)題而產(chǎn)生的.

Vuex可以被看作項(xiàng)目中所有組件的數(shù)據(jù)中心,我們將所有組件中共享的State抽離出來(lái),任何組件都可以訪問(wèn)和操作我們的數(shù)據(jù)中心.

上圖可以很好的說(shuō)明Vuex的組成,一個(gè)實(shí)例化的Vuex.Store由state, mutations和actions三個(gè)屬性組成:

state中保存著共有數(shù)據(jù)

改變state中的數(shù)據(jù)有且只有通過(guò)mutations中的方法,且mutations中的方法必須是同步的

如果要寫(xiě)異步的方法,需要些在actions中,?并通過(guò)commit到mutations中進(jìn)行state中數(shù)據(jù)的更改.

13vue與angular的區(qū)別

vue的雙向邦定是基于ES5?中的?3.getter/setter來(lái)實(shí)現(xiàn)的，而angular而是由自己實(shí)現(xiàn)一套模版編譯規(guī)則阀趴，需要進(jìn)行所謂的“臟”檢查昏翰，vue則不需要。因此刘急，vue在性能上更高效棚菊，但是代價(jià)是對(duì)于ie9以下的瀏覽器無(wú)法支持。

14active-class是哪個(gè)組件的屬性叔汁？

vue-router模塊的router-link組件

15怎么定義vue-router的動(dòng)態(tài)路由统求？怎么獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)

1检碗、路由配置文件找到對(duì)應(yīng)的路由，在path屬性上添加/:id

2球订、在需要出發(fā)跳轉(zhuǎn)的頁(yè)面router-link配置實(shí)際要傳遞的參數(shù)數(shù)據(jù)

3、在目標(biāo)組件通過(guò)路由對(duì)象下的$route.params進(jìn)行接收

16vue-router有哪幾種導(dǎo)航鉤子

鉤子函數(shù)種類(lèi)：

router全局：beforeEach瑰钮、afterEach

單個(gè)路由：beforeEnter

組件內(nèi)的鉤子：beforeRouteEnter冒滩、beforeRouteUpdate、beforeRouteLeave

鉤子函數(shù)接收的參數(shù)：

to：要進(jìn)入的目標(biāo)浪谴，路有對(duì)象 到哪里去

from：正要離開(kāi)導(dǎo)航的路由對(duì)象 從哪里來(lái)

next：用來(lái)決定跳轉(zhuǎn)或取消導(dǎo)航

17在vue.cli中的安裝使用步驟是开睡？有哪幾大特性？

第一步：用npm?下三個(gè)loader（sass-loader苟耻、css-loader、node-sass）

第二步：然后在組件的style標(biāo)簽加上lang屬性 ，例如：lang=”scss”

18vue-router是什么粹排？它有哪些組件

vue的路由插件底洗。router-link、router-view

19請(qǐng)說(shuō)出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法

assets文件夾是放靜態(tài)資源智蝠；components是放組件腾么；router是定義路由相關(guān)的配置;view視圖；app.vue是一個(gè)應(yīng)用主組件杈湾；main.js是入口文件

20什么是vue生命周期

Vue?實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程解虱，就是生命周期。也就是從開(kāi)始創(chuàng)建漆撞、初始化數(shù)據(jù)殴泰、編譯模板、掛載Dom→渲染浮驳、更新→渲染悍汛、卸載等一系列過(guò)程，我們稱(chēng)這是?Vue?的生命周期至会。

vue生命周期的作用是什么员凝？它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯奋献。

21vue生命周期總共有幾個(gè)階段

它可以總共分為8個(gè)階段：創(chuàng)建前/后,?載入前/后,更新前/后,銷(xiāo)毀前/銷(xiāo)毀后

22第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子

第一次頁(yè)面加載時(shí)會(huì)觸發(fā)?beforeCreate, created, beforeMount, mounted?這幾個(gè)鉤子

23DOM?渲染在 哪個(gè)周期中就已經(jīng)完成

DOM?渲染在?mounted?中就已經(jīng)完成了

24簡(jiǎn)單描述每個(gè)周期具體適合哪些場(chǎng)景

生命周期鉤子的一些使用方法：?beforecreate :?可以在這加個(gè)loading事件健霹，在加載實(shí)例時(shí)觸發(fā)?created :?初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件瓶蚂，異步請(qǐng)求也適宜在這里調(diào)用?mounted :?掛載元素糖埋，獲取到DOM節(jié)點(diǎn)?updated :?如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)?beforeDestroy :?可以做一個(gè)確認(rèn)停止事件的確認(rèn)框?nextTick :?更新數(shù)據(jù)后立即操作dom

arguments是一個(gè)偽數(shù)組窃这，沒(méi)有遍歷接口瞳别，不能遍歷

25computed VS methods

你可能已經(jīng)注意到我們可以通過(guò)在表達(dá)式中調(diào)用方法來(lái)達(dá)到同樣的效果：

Reversed message: "{{ reversedMessage() }}"

//?在組件中

methods: {

?reversedMessage: function () {

? ?return this.message.split('').reverse().join('')

?}

}

我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而祟敛，不同的是計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的疤坝。計(jì)算屬性只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要message還沒(méi)有發(fā)生改變馆铁，多次訪問(wèn)?reversedMessage計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果跑揉，而不必再次執(zhí)行函數(shù)。

這也同樣意味著下面的計(jì)算屬性將不再更新埠巨，因?yàn)镈ate.now()不是響應(yīng)式依賴(lài)：

computed: {

?now: function () {

? ?return Date.now()

?}

}

相比之下历谍，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)辣垒。

我們?yōu)槭裁葱枰彺嫱蓿考僭O(shè)我們有一個(gè)性能開(kāi)銷(xiāo)比較大的的計(jì)算屬性A，它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算勋桶。然后我們可能有其他的計(jì)算屬性依賴(lài)于A脱衙。如果沒(méi)有緩存，我們將不可避免的多次執(zhí)行?A的?getter例驹！如果你不希望有緩存岂丘，請(qǐng)用方法來(lái)替代。

26computed VS watch

Vue?提供了一種更通用的方式來(lái)觀察和響應(yīng)?Vue?實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽(tīng)屬性眠饮。當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)奥帘，你很容易濫用watch——特別是如果你之前使用過(guò)?AngularJS。然而仪召，通常更好的做法是使用計(jì)算屬性而不是命令式的?watch回調(diào)寨蹋。細(xì)想一下這個(gè)例子：

var vm = new Vue({

?el: '#demo',

?data: {

? ?firstName: 'Foo',

? ?lastName: 'Bar',

? ?fullName: 'Foo Bar'

?},

?watch: {

? ?firstName: function (val) {

? ? ?this.fullName = val + ' ' + this.lastName

? ?},

? ?lastName: function (val) {

? ? ?this.fullName = this.firstName + ' ' + val

? ?}

?}

})

jquery總結(jié)

一.對(duì)jquery的了解

jQuery是一個(gè)輕量級(jí)的javascript框架，極大的簡(jiǎn)化了js的編程扔茅。

1.首先jQuery提供了強(qiáng)大的元素選擇器已旧。用于獲取html頁(yè)面中封裝了html元素的jQuery對(duì)象。像常見(jiàn)的選擇器有:基本選擇器召娜，層次選擇器运褪，過(guò)濾選擇器，表單選擇器玖瘸。

2.第二點(diǎn)就是jQuery提供了對(duì)css樣式操作的支持秸讹，像對(duì)class屬性的增加刪除切換操作。還有對(duì)單個(gè)樣式操作的支持的css方法雅倒，提供了一種簡(jiǎn)潔統(tǒng)一的操作樣式的方法璃诀。

3.第三點(diǎn)就是jQuery出色的DOM操作的封裝，極大的簡(jiǎn)化了javascript的對(duì)dom節(jié)點(diǎn)的增刪改查操作蔑匣，讓我們可以使用一種更加簡(jiǎn)潔的方法來(lái)操作節(jié)點(diǎn)劣欢。

4.第四點(diǎn)就是jQuery還是一個(gè)為事件處理特點(diǎn)設(shè)計(jì)的框架棕诵，提供了靜態(tài)綁定事件和動(dòng)態(tài)綁定事件，完善了事件的處理機(jī)制凿将。

5.jQuery解決了大量瀏覽器之間的兼容性的問(wèn)題校套。

6.jQuery極大的簡(jiǎn)化ajax編程，提供了一種更加簡(jiǎn)潔牧抵，統(tǒng)一的編程方式笛匙。

7.jQuery內(nèi)置了一些簡(jiǎn)單有用的內(nèi)置動(dòng)畫(huà)，像常見(jiàn)的slideDown/slideUp,hide/show,fadeIn/fadeOut等灭忠，還支持基于定位機(jī)制使用animate來(lái)自定義動(dòng)畫(huà)效果膳算。

二.jQuery和Zepto的區(qū)別和用途

jQuery主要用于pc端座硕，Zepto主要用于移動(dòng)端弛作，Zepto更加小巧

三.jquery里的ready與window.onload的區(qū)別的區(qū)別？

??ready：

1.具有簡(jiǎn)寫(xiě)寫(xiě)法

2.一個(gè)HTML頁(yè)面中允許編寫(xiě)多個(gè)

? 3.(效率高)需要在DOM加載后就可以執(zhí)行

? window.onload

1.沒(méi)有任何簡(jiǎn)寫(xiě)

2.一個(gè)HTML頁(yè)面中只能編寫(xiě)一個(gè)

? 3.(效率低)必須在頁(yè)面中所有內(nèi)容都加載完畢后,才能執(zhí)行

四．請(qǐng)簡(jiǎn)要說(shuō)明jQuery框架的顯著特點(diǎn)华匾。

答：jQuery強(qiáng)調(diào)的理念是寫(xiě)的少映琳，做的多。其主要特點(diǎn)有：輕量級(jí)蜘拉、強(qiáng)大的選擇器萨西、漂亮的DOM操作封裝、可靠的事件處理機(jī)制旭旭、完善的Ajax處理谎脯、出色的瀏覽器兼容性、鏈?zhǔn)讲僮鞣绞匠旨摹⒇S富的插件支持源梭、開(kāi)源產(chǎn)品。

五．jQuery如何解決跨域問(wèn)題稍味？

答：借助JSONP這個(gè)非官方的協(xié)議废麻，其允許在服務(wù)器端集成script tags返回至客戶(hù)端，通過(guò)callback的形式實(shí)現(xiàn)跨域訪問(wèn)JSONP即JSON with Padding模庐。如果要進(jìn)行跨域請(qǐng)求烛愧，我們可以通過(guò)使用html的script標(biāo)記來(lái)進(jìn)行跨域請(qǐng)求，并在響應(yīng)中返回要執(zhí)行的script代碼掂碱，其中可以直接使用JSON傳遞javascript對(duì)象怜姿。

六．如何編寫(xiě)高性能的jQuery代碼？

答：定義jQuery變量的時(shí)候添加var關(guān)鍵字疼燥；DOM操作請(qǐng)務(wù)必記住緩存（cache）社牲；盡量使用鏈?zhǔn)讲僮鳎槐M量把一些代碼都整合到一起悴了；避免使用全局類(lèi)型的選擇器搏恤；盡量使用.on方法违寿，因?yàn)槠渌魏畏椒ǘ际亲罱K使用.on方法來(lái)實(shí)現(xiàn)的；盡量使用最新版本的jQuery框架類(lèi)庫(kù)熟空。?

七．jQuery與jQuery UI有啥區(qū)別藤巢？

答：

（1）jQuery是一個(gè)js庫(kù)，主要提供的功能是選擇器息罗，屬性修改和事件綁定等等掂咒。

（2）jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性迈喉，設(shè)計(jì)的插件绍刮。提供了一些常用的界面元素，諸如對(duì)話框挨摸、拖動(dòng)行為孩革、改變大小行為等等。

八．jQuery鏈?zhǔn)秸{(diào)用的最大優(yōu)點(diǎn)是什么得运？

答：避免頻繁操作的DOM膝蜈，鏈?zhǔn)秸{(diào)用可以實(shí)現(xiàn)先緩存再操作。

九．jQuery框架的源碼看過(guò)嗎熔掺？能不能簡(jiǎn)單說(shuō)一下它的實(shí)現(xiàn)原理饱搏？

首先是采用閉包技術(shù)，然后用window作為形參傳入

答：jQuery框架通過(guò)改變javascript編碼方式來(lái)創(chuàng)建了全新的編程理念置逻。譬如關(guān)于jQuery聲明的流程：先查找（創(chuàng)建）jQuery對(duì)象推沸，然后調(diào)用jQuery對(duì)象的方法完成我們需要完成的工作。jQuery就是以這種可以說(shuō)是最簡(jiǎn)單的編碼邏輯來(lái)改變javascript編碼方式的券坞，這個(gè)流程就是jQuery的編碼邏輯核心鬓催。?

十．jQuery中如何將對(duì)象轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來(lái)报慕？

答：可以通過(guò)JSON.stringify方法把一個(gè)對(duì)象轉(zhuǎn)換成json字符串深浮，再通過(guò)JSON.parse方法把一個(gè)json字符串解析成對(duì)象。?

十一．jQuery中的load方法一般怎么用的眠冈？

答：load方法一般在載入遠(yuǎn)程HTML代碼并插入到DOM中的時(shí)候用飞苇，通常用來(lái)從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件。如果要傳遞參數(shù)的話蜗顽，可以使用$.get()或$.post()方法布卡。

十二．描述一下.get()、[]和.eq()方法的區(qū)別雇盖。

答：eq返回原生jQuery對(duì)象忿等，截取某些el元素生成jQuery新對(duì)象；get和[]返回的都是原生的DOM對(duì)象崔挖，原理一致贸街；get和[]區(qū)別是get是通過(guò)jQuery對(duì)象的方法獲取庵寞，[]是根據(jù)jQuery是一個(gè)數(shù)組對(duì)象獲取。

十三薛匪。jQuery的理解：

jQuery是一個(gè)輕量級(jí)的javascript框架捐川，極大的簡(jiǎn)化了js的編程。

1.首先jQuery提供了強(qiáng)大的元素選擇器逸尖。用于獲取html頁(yè)面中封裝了html元素的jQuery對(duì)象古沥。像常見(jiàn)的選擇器有:基本選擇器，層次選擇器娇跟，過(guò)濾選擇器岩齿，表單選擇器。

2.第二點(diǎn)就是jQuery提供了對(duì)css樣式操作的支持苞俘，像對(duì)class屬性的增加刪除切換操作盹沈。還有對(duì)單個(gè)樣式操作的支持的css方法，提供了一種簡(jiǎn)潔統(tǒng)一的操作樣式的方法苗胀。

3.第三點(diǎn)就是jQuery出色的DOM操作的封裝襟诸，極大的簡(jiǎn)化了javascript的對(duì)dom節(jié)點(diǎn)的增刪改查操作瓦堵，讓我們可以使用一種更加簡(jiǎn)潔的方法來(lái)操作節(jié)點(diǎn)基协。

?4.第四點(diǎn)就是jQuery還是一個(gè)為事件處理特點(diǎn)設(shè)計(jì)的框架，提供了靜態(tài)綁定事件和動(dòng)態(tài)綁定事件菇用，完善了事件的處理機(jī)制澜驮。

5.jQuery解決了大量瀏覽器之間的兼容性的問(wèn)題。

6.jQuery極大的簡(jiǎn)化ajax編程惋鸥，提供了一種更加簡(jiǎn)潔杂穷，統(tǒng)一的編程方式。

7.jQuery內(nèi)置了一些簡(jiǎn)單有用的內(nèi)置動(dòng)畫(huà)卦绣，像常見(jiàn)的slideDown/slideUp,hide/show,fadeIn/fadeOut等耐量，還支持基于定位機(jī)制使用animate來(lái)自定義動(dòng)畫(huà)效果。

十四滤港、 bind()廊蜒、live()、one()和on()的區(qū)別?

??????* bind() - 綁定事件

???????* live() - 老版本具有,新版本移除

???????* one() - 只綁定一次事件

???????* on() - 是jQuery底層提供的機(jī)制

十五：jquery里的ready與window.onload的區(qū)別的區(qū)別溅漾？

??ready

具有簡(jiǎn)寫(xiě)寫(xiě)法

一個(gè)HTML頁(yè)面中允許編寫(xiě)多個(gè)

??(效率高)需要在DOM加載后就可以執(zhí)行

??????window.onload

沒(méi)有任何簡(jiǎn)寫(xiě)

一個(gè)HTML頁(yè)面中只能編寫(xiě)一個(gè)

??(效率低)必須在頁(yè)面中所有內(nèi)容都加載完畢后,才能執(zhí)行

十六：jQuery中如何將對(duì)象轉(zhuǎn)化為json字符串山叮，然后再轉(zhuǎn)化回來(lái)？

答：可以通過(guò)JSON.stringify方法把一個(gè)對(duì)象轉(zhuǎn)換成json字符串添履，再通過(guò)JSON.parse方法把一個(gè)json字符串解析成對(duì)象屁倔。

ajax方面

一．Ajax是什么？

答：是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)暮胧。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換锐借，AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新问麸。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新钞翔。

什么是ajax口叙，為什么要使用Ajax（請(qǐng)談一下你對(duì)Ajax的認(rèn)識(shí)）?

答案：Ajax是客戶(hù)端請(qǐng)求服務(wù)器數(shù)據(jù)的一種技術(shù)。是一種向服務(wù)器發(fā)送異步請(qǐng)求的一種技術(shù)嗅战，從服務(wù)器獲得數(shù)據(jù)妄田，Ajax技術(shù)不必刷新整個(gè)頁(yè)面，只需對(duì)頁(yè)面的局部進(jìn)行更新驮捍，可以節(jié)省網(wǎng)絡(luò)帶寬疟呐，提高頁(yè)面的加載速度，從而縮短用戶(hù)等待時(shí)間东且，改善用戶(hù)體驗(yàn)启具。

為什么要用ajax：Ajax應(yīng)用程序的優(yōu)勢(shì)在于：

??通過(guò)異步模式，提升了用戶(hù)體驗(yàn)

??優(yōu)化了瀏覽器和服務(wù)器之間的傳輸珊泳，減少不必要的數(shù)據(jù)往返鲁冯，減少了帶寬占用

ajax引擎在客戶(hù)端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作色查，從而減少了大用戶(hù)量下的服務(wù)器負(fù)載薯演。

二．同步請(qǐng)求和異步請(qǐng)求的區(qū)別？

答：

??同步：提交請(qǐng)求→等待服務(wù)器處理→處理完畢返回秧了，這個(gè)期間客戶(hù)端瀏覽器不能干任何事跨扮。

??異步：請(qǐng)求通過(guò)事件觸發(fā)→服務(wù)器處理（這是瀏覽器仍然可以作其他事情）→處理完畢。

三．異步加載的方式有哪些验毡？

答：

（1）defer衡创，只支持IE；

（2）async晶通；

（3）創(chuàng)建script璃氢，插入到DOM；

四狮辽、?JSON 的了解

輕量級(jí)數(shù)據(jù)交互格式一也，可以形成復(fù)雜的嵌套格式，解析非常方便

五隘竭、請(qǐng)解釋?ajax?的工作原理

Ajax?的工作原理相當(dāng)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層塘秦，使用戶(hù)操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶(hù)端动看，利于客戶(hù)端閑置的處理能力來(lái)處理尊剔，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約?ISP?的空間及帶寬租用成本的目的菱皆。簡(jiǎn)單來(lái)說(shuō)通過(guò)?XmlHttpRequest?對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求须误，從服務(wù)器獲得數(shù)據(jù)挨稿，然后用javascript?來(lái)操作?DOM而更新頁(yè)面。

六京痢、ajax優(yōu)點(diǎn)：

1.無(wú)刷新更新數(shù)據(jù)奶甘，減少用戶(hù)等到時(shí)間，更好的用戶(hù)體驗(yàn)

2.異步與服務(wù)器通信祭椰，無(wú)需打斷用戶(hù)臭家，響應(yīng)更加迅速

3.可以把服務(wù)器的一些負(fù)擔(dān)轉(zhuǎn)到客戶(hù)端，利用客戶(hù)端閑置的能力來(lái)處理方淤，減輕服務(wù)器和帶寬的負(fù)擔(dān)钉赁，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)携茂，AJAX的原則是“按需取數(shù)據(jù)”你踩，可以最大程度的減少冗余請(qǐng)求和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能讳苦。

4.基于標(biāo)準(zhǔn)化带膜，廣泛被支持

二：AJAX最大的特點(diǎn)是什么。Ajax可以實(shí)現(xiàn)動(dòng)態(tài)刷新（局部刷新）頁(yè)面鸳谜。就是能在不更新整個(gè)頁(yè)面的前提下維護(hù)數(shù)據(jù)膝藕。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶(hù)動(dòng)作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒(méi)有改變過(guò)的信息卿堂。

七束莫、ajax缺點(diǎn)

1.破壞了前進(jìn)后退功能懒棉，用戶(hù)往往通過(guò)后退按鈕來(lái)取消上一步操作草描，但是使用ajax無(wú)法實(shí)現(xiàn)〔哐希可以使用Gmail來(lái)解決這個(gè)問(wèn)題穗慕，它只是采用的一個(gè)比較笨但是有效的辦法，即用戶(hù)單擊后退按鈕訪問(wèn)歷史記錄時(shí)妻导，通過(guò)創(chuàng)建或使用一個(gè)隱藏的IFRAME來(lái)重現(xiàn)頁(yè)面上的變更逛绵。

2.安全問(wèn)題。ajax技術(shù)就如同對(duì)企業(yè)數(shù)據(jù)建立了一個(gè)直接通道倔韭。這使得開(kāi)發(fā)者在不經(jīng)意間會(huì)暴露比以前更多的數(shù)據(jù)和服務(wù)器邏輯术浪。ajax的邏輯可以對(duì)客戶(hù)端的安全掃描技術(shù)隱藏起來(lái)，允許黑客從遠(yuǎn)端服務(wù)器上建立新的攻擊寿酌。還有自身受到如跨站腳本攻擊胰苏，SQL注入等攻擊。

3.對(duì)搜索引擎支持較弱

4.一些手持設(shè)備不能很好的支持等

八醇疼、json與jsonp的區(qū)別硕并？

? Json:是一種輕量級(jí)的數(shù)據(jù)交換格式法焰。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小

Jsonp實(shí)現(xiàn)數(shù)據(jù)跨域傳輸?shù)囊环N手段

九倔毙、解釋jsonp的原理埃仪，以及為什么不是ajax

動(dòng)態(tài)創(chuàng)建一個(gè)script標(biāo)簽，利用script標(biāo)簽src屬性訪問(wèn)沒(méi)有限制陕赃，實(shí)現(xiàn)跨域卵蛉。

九、實(shí)現(xiàn)原生ajax的四個(gè)步驟么库？

??(1)創(chuàng)建XHR對(duì)象

? ?var xhr = new XMLHttpRequest();

??(2)監(jiān)聽(tīng)XHR的狀態(tài)改變

? ?xhr.onreadystatechange = function(){}

??(3)連接到Web服務(wù)器

? ?xhr.open(請(qǐng)求方法, URL, 是否為異步請(qǐng)求);

??(4)發(fā)送請(qǐng)求消息

?xhr.send( 請(qǐng)求主體 );

十毙玻、GET和POST的區(qū)別，何時(shí)使用POST廊散？

GET：一般用于信息獲取

?POST：一般用于修改服務(wù)器上的資源

?(1) 傳遞給服務(wù)器端的參數(shù)的處理不同

????GET請(qǐng)求,參數(shù)跟在URL后面

????POST請(qǐng)求,參數(shù)放在請(qǐng)求體中提交

?(2) 參數(shù)的限制

????GET請(qǐng)求,對(duì)參數(shù)的大小和長(zhǎng)度有限制

????POST請(qǐng)求,沒(méi)有限制

?(3) 安全性

????GET請(qǐng)求:安全性很差

????POST請(qǐng)求:相對(duì)安全

使用?POST 請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）

向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）

發(fā)送包含未知字符的用戶(hù)輸入時(shí)桑滩，POST 比 GET 更穩(wěn)定也更可靠

十一、http請(qǐng)求由三部分組成允睹，分別是：請(qǐng)求行运准、消息報(bào)頭、請(qǐng)求正文

HTTP（超文本傳輸協(xié)議）是一個(gè)基于請(qǐng)求與響應(yīng)模式的缭受、無(wú)狀態(tài)的胁澳、應(yīng)用層的協(xié)議，趁渍撸基于TCP的連接方式韭畸，HTTP1.1版本中給出一種持續(xù)連接的機(jī)制，絕大多數(shù)的Web開(kāi)發(fā)蔓搞，都是構(gòu)建在HTTP協(xié)議之上的Web應(yīng)用胰丁。

簡(jiǎn)歷面試題：

一．HTML5和CSS3新特性：

CSS3新特性：圓角border-radius，陰影 box-shadow喂分，旋轉(zhuǎn)transform锦庸，動(dòng)畫(huà)animation，過(guò)渡模塊transition蒲祈，

HTML5新特性：視頻video 甘萧，音頻audio，畫(huà)布canvas梆掸，表單控件屬性data扬卷，url，email酸钦、file怪得、time。新標(biāo)簽footer，nav汇恤，header庞钢，section

二．對(duì)W3C的理解

1.?對(duì)于結(jié)構(gòu)要求：標(biāo)簽閉合，標(biāo)簽字母要小寫(xiě)因谎，標(biāo)簽不要亂嵌套

2.對(duì)于css和js來(lái)說(shuō)：使用外鏈css和js基括，結(jié)構(gòu)，表現(xiàn)财岔，行為分離三塊风皿，結(jié)構(gòu)清晰，提高頁(yè)面加載速度匠璧，用戶(hù)體驗(yàn)提高

三．對(duì)Less理解

?Less語(yǔ)言是css的預(yù)處理器桐款，動(dòng)態(tài)性語(yǔ)言，可以聲明變量夷恍，存儲(chǔ)的值可以隨時(shí)調(diào)用魔眨，還可以值運(yùn)算，函數(shù)等方式酿雪。

四．WebStorage和cookie的區(qū)別

?webStorage是html5的屬性遏暴，分別是sessionStorage和localStorage

相同點(diǎn)：都是保存在服務(wù)器端

1.存儲(chǔ)的大小不一樣，cookie存儲(chǔ)小指黎，數(shù)量限制在20個(gè)朋凉，數(shù)據(jù)最多不能超過(guò)4k，webStorage存儲(chǔ)比較大醋安，能達(dá)到5M或者更大杂彭。

2.共享方式，cookie在同源下只要沒(méi)過(guò)期就會(huì)一直共享吓揪，localStorage在同源中沒(méi)被刪除也會(huì)共享亲怠，sessionStorage在窗口關(guān)閉之前在同一個(gè)窗口同源下才會(huì)共享

3.cookie始終在同源的http請(qǐng)求中攜帶，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器磺芭，僅在本地保存

4.數(shù)據(jù)的有效期不一樣赁炎，?sessionStorage：僅在當(dāng)前的瀏覽器窗口關(guān)閉有效

localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存钾腺，因此用作持久數(shù)據(jù)

?Cookie：只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即時(shí)窗口和瀏覽器關(guān)閉

五．你對(duì)ajax的理解

?Ajax是客戶(hù)端向服務(wù)器發(fā)送異步請(qǐng)求數(shù)據(jù)的一種技術(shù)讥裤，從服務(wù)器獲取數(shù)據(jù)放棒，ajax不必刷新整個(gè)頁(yè)面，只需對(duì)局部頁(yè)面進(jìn)行更新己英，提高頁(yè)面的加載速度间螟，從而縮短用戶(hù)等待時(shí)間，改善用戶(hù)體驗(yàn)。

Ajax優(yōu)點(diǎn)：

1.?無(wú)需刷新就可以更新數(shù)據(jù)厢破，減少用戶(hù)等待時(shí)間荣瑟，更好的用戶(hù)體驗(yàn)

2.?異步與服務(wù)器通信，無(wú)需打斷用戶(hù)摩泪，響應(yīng)更加迅速

3.?可以把服務(wù)器端的一些負(fù)擔(dān)轉(zhuǎn)到客戶(hù)端笆焰，利用客戶(hù)端閑置的時(shí)間來(lái)處理。減去服務(wù)器的壓力

六．講一下MVVM和MVC模式

MVVM模式：

Model（數(shù)據(jù)模型）負(fù)責(zé)對(duì)數(shù)據(jù)的存和取见坑，View（視圖負(fù)責(zé)頁(yè)面展示）嚷掠，ViewModel（視圖數(shù)據(jù)模型，負(fù)責(zé)業(yè)務(wù)邏輯處理）荞驴，MVVM模式是通過(guò)視圖模型viewModel來(lái)實(shí)現(xiàn)連接不皆，view和Model是通過(guò)viewModel實(shí)現(xiàn)數(shù)據(jù)雙向綁定，分離視圖和數(shù)據(jù)模型

優(yōu)點(diǎn)：1主要目的是分離視圖和模型

??????2降低代碼耦合度熊楼，提高視圖或者邏輯的復(fù)用性

??????3提高了模塊的可測(cè)試性

MVC模式：Model（模型）處理數(shù)據(jù)霹娄，view（視圖）展示數(shù)據(jù)的界面，controller（控制器）鏈接模型和視圖的橋梁

MVC是一種業(yè)務(wù)邏輯鲫骗，數(shù)據(jù)项棠，界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面挎峦，在改進(jìn)界面及用戶(hù)交互的同時(shí)不需要重新編寫(xiě)業(yè)務(wù)邏輯香追。實(shí)現(xiàn)分離數(shù)據(jù)模型和視圖的代碼。

優(yōu)點(diǎn)：低耦合坦胶，復(fù)用性高透典，可維護(hù)性高，分離視圖和模型

MVC和MVVM的區(qū)別：

?MVC的控制器變成MVVM的視圖模型顿苇，MVVM解決了MVC大量的DOM操作使頁(yè)面渲染性能降低峭咒，加載速度變慢，影響用戶(hù)體驗(yàn)纪岁，當(dāng)模型Model頻繁發(fā)生變化凑队，開(kāi)發(fā)者需要主動(dòng)更新視圖，MVC的控制器不能直接改變視圖幔翰，視圖還要依賴(lài)于模型漩氨，所有MVVM解決了這些問(wèn)題

七．SQL的理解

?SQL是結(jié)構(gòu)化查詢(xún)語(yǔ)言，是一種數(shù)據(jù)庫(kù)查詢(xún)語(yǔ)言遗增，和數(shù)據(jù)庫(kù)通信的語(yǔ)言

八．MySQL的理解

?MySQL是關(guān)系型數(shù)據(jù)庫(kù)叫惊，特點(diǎn)：開(kāi)源，免費(fèi)做修，輕量霍狰，跨平臺(tái)

優(yōu)點(diǎn)：1.免費(fèi)開(kāi)源藐吮，節(jié)約成本

???????2.性能優(yōu)越滋早，執(zhí)行速度非常快

???????3.操作簡(jiǎn)單，學(xué)習(xí)成本低

???????4.應(yīng)用廣泛

九．git的理解

?Git是構(gòu)建代碼管理工具纱烘，

優(yōu)點(diǎn)：1.適合分布式開(kāi)發(fā)尼夺，強(qiáng)調(diào)個(gè)體

??????2.公共服務(wù)器壓力和數(shù)據(jù)量都不會(huì)太大

??????3.速度快帕翻，靈活

??????4.任意兩個(gè)開(kāi)發(fā)者之間可以很容易的解決沖突

??????5.離線工作

十．Git和svn的區(qū)別

?1.git是分布式的常空，svn不是

?2.git和svn的分支不同

?3.git的內(nèi)容完整性要高于svn

git和svn的區(qū)別是什么？

http://blog.csdn.net/saint1126/article/details/5953339

1.GIT是分布式的鼎兽，SVN不是：

2.GIT把內(nèi)容按元數(shù)據(jù)方式存儲(chǔ)答姥，而SVN是按文件：

3.GIT分支和SVN的分支不同：

4.GIT沒(méi)有一個(gè)全局的版本號(hào)，而SVN有：

5.GIT的內(nèi)容完整性要優(yōu)于SVN：

1.SVN優(yōu)缺點(diǎn)優(yōu)點(diǎn)：?1谚咬、管理方便鹦付，邏輯明確，符合一般人思維習(xí)慣择卦。??2敲长、易于管理，集中式服務(wù)器更能保證安全性秉继。??3祈噪、代碼一致性非常高。??4尚辑、適合開(kāi)發(fā)人數(shù)不多的項(xiàng)目開(kāi)發(fā)辑鲤。?缺點(diǎn)：?1、服務(wù)器壓力太大杠茬，數(shù)據(jù)庫(kù)容量暴增月褥。??2、如果不能連接到服務(wù)器上瓢喉，基本上不可以工作宁赤，看上面第二步，如果服務(wù)器不能連接 ??上栓票，就不能提交决左，還原，對(duì)比等等走贪。?3佛猛、不適合開(kāi)源開(kāi)發(fā)但 是一般集中式管理的有非常明確的權(quán)限管理機(jī)制（例如分支訪問(wèn)限制），可以實(shí)現(xiàn)分層管理厉斟，從而很好的解決開(kāi)發(fā)人數(shù)眾多的問(wèn)題挚躯。

2.Git優(yōu)缺點(diǎn)優(yōu)點(diǎn)：1、適合分布式開(kāi)發(fā)擦秽，強(qiáng)調(diào)個(gè)體。?2、公共服務(wù)器壓力和數(shù)據(jù)量都不會(huì)太大感挥。?3缩搅、速度快、靈活触幼。?4硼瓣、任意兩個(gè)開(kāi)發(fā)者之間可以很容易的解決沖突。?5置谦、離線工作堂鲤。?缺點(diǎn)：1、學(xué)習(xí)周期相對(duì)而言比較長(zhǎng)媒峡。?2瘟栖、不符合常規(guī)思維。?3谅阿、代碼保密性差半哟，一旦開(kāi)發(fā)者把整個(gè)庫(kù)克隆下來(lái)就可以完全公開(kāi)所有代碼和版本信息。

十一．Vue的理解

??Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架签餐，可以為復(fù)雜的單頁(yè)面應(yīng)用提供驅(qū)動(dòng)寓涨，支持組件化，可以將頁(yè)面封裝成很多個(gè)組件氯檐，數(shù)據(jù)驅(qū)動(dòng)加組件化的前端開(kāi)發(fā)戒良，通過(guò)簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定和組合的視圖組件，核心是關(guān)注視圖層冠摄，是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)頁(yè)面的一個(gè)框架糯崎，將數(shù)據(jù)綁定視圖上，vue提供數(shù)據(jù)和視圖雙向綁定原理使我們開(kāi)發(fā)頁(yè)面更簡(jiǎn)單耗拓，修改了數(shù)據(jù)拇颅，視圖會(huì)自動(dòng)更新。Vue是模塊化和組件化乔询，如果頁(yè)面要更新數(shù)據(jù)樟插，在組件來(lái)修改就可以。

Vue有幾個(gè)特點(diǎn)：1簡(jiǎn)潔2輕量3快速4模塊化5組件化6數(shù)據(jù)驅(qū)動(dòng)

Vue組件的過(guò)程：組件可以提升整個(gè)項(xiàng)目的開(kāi)發(fā)效率竿刁，能夠把頁(yè)面拆分為多個(gè)獨(dú)立的模塊黄锤，解決了效率低，難維護(hù)食拜，復(fù)用性鸵熟，等問(wèn)題。

Vue的生命周期

生命周期就是鉤子函數(shù)负甸，主要是在什么時(shí)候來(lái)調(diào)用這些函數(shù)流强，比如是在創(chuàng)建痹届，掛載，更新打月，銷(xiāo)毀完成之后還是之前队腐，初始化數(shù)據(jù)完成之前還是之后等

從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)奏篙、編譯模板柴淘、掛載Dom→渲染、更新→渲染秘通、卸載等一系列

過(guò)程为严，我們稱(chēng)這是?Vue 的生命周期

beforeCreate : 數(shù)據(jù)聲明還沒(méi)被調(diào)用時(shí)使用

created : vue渲染完畢后，所有數(shù)據(jù)和方法初始化后調(diào)用

mounted : 掛載元素之后

updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理肺稀，在這里寫(xiě)上相應(yīng)函數(shù)

beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

nextTick : 更新數(shù)據(jù)后立即操作dom

BeforeMount 掛載開(kāi)始之前被調(diào)用

vue生命周期的作用是什么第股？

答：它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯盹靴。

第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子炸茧？

答：第一次頁(yè)面加載時(shí)會(huì)觸發(fā)?beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

十二．jQuery的理解

?jQuery是一個(gè)輕量級(jí)的javascript框架，極大的簡(jiǎn)化了js的編程稿静。

1.首先jQuery提供了強(qiáng)大的元素選擇器梭冠。用于獲取html頁(yè)面中封裝了html元素的jQuery對(duì)象。像常見(jiàn)的選擇器有:基本選擇器改备，層次選擇器控漠，過(guò)濾選擇器，表單選擇器悬钳。

2.第二點(diǎn)就是jQuery提供了對(duì)css樣式操作的支持盐捷，像對(duì)class屬性的增加刪除切換操作。還有對(duì)單個(gè)樣式操作的支持的css方法默勾，提供了一種簡(jiǎn)潔統(tǒng)一的操作樣式的方法碉渡。

3.第三點(diǎn)就是jQuery出色的DOM操作的封裝，極大的簡(jiǎn)化了javascript的對(duì)dom節(jié)點(diǎn)的增刪改查操作母剥，讓我們可以使用一種更加簡(jiǎn)潔的方法來(lái)操作節(jié)點(diǎn)滞诺。

4.第四點(diǎn)就是jQuery還是一個(gè)為事件處理特點(diǎn)設(shè)計(jì)的框架，提供了靜態(tài)綁定事件和動(dòng)態(tài)綁定事件环疼，完善了事件的處理機(jī)制习霹。

5.jQuery解決了大量瀏覽器之間的兼容性的問(wèn)題。

6.jQuery極大的簡(jiǎn)化ajax編程炫隶，提供了一種更加簡(jiǎn)潔淋叶，統(tǒng)一的編程方式。

7.jQuery內(nèi)置了一些簡(jiǎn)單有用的內(nèi)置動(dòng)畫(huà)伪阶，像常見(jiàn)的slideDown/slideUp,hide/show,fadeIn/fadeOut等煞檩，還支持基于定位機(jī)制使用animate來(lái)自定義動(dòng)畫(huà)效果处嫌。

十三：webpack和gulp的理解

Gulp 是一個(gè)任務(wù)管理工具，讓簡(jiǎn)單的任務(wù)更清晰形娇，讓復(fù)雜的任務(wù)易于掌控锰霜，對(duì)代碼進(jìn)行構(gòu)建的工具

webpack是一個(gè)前端模塊化方案筹误，更側(cè)重模塊打包桐早，webpack是一款模塊加載兼打包工具，它可以將js厨剪、jsx哄酝、coffee、樣式sass祷膳、less陶衅，圖片等作為模塊來(lái)使用和處理。

十四：為什么離開(kāi)上一家公司

?1.與自己的規(guī)劃不符合了直晨，需要重新調(diào)整自己

?2.自己嘗試新的挑戰(zhàn)

十五搀军、什么是?MVVM , mvp和?MVC 是什么區(qū)別, 原理是什么?

mvc的界面和邏輯關(guān)聯(lián)緊密，數(shù)據(jù)直接從數(shù)據(jù)庫(kù)讀取勇皇，必須通過(guò)Controller來(lái)承上啟下罩句，通信都是單向的。mvvm的View 和 ViewModel可以互相通信敛摘，界面數(shù)據(jù)從viewmodel中獲取门烂。

區(qū)別：mvc和mvvm都是一種設(shè)計(jì)思想。主要就是mvc中Controller演變成mvvm中的viewModel兄淫。mvvm主要解決了mvc中大量的DOM 操作使頁(yè)面渲染性能降低屯远，加載速度變慢，影響用戶(hù)體驗(yàn)捕虽。和當(dāng) Model 頻繁發(fā)生變化慨丐，開(kāi)發(fā)者需要主動(dòng)更新到View 。

Mvc的實(shí)現(xiàn)視圖和模型的分離泄私，避免了視圖和模型糅合在一起房揭，當(dāng)視圖改變的時(shí)候只要業(yè)務(wù)邏輯沒(méi)變就不需要改變模型，缺點(diǎn)控制器不能直接更新視圖挖滤，視圖依然依賴(lài)模型的數(shù)據(jù)來(lái)顯示

Mvp是針對(duì)mvc缺點(diǎn)進(jìn)行改進(jìn)崩溪，mvp分為模型，視圖斩松，展示器伶唯。Mvp用展示器代替了控制器，展示器直接更新視圖惧盹，所以mvp的展示器可以處理視圖的請(qǐng)求并傳送到模型又可以根據(jù)模型的變化更新視圖乳幸，實(shí)現(xiàn)了視圖和模型的完全分離

Mvvm是mvp的進(jìn)一步發(fā)展瞪讼，完全實(shí)現(xiàn)視圖和模型的分離。Mvvm的視圖模型代替了mvp的展示器粹断，視圖模型和視圖實(shí)現(xiàn)雙向綁定符欠，當(dāng)視圖發(fā)生變化的時(shí)候視圖模型也會(huì)改變，視圖模型變化的時(shí)候視圖也發(fā)生改變

十六瓶埋、MVC的理解

用一種業(yè)務(wù)邏輯,數(shù)據(jù),界面顯示分離的方法組織代碼,將業(yè)務(wù)邏輯聚集到一個(gè)部件里面.在改進(jìn)和個(gè)性化定制界面及用戶(hù)交互的同時(shí)不需要重新編寫(xiě)業(yè)務(wù)邏輯希柿，這種開(kāi)發(fā)模式為合理組織代碼提供了方便、降低了代碼間的耦合度养筒、功能結(jié)構(gòu)清晰可見(jiàn)

M模型（Model）一般用來(lái)處理數(shù)據(jù)（讀取/設(shè)置）曾撤，一般指操作數(shù)據(jù)庫(kù)。

V視圖（View）一般用來(lái)展示數(shù)據(jù)晕粪，比如通過(guò)HTML展示挤悉。

C控制器（Controller）一般用做連接模型和視圖的橋梁。

css面試題

一．描述基于class的選擇器與基于id選擇器在性能上的區(qū)別巫湘。

答：基于class的選擇性的性能相對(duì)于基于id選擇器開(kāi)銷(xiāo)很大装悲，因?yàn)槠湫枰闅v所有DOM元素。?

二尚氛、如何優(yōu)化網(wǎng)頁(yè)加載速度

1.??減少css诀诊，js文件數(shù)量及大小，壓縮css和js代碼

2.?圖片預(yù)加載

3.?把css放置頂部怠褐。把js放置在底部

4.?減少http請(qǐng)求

5.?使用外部文件js和css

6.?少用全局變量畏梆，緩存dom節(jié)點(diǎn)查找的結(jié)果

三、display:none和visibility:hidden的區(qū)別奈懒？

display:none ?隱藏對(duì)應(yīng)的元素奠涌，在文檔布局不占據(jù)空間

visibility:hidden ?隱藏對(duì)應(yīng)的元素，但是在文檔布局中仍保留原來(lái)的空間磷杏。

四溜畅、CSS中?link 和@import?的區(qū)別是？

(1) link屬于HTML標(biāo)簽极祸，而@import是CSS提供的;

(2) 頁(yè)面被加載的時(shí)慈格，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

(3) import只在IE5以上才能識(shí)別遥金，而link是HTML標(biāo)簽浴捆，無(wú)兼容問(wèn)題;

(4) link方式的樣式的權(quán)重?高于@import的權(quán)重.

五、介紹一下CSS的盒子模型稿械？

（1）有兩種选泻，IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了border和padding;

（2）盒模型： 內(nèi)容(content)页眯、填充(padding)梯捕、邊界(margin)、 邊框(border).

六.解釋下浮動(dòng)和它的工作原理

浮動(dòng)元素不會(huì)占據(jù)文檔流

當(dāng)浮動(dòng)元素碰到包含它的元素的邊框或者其他浮動(dòng)元素的邊框時(shí)會(huì)停留下來(lái)窝撵。

七傀顾、.?前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?

?結(jié)構(gòu)層Html?表示層CSS?行為層?js

結(jié)構(gòu)層：對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述碌奉，

表示層：如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答短曾。

?行為層：內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)

八、標(biāo)簽上title與alt屬性的區(qū)別是什么?

Alt?當(dāng)圖片不顯示是?用文字代表道批。Title?為該屬性提供信息

九：簡(jiǎn)述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置错英，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，用于超鏈接隆豹。

src是指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置茅逮；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)璃赡，例如js腳本，img圖片和frame等元素献雅。當(dāng)瀏覽器解析到該元素時(shí)碉考，會(huì)暫停其他資源的下載和處理，直到將該資源加載挺身、編譯侯谁、執(zhí)行完畢，圖片和框架等元素也如此章钾，類(lèi)似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)墙贱。這也是為什么將js腳本放在底部而不是頭部。

十：對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)?????

標(biāo)簽閉合贱傀、標(biāo)簽小寫(xiě)惨撇、不亂嵌套、提高搜索機(jī)器人搜索幾率府寒、使用外?鏈css和js腳本魁衙、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快株搔、內(nèi)容能被更多的用戶(hù)所訪問(wèn)剖淀、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件纤房，容易維 護(hù)纵隔、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容帆卓、提供打印版本而不需要復(fù)制內(nèi)容巨朦、提高網(wǎng)站易用性米丘；

十一：語(yǔ)義化的理解？

??HTML語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化糊啡，便于對(duì)瀏覽器拄查、搜索引擎解析；

??在沒(méi)有樣式CSS情況下也以一種文檔格式顯示棚蓄，并且是容易閱讀的堕扶；

??搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO梭依。

??使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊稍算，便于閱讀維護(hù)理解。

十二：前端頁(yè)面有哪三層構(gòu)成役拴，分別是什么糊探？作用是什么？

結(jié)構(gòu)層河闰、表示層科平、行為層。

網(wǎng)頁(yè)的結(jié)構(gòu)層（structural layer）由HTML或XHTML之類(lèi)的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建姜性。

網(wǎng)頁(yè)的表示層（presentation layer）由CSS負(fù)責(zé)創(chuàng)建瞪慧。?CSS對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。

網(wǎng)頁(yè)的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)

angular面試題

一部念。angular理解：

·使用AngularJS構(gòu)建應(yīng)用時(shí)是以模塊化（Module）的方式組織的弃酌，即將整個(gè)應(yīng)用劃分成若干模塊.每一個(gè)模塊完成一個(gè)特定的子功能,所有的模塊按某種方式組織起來(lái),成為一個(gè)整體,完成整個(gè)系統(tǒng)所要求的功能.采用模塊化的組織方式，可以最大程度的實(shí)現(xiàn)代碼的復(fù)用

二儡炼、jQuery妓湘、vue、angular的區(qū)別

·（1）angular是一個(gè)mvc框架, ?采用model, controller以及view的方式去組織代碼, 會(huì)將一個(gè)html頁(yè)面分成若干個(gè)模塊, 每個(gè)模塊都有自己的scope, service, directive, 各個(gè)模塊之間也可以進(jìn)行通信, 但是整體結(jié)構(gòu)上是比較清晰的, 就是說(shuō)其代碼組織是模塊化的, angular的view可能僅僅是一個(gè)框架, , 對(duì)view的dom操作或者時(shí)間監(jiān)聽(tīng)都是在directive中實(shí)現(xiàn)的, 而且一般情況下很少直接去寫(xiě)dom操作代碼, 只要你監(jiān)聽(tīng)model, model發(fā)生變化后view也會(huì)發(fā)生變化, 就是雙向綁定機(jī)制, angularjs適用于單頁(yè)面開(kāi)發(fā)

（2）jQuery是使用選擇器（$）選取DOM對(duì)象射赛，對(duì)其進(jìn)行賦值多柑、取值、事件綁定等操作楣责，

?（3）vue是一個(gè)漸進(jìn)式的輕量級(jí)框架, 他核心只關(guān)注視圖層, 是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面,易于上手, 還便于與第三方庫(kù)或與既有項(xiàng)目整合,也能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供驅(qū)動(dòng)竣灌， ?vue的話是模塊化和組塊化，如果頁(yè)面要更改數(shù)據(jù)之類(lèi)的秆麸，就只在組件來(lái)修改就可以了初嘹，

三。Angular和jQuery的區(qū)別

jQuery只是一個(gè)類(lèi)庫(kù)以DOM做為驅(qū)動(dòng)（核心）沮趣，jquery是基于操作DOM,?適用于操作DOM比較多的項(xiàng)目, jquery是一個(gè)庫(kù),?比較大,兼容大部分瀏覽器,?有豐富的插件,?可拓展性強(qiáng), jquery不能向后兼容,?使用插件時(shí),可能會(huì)有沖突,?而AngularJS則一個(gè)框架（諸多類(lèi)庫(kù)的集合）以數(shù)據(jù)和邏輯做為驅(qū)動(dòng)（核心）屯烦，包含模板和雙向數(shù)據(jù)綁定,?路由,?模塊化,?服務(wù),?過(guò)濾器,?依賴(lài)注入等所有功能

四。jQuery和vue的區(qū)別

????1.jQuery首先要獲取到dom對(duì)象，然后對(duì)dom對(duì)象進(jìn)行進(jìn)行值的修改等操作2.Vue是首先把值和js對(duì)象進(jìn)行綁定驻龟，然后修改js對(duì)象的值温眉，Vue框架就會(huì)自動(dòng)把dom的值就行更新。3.可以簡(jiǎn)單的理解為Vue幫我們做了dom操作翁狐，我們以后用Vue就需要修改對(duì)象的值和做好元素和對(duì)象的綁定类溢，Vue這個(gè)框架就會(huì)自動(dòng)幫我們做好dom的相關(guān)操作

4.這種dom元素跟隨JS對(duì)象值的變化而變化叫做單向數(shù)據(jù)綁定，如果JS對(duì)象的值也跟隨著dom元素的值的變化而變化就叫做雙向數(shù)據(jù)綁定

五露懒。angularJS和vue.js的區(qū)別

一angular是mvvm框架, 而vue是一個(gè)漸進(jìn)式的框架, 相當(dāng)于view層, 都有雙向數(shù)據(jù)綁定, ?但是angular中的雙向數(shù)據(jù)綁定是基于臟檢查機(jī)制, vue的雙向數(shù)據(jù)綁定是基于??ES5的getter和setter來(lái)實(shí)現(xiàn), 而angular是有自己實(shí)現(xiàn)一套模板編譯規(guī)則,vue比angular更輕量, 性能上更高效, 比angular更容易上手, 學(xué)習(xí)成本低, vue需要一個(gè)el對(duì)象進(jìn)行實(shí)例化, 而angular是整個(gè)html頁(yè)面下的,單頁(yè)面應(yīng)用, 而vue可以有過(guò)個(gè)vue實(shí)例

六闯冷。angularJS雙向數(shù)據(jù)綁定的原理？

監(jiān)視函數(shù)?$watch隊(duì)列

當(dāng)我們?nèi)プ鰯?shù)據(jù)綁定時(shí)懈词，ng框架會(huì)自動(dòng)的給數(shù)據(jù)添加一個(gè)監(jiān)聽(tīng)watcher,對(duì)應(yīng)有一個(gè)回調(diào)當(dāng)數(shù)據(jù)變化時(shí)蛇耀，更新視圖

如果知道數(shù)據(jù)發(fā)生了變化？

ng會(huì)周期性的執(zhí)行一個(gè)函數(shù)來(lái)檢查模型數(shù)據(jù)是否發(fā)生了變化->$digest

什么時(shí)候會(huì)執(zhí)行$digest?

ngClick ngSrc常用的ng指令都會(huì)觸發(fā)$digest,也可以手工觸發(fā)$scope.$digest()

$scope.$apply();-->$rootScope.$digest()

七坎弯、Setinterval和$interval的區(qū)別纺涤？

?Setintercal 是js 提供的 不帶有自動(dòng)輪訓(xùn)功能，無(wú)法進(jìn)行時(shí)刻改變dom數(shù)據(jù)

?只能手動(dòng)添加$apply()或者$digest();

$interval是angularJS提供的一中服務(wù)荞怒，自帶dom數(shù)據(jù)也循環(huán)

談?wù)勀銓?duì)webpack的看法

一洒琢。WebPack 是一個(gè)模塊打包工具，你可以使用WebPack管理你的模塊依賴(lài)褐桌，并編繹輸出模塊們所需的靜態(tài)文件。它能夠很好地管理象迎、打包Web開(kāi)發(fā)中所用到的HTML荧嵌、JavaScript、CSS以及各種靜態(tài)文件（圖片砾淌、字體等）啦撮，讓開(kāi)發(fā)過(guò)程更加高效。對(duì)于不同類(lèi)型的資源汪厨，webpack有對(duì)應(yīng)的模塊加載器赃春。webpack模塊打包器會(huì)分析模塊間的依賴(lài)關(guān)系，最后 生成了優(yōu)化且合并后的靜態(tài)資源劫乱。

二织中。Gulp 和webpack的區(qū)別

gulp強(qiáng)調(diào)的是前端開(kāi)發(fā)的工作流程，我們可以通過(guò)配置一系列的task衷戈，定義task處理的事務(wù)（例如文件壓縮合并狭吼、雪碧圖、啟動(dòng)server殖妇、版本控制等）刁笙，然后定義執(zhí)行順序，來(lái)讓gulp執(zhí)行這些task，從而構(gòu)建項(xiàng)目的整個(gè)前端開(kāi)發(fā)流程疲吸。webpack是一個(gè)前端模塊化方案座每，更側(cè)重模塊打包，我們可以把開(kāi)發(fā)中的所有資源（圖片摘悴、js文件峭梳、css文件等）都看成模塊，通過(guò)loader（加載器）和plugins（插件）對(duì)資源進(jìn)行處理烦租，打包成符合生產(chǎn)環(huán)境部署的前端資源延赌。

js面試題

一．描述垃圾回收器的功能。

答：垃圾回收器定期掃描對(duì)象叉橱，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量挫以。如果一個(gè)對(duì)象的引用數(shù)量為0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的窃祝，那么該對(duì)象的內(nèi)存即可回收掐松。

二．documen.write和innerHTML的區(qū)別？

答：document.write只能重繪整個(gè)頁(yè)面粪小，innerHTML可以重繪頁(yè)面的一部分

三．那些操作會(huì)造成內(nèi)存泄漏大磺？

答：

??給DOM對(duì)象添加的屬性是一個(gè)對(duì)象的引用。

??DOM對(duì)象與JS對(duì)象相互引用探膊。

??給DOM對(duì)象用attachEvent綁定事件杠愧。

??從外到內(nèi)執(zhí)行appendChild，這時(shí)即使調(diào)用removeChild也無(wú)法釋放逞壁。

??反復(fù)重寫(xiě)同一個(gè)屬性會(huì)造成內(nèi)存大量占用流济。

四．一句話說(shuō)明內(nèi)存泄漏的定義。

答：內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在腌闯。

五．eval是做什么的绳瘟？

答：eval功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；但不安全姿骏，非常耗性能糖声。

六．null與undefined的區(qū)別？

答：Undefined類(lèi)型只有一個(gè)值分瘦，即undefined蘸泻，當(dāng)聲明的變量還未被初始化時(shí)，變量的默認(rèn)值為undefined擅腰。Null類(lèi)型也只有一個(gè)值蟋恬，即null，null用來(lái)表示尚未存在的對(duì)象趁冈，常用來(lái)表示函數(shù)企圖返回一個(gè)不存在的對(duì)象歼争。?

七．談?wù)剬?duì)this對(duì)象的理解拜马。

答：this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同沐绒，this的值會(huì)發(fā)生變化俩莽。但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象乔遮。

八．use strict是什么意思扮超？

答：表示代碼標(biāo)志為“嚴(yán)格模式”，則其中運(yùn)行的所有代碼都必然是嚴(yán)格模式下的蹋肮。如果在語(yǔ)法檢測(cè)時(shí)發(fā)現(xiàn)語(yǔ)法問(wèn)題出刷，則整個(gè)代碼塊失效，并導(dǎo)致一個(gè)語(yǔ)法異常坯辩。如果在運(yùn)行期出現(xiàn)了違反嚴(yán)格模式的代碼馁龟，則拋出執(zhí)行異常。

九．簡(jiǎn)述new操作符的功能漆魔。

答：

（1）創(chuàng)建一個(gè)空對(duì)象坷檩，使用this變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型

（2）屬性和方法被加入到this引用的對(duì)象中改抡。

（3）新創(chuàng)建的對(duì)象由this所引用矢炼，并且最后隱式的返回this。?

十．描述typeof關(guān)鍵字的功能阿纤。

答：typeof可用來(lái)判斷一個(gè)變量是否為空或是什么類(lèi)型的變量句灌。typeof一般只能返回如下幾個(gè)結(jié)果：number、boolean欠拾、string涯塔、function、object清蚀、undefined。?

十一．描述instanceof關(guān)鍵字的功能爹谭。

答：instanceof可用來(lái)判斷一個(gè)變量是否為空或是什么類(lèi)型的變量枷邪。如果想判斷一個(gè)變量是否某個(gè)對(duì)象的實(shí)例建議使用instanceof關(guān)鍵字。

十二．簡(jiǎn)述hasOwnProperty函數(shù)的功能诺凡。

答：hasOwnProperty函數(shù)是用來(lái)判斷一個(gè)對(duì)象是否有你給出名稱(chēng)的屬性或?qū)ο蠖А２贿^(guò)需要注意的是，此方法無(wú)法檢查該對(duì)象的原型鏈中是否具有該屬性腹泌，該屬性必須是對(duì)象本身的一個(gè)成員嘶卧。?

十三．簡(jiǎn)述一下isPrototypeOf函數(shù)的功能。

答：isPrototypeOf函數(shù)是用來(lái)判斷要檢查其原型鏈的對(duì)象是否存在于指定對(duì)象實(shí)例中凉袱，是則返回true芥吟，否則返回false侦铜。

十四．談?wù)剬?duì)JSON的了解。

答：JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式钟鸵。其是基于JavaScript的一個(gè)子集钉稍，具有數(shù)據(jù)格式簡(jiǎn)單，易于讀寫(xiě)棺耍，占用空間小的特點(diǎn)贡未。

十五．描述一下context的概念。

答：context就是限定查找的范圍蒙袍，context必須是一個(gè)DOM元素俊卤，context底層還是用了.find()方法來(lái)實(shí)現(xiàn)的。

十六．描述一下.delegate()和.live()方法的區(qū)別害幅。

答：delegate方法指定了委托對(duì)象消恍，live方法委托給了jQuery的context，1.9版本以后用on方法代替了矫限。

十七．描述一下.attr()和.prop()方法的區(qū)別哺哼。

答：.attr()方法是操作屬性節(jié)點(diǎn)，.prop()方法是操作獲取到的對(duì)應(yīng)js對(duì)象的屬性叼风。在遇到要獲取或設(shè)置checked取董、selected、readonly和disabled等屬性時(shí)无宿，用prop方法顯然更好茵汰。.prop()方法更高效，因?yàn)?attr()方法要訪問(wèn)DOM孽鸡。

十八蹂午。apply()與call()的區(qū)別？

功能一樣,?都是將當(dāng)前函數(shù)作為指定對(duì)象的方法執(zhí)行,?即函數(shù)中的this是指定對(duì)象

參數(shù)不一樣彬碱，apply傳遞的參數(shù)是this和一個(gè)數(shù)組豆胸，call傳入的參數(shù)是this和一串參數(shù)列表

十九.JavaScript 中 this 是如何工作的。

?作為函數(shù)調(diào)用巷疼，this指向window

?外層函數(shù)對(duì)應(yīng)的對(duì)象上晚胡，這是JavaScript的缺陷，用that替換嚼沿。

?作為構(gòu)造函數(shù)使用估盘，this 綁定到新創(chuàng)建的對(duì)象。

?作為對(duì)象方法使用骡尽，this 綁定到該對(duì)象遣妥。

?使用apply或call調(diào)用 this 將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。

二十攀细、十次完整的HTTP事務(wù)是怎樣一個(gè)過(guò)程

域名解析?--> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求?--> 服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼?--> 瀏覽器解析html代碼，并請(qǐng)求html代碼中的資源（如js丹锹、css、圖片等） --> 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù)

二十一肢藐、HTML5的離線儲(chǔ)存？

??localStorage ???長(zhǎng)期存儲(chǔ)數(shù)據(jù)吱韭，瀏覽器關(guān)閉后數(shù)據(jù)不丟失吆豹；

??sessionStorage ?數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

二十二理盆、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

調(diào)用localstorge痘煤、cookies等本地存儲(chǔ)方式

二十三、線程與進(jìn)程的區(qū)別猿规？

一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程.

線程的劃分尺度小于進(jìn)程衷快，使得多線程程序的并發(fā)性高。?

另外姨俩，進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元蘸拔，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率环葵。?

線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的调窍。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口张遭。但是線程不能夠獨(dú)立執(zhí)行邓萨，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制菊卷。?

從邏輯角度來(lái)看缔恳，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行洁闰。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用歉甚，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別扑眉。

二十四铃芦、js的全局函數(shù)有哪些，js的內(nèi)置對(duì)象有那些襟雷？分別各列舉5個(gè)

decodeURI() 解碼某個(gè)編碼的 URI。

decodeURIComponent() 解碼一個(gè)編碼的 URI 組件仁烹。

encodeURI() 把字符串編碼為 URI耸弄。

encodeURIComponent() 把字符串編碼為 URI 組件。

escape() 對(duì)字符串進(jìn)行編碼卓缰。

eval() 計(jì)算 JavaScript 字符串计呈，并把它作為腳本代碼來(lái)執(zhí)行砰诵。

getClass() 返回一個(gè) JavaObject 的 JavaClass。

isFinite() 檢查某個(gè)值是否為有窮大的數(shù)捌显。

isNaN() 檢查某個(gè)值是否是數(shù)字茁彭。

Number() 把對(duì)象的值轉(zhuǎn)換為數(shù)字。

parseFloat() 解析一個(gè)字符串并返回一個(gè)浮點(diǎn)數(shù)扶歪。

parseInt() 解析一個(gè)字符串并返回一個(gè)整數(shù)理肺。

String() 把對(duì)象的值轉(zhuǎn)換為字符串。

unescape() 對(duì)由 escape() 編碼的字符串進(jìn)行解碼善镰。

二十五妹萨、哪些操作會(huì)造成內(nèi)存泄漏？

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在炫欺。

垃圾回收器定期掃描對(duì)象乎完，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為?0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象）品洛，或?qū)υ搶?duì)象的惟一引用是循環(huán)的树姨，那么該對(duì)象的內(nèi)存即可回收。

1. setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話桥状，會(huì)引發(fā)內(nèi)存泄漏帽揪。

2. 閉包

3. 控制臺(tái)日志

4. 循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）

二十六岛宦、DOM操作——怎樣添加台丛、移除、移動(dòng)砾肺、復(fù)制挽霉、創(chuàng)建和查找節(jié)點(diǎn)。

（1）創(chuàng)建新節(jié)點(diǎn)

?????? ?createDocumentFragment() ?//創(chuàng)建一個(gè)DOM片段

????? ?createElement() ??//創(chuàng)建一個(gè)具體的元素

???? ? ?createTextNode() ??//創(chuàng)建一個(gè)文本節(jié)點(diǎn)

（2）添加变汪、移除侠坎、替換、插入

????? ?appendChild()

?????? ?removeChild()

?????? ?replaceChild()

???????????insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)

（3）查找

????? ?getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)

??getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)裙盾，會(huì)得到一個(gè)數(shù)組实胸，其中包括id等于name值的)

??getElementById() //通過(guò)元素Id，唯一性

二十七：js的類(lèi)型轉(zhuǎn)換番官，強(qiáng)制轉(zhuǎn)換和隱式轉(zhuǎn)換

顯示：toString()轉(zhuǎn)換為字符串

??parseInt()轉(zhuǎn)換為整數(shù)

parseFloat()轉(zhuǎn)換為浮點(diǎn)型數(shù)據(jù)

Number()如果轉(zhuǎn)換的內(nèi)容中包含非法字符庐完，結(jié)果為 NaN

強(qiáng)制：Boolean(value) - 把給定的值轉(zhuǎn)換成 Boolean 型；

Number(value) - 把給定的值轉(zhuǎn)換成數(shù)字（可以是整數(shù)或浮點(diǎn)數(shù)）徘熔；

String(value) - 把給定的值轉(zhuǎn)換成字符串门躯；

隱式：null,undefined,boolean,string,number,object。object是引用類(lèi)型

二十八：簡(jiǎn)述同步和異步的區(qū)別

同步是阻塞模式酷师，異步是非阻塞模式讶凉。

同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候染乌，若該請(qǐng)求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會(huì)一直等待下去懂讯，直到收到返回信息才繼續(xù)執(zhí)行下去荷憋；

異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作褐望，不管其他進(jìn)程的狀態(tài)勒庄。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率譬挚。