你是怎麼理解 H5 的？

html5 是一個 html 的新版本，裏面包含有很多的語義化標籤

H5 應該包含三部分內容 HTML5+css3+js,HTML 用來做頁面佈局、css
用來控制頁面的顯示效果、js 用來做頁面交互邏輯

在前端開發中最核心的部分是什麼 HTML

# 什麼是語義化標籤

html5
中新增了很多的語義化標籤，標籤的名字標識了其作用。新增的語義化標籤有:header、
nav、main、section、article、footer、aside 等

# 語義化標籤有什麼好處

便於 seo 優化，代碼可讀性更強，對人和機器都很友好

# 什麼是 seo 優化，作爲前端開發人員你能做什麼事情 seo 又叫搜索引擎優化，

在 header 中設置 keyword 和 description 以及 title 內容
定期的更新網頁的內容，增加新的文章資訊
不需要出現空標籤、爲 image 設置 alt
優化網站的加載速度
購買外鏈

# web 性能優化需要注意什麼

代碼壓縮合並
使用精靈圖片解決小圖標問題
減少 http 請求次數
設置 web 服務器做內容壓縮 gzip
使用 cdn 資源代替本地資源訪問
如果圖片很多的時候使用懶加載技術

# 怎麼實現代碼的壓縮合並,gulp

什麼是精靈圖片，怎麼實現的

是把所有的小圖標放在一張圖上，使用 background-positon 進行控制顯示

#
什麼是圖片懶加載？你是怎麼實現的？我們在做開發的時候如果一個頁面中需要加載的圖片資源很多。我們可以爲其設置一個默認佔位圖片，當圖片在頁面滾動到可以顯示的範圍時才進行這是圖片資源的加載。開發的時候我們使用插件
lazy-loader 實現

# 有沒有做過移動端開發，移動端開發需要注意什麼？

viewport 什麼是 viewport 怎麼禁用雙指縮放開發的時候我使用 flex 進行佈局

使用長度單位 rem

300ms 延時問題，fastclick 插件來解決 zepto.js 內置了很多手勢事件

android 和 ios 的兼容問題

placeholder 的顯示問題(使用 line-height: normal)

```

# 什麼是 flex 彈性佈局，常見的屬性有哪些？怎麼實現水平垂直居中

# 什麼是 rem？是根據 html 節點的字體大小進行計算(默認字體大小是 16px)

# rem 和 em 的區別

# css 中的定位方式有哪些？(absolute,relative,fixed)

瀏覽器兼容性

```

加內核前綴
儘量避免使用 h5 中新增的標籤和 css
使用 html hack 方式爲不同的 ie 瀏覽器單獨設置樣式
使用不同的瀏覽器進行調試做代碼修改
不使用 flex 佈局
使用 jQuery 的低版本來寫 js 代碼

# 盒模型(標準盒模型和怪異盒模型)

# 你在做網頁開發的時候怎麼實現相同的標籤在不同的瀏覽器中展示同樣的效果？

```

爲我的項目設置初始樣式 Normalize.css 或者是也可以自己寫一些初始樣式

```

# 有沒有用過 bootstrap？什麼是柵格系統？實現原理是什麼(媒體查詢)？

# 什麼是媒體查詢(@media 標籤),在不同的屏幕尺寸下顯示不同的效果

jQuery 的核心功能是元素選擇器

$('\#id'); // id 選擇

$('.className'); // 樣式選擇

$('div'); // 標籤名選擇

$('input[attr=""]'); // 標籤名加屬性選擇

// ... 還有其他

// $el 表示 jQuery 選擇器選中的一個對象

$el.eq(index); // 獲取指定索引位置的元素

.parent() // 父一級

jQuery 中常用的插件有哪些？

表單驗證插件、輪播圖、模態框、分頁、選項卡、懶加載、自定義滾動條等等

表單驗證插件

https://www.runoob.com/jquery/jquery-plugin-validate.html

jQueryUI 是什麼?jQueryUI 和 bootstrap 有什麼區別

jQueryUI 是以 jQuery 插件的形式書寫的一個 UI 框架,可以做 pc 和移動端開發
bootstrap 是一個響應式的 ui 框架,它提供了一些 js 插件需要依賴 jQuery 進行運行

jQuery 中怎麼自定義插件？他們在用法上有什麼區別？

jQuery.extend # 定義的插件可以在 jQuery 中直接使用 jQuery.fn.extend #
需要在元素選擇器選中的實例中運行

jQuery 的 ajax 請求,同步和異步？defferred 是什麼？

defferred 可以在 jQuery 中使用 then 的方式實現鏈式調用解決回調函數問題

https://www.cnblogs.com/147258llj/p/5689694.html

jQuery 中怎麼設置 ajax 請求的超時時間?怎麼添加一個 loading 效果？怎麼對 ajax
請

求做全局設置

jQuery 中怎麼綁定事件？用法上有什麼區別？
jQuery 對象和 js 的 dom 對象之間怎麼轉換？

# js 中的事件傳播流程

捕獲階段、事件源階段、冒泡階段捕獲階段：事件從 html
的根節點開始傳遞，直到觸發事件的標籤結束，此爲捕獲階段

事件源階段：事件在觸發事件的標籤上進行傳遞，傳遞的時候之和事件添加的先後順序有關係

冒泡階段：事件從事件源向 html 根節點逐層傳遞，直到 html 節點結束

他們的區別,onClick 相當於屬性賦值，最後一次設置的值會覆蓋前面設置的

addEventListener 相當於事件委託監聽，可以爲標籤添加多個事件,
參數三表示是否在捕獲階段觸發(默認是 false)

onClick 和 addEventListener(‘click’, function() {}, false) 事件阻止

target 和 currentTarget 有什麼區別？

target 表示觸發事件的標籤,currentTarget 表示綁定事件的標籤

# 閉包 function 中可以存在另一個的 function，在其內部生成一個局部的作用域。在
function 外部可以直接訪問這個 function 中的變量

# 原型和原型鏈

在 js 中對象都有一個隱式的原型__protp__ function 對象有一個顯式的原型 prototype

在 js 中通過__proto__可以找到此對象的原型，逐層查找直到找不到爲止此爲原型鏈在
js 中通過原型鏈實現繼承

# 跨域和本地存儲

cookie,localStorage,sessionStorage

cookie 每一次和服務器交互都會在請求頭中傳遞給服務器,最大不超過
4k,可以自己設置過期時間 localStorage 一直存在,除非手動刪除,最大 5m

sessionStorage 和 localStorage 一樣,唯一的區別是存儲時間不一樣

# ajax 請求

什麼是 ajax 請求:異步的 javascript 和 xml。是一種客戶端和服務器的通信技術。

原生 js 中實現 ajax 請求:XMLHttpRequest

# 同步和異步

同步是阻塞模式，代碼執行到那裏之後會等待比較耗時的操作完成異步是非阻塞模式，代碼會一直執行，當比較耗時的操作完成之後會觸發回調函數

# es6 中新增的內容有哪些？

module,class,const,let,箭頭函數,generate
生成器,模板字符串,結構賦值,對象擴展運算符… es6 中怎麼實現繼承 const 和 let
有什麼區別

# 什麼是 Promise 對象？怎麼封裝一個 Promise 對象

Promise 是 es6 中新增的一個對象，用來解決 function 的回調地獄問題。我們可以通過
then 監聽成功的回調函數,catch 監聽失敗的回調函數。Promise
對象的狀態在改變之後不可逆。 new Promise((resolve, reject) => )

Promise.all

Promise.race

# 什麼是回調函數,在 js 中 function 可以當做參數傳遞給另一個方法,在其中進行調用

# this 指向問題？function 和箭頭函數有什麼區別

this 默認指向 window 對象箭頭函數中沒有自己的 this 指向和上下文(context)中的
this 指向相同改變 this 指向的方法:

定義一個 that
通過 bind 方式改變
通過 call 和 apply

bind 和 call 與 apply 有什麼區別 bind 只改變 this 指向不會執行方法 call 和
apply 改變 this 執行並執行方法 call 和 apply 區別：傳遞的參數形式不一樣

# 什麼是面向對象？面向對象的三大基本特徵:封裝、繼承、多態 # mvc 和 mvvm

# 模塊加載方案 AMD, CMD,cmmonjs

AMD 異步加載，依賴前置，require.js

CMD sea.js

commonjs nodejs 中的加載方案 # dom 和 bom 的區別？document.getElementById
document.getElementsByClassName document.getElementsByName
document.getElementsByTagName document.querySelector document.querySelectorAll

bom 對象

alert console history navigator

# 怎麼判斷當前用戶的訪問來源(客戶端的瀏覽器信息)

navigator.userAgent // 用戶代理可以獲取當前用戶的瀏覽器和操作系統信息 #
怎麼獲取用戶的 gps 座標 navigator…

# 常見的元素選擇器有哪些？

# 數據類型有哪些？區別一般數據類型和複雜數據類型

string boolean null number object undefined symbol array function

# 數組常見的操作方法有哪些？

push pop shift unshift map forEach reduce filter find findIndex sort splice

# json 和 js 對象怎麼相互轉換

JSON.stringify

JSON.parse

# jQuery 中的元素選擇方式有哪些？ jQuery(‘css 選擇器’)

# 怎麼添加事件

.on 事件委託

.bind

.事件名

# 常用 jQuery 插件有哪些？輪播圖、分頁、懶加載、模態窗等 # 怎麼自定義組件

jQuery.extend 可以在 jQuery 對象中直接調用 jQuery.fn.extend
只能在元素選擇器選中的實例之上執行

# ajax 請求的封裝

$.ajaxSetup

# http 請求，常見的狀態碼，post 和 get 區別？請求報文

200,401,404,502,503,403,301

# 怎麼實現圖片上傳？ input 設置其 type=“file” #
數組去重，排序去重:創建一個新的數組,循環老數組中的每一項插入的新數組中，在插入之前判斷新數組中是否存在此項排序:sort

# 常見的排序算法和設計模式？

第一部分：Vue 面試試題

1.vue的生命週期

總共分爲8個階段創建前/後，載入前/後，更新前/後，銷燬前/後。

創建前/後：在beforeCreated階段，vue實例的掛載元素$el和數據對象data都爲

undefined，還未初始化。在created階段，vue實例的數據對象data有了，$el還沒有。載入前/後：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前爲虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message
成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前/後：在執行destroy方法後，對data的改變不會再觸發周期函數，說明此時vue
實例已經解除了事件監聽以及和dom的綁定，但是dom結構依然存在

2.Vue（react）中 key的作用

React和vue都實現了虛擬DOM
虛擬DOM有一套diff算法，而key就是用來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。所以其作用主要就是爲了高效的更新虛擬DOM

3.介紹下vuex

vuex就像一個無形的倉庫，公共的狀態我們會抽離出來放進裏面

Vuex核心主要包括以下幾個部分

State mutations getters actions modules

State 裏面就是存放的我們上面所提到的狀態

Mutations 就是存放如何更改狀態（同步操作）

Getters
就是從state中派生出狀態，比如將state中的某個狀態進行過濾然後獲取新的狀態。

actions就是mutation的加強版，它可以通過commit
mutations中的方法來改變狀態，最重要的是它可以進行異步操作。

modules顧名思義，就是當用這個容器來裝這些狀態還是顯得混亂的時候，我們就可以把容器分成幾塊，把狀態和管理規則分類來裝。這和我們創建js模塊是一個目的，讓代碼結構更清晰。

4.介紹下Vue的雙向綁定

vue.js採用數據劫持結合發佈者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。

雙向數據綁定無非就是在單向綁定的基礎上給可輸入元素（input、textare等）添加了
change(input)事件，來動態修改model和 view

5.Vue的雙向綁定的原理

VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty()
這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現的。
它接收三個參數，要操作的對象，要定義或修改的對象屬性名，屬性描述符。重點就是最後的屬性描述符。屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合兩種描述符的屬性同時使用。

6.Vue-router是什麼他有哪些組件？ vue-router就是路由，用於頁面跳轉。

路由中有三個基本的概念 route, routes(定義路由規則), router(定義的路由對象名字)：

A， route，它是一條路由，由這個英文單詞也可以看出來，它是單數， Home按鈕 =>
home 內容，這是一條route, about按鈕 => about 內容，這是另一條路由。

B， routes 是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕
=>home 內容 }， { about按鈕 => about 內容}]

C， router 是一個機制，相當於一個管理者，它來管理路由。因爲routes
只是定義了一組路由，它放在那裏是靜止的，當真正來了請求，怎麼辦？
就是當用戶點擊home 按鈕的時候，怎麼辦？這時router 就起作用了，它到routes
中去查找，去找到對應的 home 內容，所以頁面中就顯示了 home 內容。

D，客戶端中的路由，實際上就是dom 元素的顯示和隱藏。當頁面中顯示home 內容的時候，
about 中的內容全部隱藏，反之也是一樣。

客戶端路由有兩種實現方式：基於hash 和基於html5 history api.

<router-link> 就是定義頁面中點擊的部分，<router-view>
就是點擊後，顯示內容的部分。所以 <router-link> 還有一個非常重要的屬性 to，
它定義了點擊之後，要到哪個路徑下，如：<router-link
to="/home">Home</router-link> 最基本的一條路由由兩個部分組成： path:
component.

path 指路徑，component 指的是組件。如：{path:’/home’, component: home}

7.Vue.js的$watch方法中，參數immediate的作用是什麼？首先，watch是一個對象，既然是對象就包含鍵值對。

Watch中，鍵就是你要監控的傢伙。

值可以是函數：就是當你監控的傢伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。

值也可以是函數名：不過這個函數名要用單引號來包裹。

第三種情況，值是包括選項的對象：選項包括有三個。

1.第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。

2.第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到。）

3.第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。immediate如果爲true
代表如果在 wacth 裏聲明瞭之後，就會立即先去執行裏面的 handler方法

8.什麼是雙向綁定以及單向數據流，他們的不同點是什麼？單向數據綁定帶來單向數據流。指的是我們先把模板寫好，然後把模板和數據（數據可能來自後臺）整合到一起形成HTML代碼，然後把這段HTML代碼插入到文檔流裏面。適用於整體項目，便於追溯。

雙向數據綁定帶來雙向數據流。數據模型（Module）和視圖（View）之間的雙向綁定。無論數據改變，或是用戶操作，都能帶來互相的變動，自動更新甚至可以說雙向綁定=單向綁定

UI事件監聽

9.說說對mvvm的理解核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel
的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。

在MVVM架構下，View 和 Model 之間並沒有直接的聯繫，而是通過ViewModel進行交互，
Model 和 ViewModel 之間的交互是雙向的，因此View 數據的變化會同步到Model中，而
Model 數據的變化也會立即反應到View 上。

10.描述下vue的路由實現：hash模式和history模式
hash模式：在瀏覽器中符號“#”以及#後面的字符稱之爲hash，用 window.location.hash
讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。

history模式：history採用HTML5的新特性；且提供了兩個新方法： pushState()，
replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。

11.Vue.cli 如何新增自定義指令創建局部指令

var app = new Vue({ el: '\#app', data: { },

// 創建指令(可以多個) directives: {

// 指令名稱 dir1: { inserted(el) {

// 指令中第一個參數是當前使用指令的DOM console.log(el); console.log(arguments);

// 對DOM進行操作

el.style.width = '200px'; el.style.height = '200px'; el.style.background =
'\#000';

}

}

}

})

創建全局指令

Vue.directive('dir2', { inserted(el) { console.log(el);

}

})

12.Vue中怎麼導入js文件比如我們js中這樣寫:

function realconsole(){ alert("hello.thanks use me");

}

//導出realconsole() export { realconsole

}

在寄主這邊我們就這樣寫:

<template\>

<div class="teslist"\>

<button \@click="methods1"\>顯示console\</button\>

</div\>

</template\>

<script src="../../lib/myconsole.js"\>\</script\>

<script\>

//導入realconsole() import { realconsole } from '../../lib/myconsole.js' export
default { methods:{methods1:function(){ realconsole();

}

}}

</script\>

13.講一下Computed 和 watch 的區別？

Computed優點：

在數據未發生變化時，優先讀取緩存。computed
計算屬性只有在相關的數據發生變化時纔會改變要計算的屬性，當相關數據沒有變化時，它會讀取緩存。而不必像
motheds方法和 watch方法似的每次都去執行函數。

Computed中的兩個方法：

set() 方法在設置值是觸發。

get() 方法在獲取值時觸發。

watch函數適用於，當數據發生變化時，執行異步操作或較大開銷操作的情況

14.axios都有哪些屬性？

axios請求方法有兩個 get post

Get請求有then catch

Post請求有 params then catch

15.路由跳轉的方式有哪些？

<router-link to=‘需要跳轉到的頁面的路徑’> this.$router.push({ path:’/user’})
this.$router.replace{path：‘/’ }

16.data()函數中爲什麼要return{}？

因爲不使用return包裹着的數據會在項目的全局可見，這樣會造成變量污染，使用return
包裹後數據中變量只在當前組件中生效，不會影響其他組件。

17.父子組件之間是如何進行傳值的？

父給子傳：父組件調用子組件的地方，添加一個自定義的屬性名，屬性的值就是你要傳給子組件的值。在子組件定義的地方，添加一個props屬性，最基本的寫法爲數組，數組內部寫上自定義的屬性名，就可以在子組件直接通過{{自定義的屬性名}}得到父組件傳遞的值子給父傳：子組件內部通過this.$emit（'自定義事件名，傳遞的數據）把值傳遞出去，父組件在調用子組件的地方，通過@自定義事件名=“父組件的方法”，父組件實現方法，它的參數就是子組件傳遞過來的值.

兄弟組件傳值：中央事件總線 const bus = new Vue（），需要數據的地方
監聽自定義事件即可 bus.$on(‘自定義事件’，(data) => {}) 需要傳遞數據的地方
執行自定義事件即可 bus.$emit(‘自定義時間’,傳遞的值),先監聽，後發送。

18.路由跳轉的時候如何傳值？

1.通過name來確定匹配的路由

this.$router.push({path:’/init/doucfg/search’,name:‘search’,params:{search:val
ue}});

獲取參數的方法： this.$route.params.search; name:‘路由下面定義的name’,

params:上述例子傳遞的是一個key爲search的值

2.通過path攜帶的參數

this.$route.push({path:’/init/myadmexp/details/’+id)};
獲取參數方法：this.$route.params.id;
此方法需要在路由的path中配置 /:id

{ path:‘mydamexp/details/:id’, name:‘search’, component:search

3.通過query來傳遞參數，使用此方法傳遞的參數會出現在url地址中

this.$router.push({path:‘init/myadmexp/detail/’,query:{id:code}});
獲取參數方法:this.$route.query.id;

19.vue3的新特性

1，將一些內部功能拆分爲單獨的包。例如，obsever模塊將成爲一個單獨的包，擁有自己對外的api和自己的測試用例。

2，帶來一個基於Proxy的observer實現，它可以提供覆蓋語言（js–譯註）全範圍的響應式能力，消除了當前Vue2系列中基於Object。definePropery所存在的一些侷限，這些侷限包括：

對屬性的添加、刪除動作的監測；對數組基於下標的修改、對於.lenth修改的監測；對Map、

Set、WeakMap和WeakSet的支持；

3，默認爲惰性監測。在
2.x版本中，任何響應式數據，不管它的大小如何都會在啓動的時候監測功能。如果數據量很大的話，在應用啓動的時候就可能造成嚴重的性能消耗。而在

3.x 版本中，只有應用的初始可見部分所用到的數據會被監測

20.說下vue中的diff算法是怎麼比較前後更新的dom的?

DIFF算法在執行時有三個維度，分別是Tree DIFF、Component DIFF和Element
DIFF，執行時按順序依次執行，它們的差異僅僅因爲DIFF粒度不同、執行先後順序不同。

https://blog.csdn.net/one_girl/article/details/81086289

Tree DIFF是對樹的每一層進行遍歷，如果某組件不存在了，則會直接銷燬。第二層進入

Component DIFF，同一類型組件繼續比較下去,Element
DIFF緊接着以上統一類型組件繼續比較下去，常見類型就是列表。同一個列表由舊變新有三種行爲，插入、移動和刪除，它的比較策略是對於每一個列表指定key，先將所有列表遍歷一遍，確定要新增和刪除的，再確定需要移動的。

21.說說你對Vue組件數據流的理解？

vue
遵循了典型的單向數據流的原則，即數據總是由父組件傳遞到子組件，子組件在其內部可以有自己維護的數據，但它無權修改父組件傳遞給它的數據
https://blog.csdn.net/mysevenyear/article/details/80674231

22.用vue做一個todolist
https://jingyan.baidu.com/article/f00622286c8af6fbd2f0c84d.html
https://www.jianshu.com/p/a60f125fe10a

配置路由的步驟： router的作用？

1.node裏的router是用來做什麼的？
node裏的router是用來做接口的，它在不同的url地址下展示不同的數據

2.前端裏中的router是做什麼的？不同的url地址下展示不同的頁面
3.vue裏中的router是做什麼的？不同的url地址展示不同的組件 router的使用步驟：

1.router-link組件來導航寫在html部分，通過router-link組件來導航，通過`to`屬性來指定跳轉路徑，tag表示可以替換的標籤在這裏，router-link默認會被渲染爲一個`<a>`標籤，

如：<router-link to="/home" tag=“span”>首頁</router-link>

2.寫template

每一個存在的跳轉路徑都需要有一個與之相對應的組件模板來對頁面進行渲染

3.創建組件對象component 如：var Home = { template: ‘#home’

}

因爲這些組件是在跳轉後纔會去加載的，所以不用把組件註冊成標籤(即不用寫到Vue實例中)，直接把組件對象創建出來即可。因爲這個對象最後需要在哪個路徑上加載，是需要我們進行路由規則配置的(一個組件模板可以加載幾個不同的url上)

4.視圖容器它是放路徑組件的容器來展示組件如：<router-view></router-view>

5.定義路由規則我們根據路由規則來決定是使用某個組件對象，定義路由規則，每一條規則都是一個對象每個對象裏包括跳轉路徑和這個路徑應該加載的組件每一個路徑對應一個對象，所以routes是數組包對象的形式

如：var routes = [

{ path: ‘/home’, component: Home

{

path: ‘/about’, component: About

}

]

定義/聲明路由對象

1.router-link

其中to代表跳轉路徑 tag表示可以替換的標籤

有跳轉路徑存在，那麼我們就需要寫一個與之相對應的組件，來映射與`當前 \home`
url路徑的關係

當地址跳轉到相應url上時，我們需要有一個對應的template來展示界面；在routes規則裏需要一個佔位符來保留這個參數

Template
創建組件對象
4.視圖容器
router-view是放路徑組件的容器，來展示組件，它每次只能動態切換一個組件的視圖
定義路由規則，每一條規則都是一個對象，每個對象裏包括跳轉路徑和這個路徑應該加載的組件，每一個路徑對應一個對象，所以routes是數組包對象的形式

7.定義/聲明路由對象

規則需要給到某個對象上後纔可以使用，可以使用路由規則的只有路由對象，這裏的第一個
routes是VueRouter路由對象上的一個屬性，第二個routes是上邊創建的路由規則的名字
var app = new Vue({ el: ‘#out’,

router: router

})

8.Vue實例
掛載路由規則，第一個router是Vue實例對象的一個屬性，第二個router是定義的路由對象的名字
var app = new Vue({ el: ‘#out’,

router: router

})

路由模式：

hash： #/xxx

history: /xxx 需要服務器的支撐，工作中用

路由模式是在路由對象中定義的默認是hash模式

在 Vue實例中有一個mode屬性來決定是hash模式還是history模式重定向：

2.template

<template id="home">

<div>

<h2>home</h2>

<button @click="tap"\>跳轉到other\</button>

</div>

</template>

// 3.創建組件對象

// router是路由對象 // router.push()是跳轉路徑的方法

var Home = { template: '\#home', methods: { tap() { router.push('/other')

} } }

// \* 表示 不包含routes中已配置好路徑的路徑

 讓它直接訪問根路徑

{ path: '\*', redirect: '/home'

},

路由傳參：

1.在routes規則裏需要一個佔位符來保留這個參數

<router-link to="/info/11">傳參</router-link>

2.創建組件對象

var Info = { template: ‘#info’,

// 在組件內部接收佔位符保存下來的數據 //
所有路由的傳參都是在$route對象裏進行接收的

mounted() { console.log(this.$route.params) //{ id:11 }

}

3.路由規則

// params傳參，即，修改路由的規則配置

// 這裏的 :id 就相當於爲傳來的參數佔的位置

{

path: ‘/info/:id’,

component: Info

}, detail頁面，接收params參數：

1.組件對象
在Detail組件中的mounted鉤子內請求數據，在做本頁詳情跳轉時，用watch監聽$route的變化

this.\$route.params.id 這是不同商品的id值

var Detail = { template: '\#detail', mounted() {
console.log(this.\$route.params.id) axios({ url:
'[http://jx.xuzhixiang.top/ap/api/detail.php'](http://jx.xuzhixiang.top/ap/api/detail.php),
params: { id: this.\$route.params.id }

}).then((data) =\> { console.log(data.data.data) this.detail = data.data.data

})

}, watch: {

'\$route'(newVal, oldVal) { console.log(newVal)

}

}

一個路徑展示兩個組件：如：在index頁面點擊商品信息跳轉至商品詳情頁，現在想實現一個效果：點擊商品信息，商品信息列表依然存在，商品詳情在列表下方展示，即一個路徑展示兩個組件。增加一個router-view容器，並給新增容器添加name屬性定義路由規則：

{ path: '/home', component: Home,

// 開啓一個子路由規則 用children children: [{

path: '/detail/:id',

component: Detail

}]

},

對vue生命週期的理解：

掛載就是把對象作用於dom節點上對Vue的生命週期的理解

Vue中的生命週期是指：一個實例從最初創建到最後銷燬的這一整個過程。

Vue的生命週期一共分爲11個週期，它們分別是：beforeCreate、create、beforeMount、
mounted、beforeUpdate、update、activated、deactivated、beforeDestroy、Destroyed、
errorCaptured(vue2.5.0出來的，當Vue的子組件發生錯誤時觸發)

beforeCreate()生命週期,實例未被完全創建,在這個生命週期內是取不到數據的，也無法進行事件操作。在這個週期內取出的數據爲undefined，調用函數會報錯：xx
is not a function。在這個期間比較適合進行loading圖的加載操作。

created()生命週期，此時實例已經創建完成，可以進行數據及屬性方法的運算了，但因爲掛載階段還未開始，所以$el屬性仍然是不可見的，打印爲undefined。即，在這個週期，
created鉤子可以獲取Vue實例中的data，調用Vue實例中的方法，可以獲取到原html上已有的dom元素，但無法獲取通過掛載模板生成的dom元素

beforeMount()生命週期，beforeMount()鉤子函數和mounted()鉤子函數都可以取到

id="app"的dom元素，但beforeMount中的數據還未被解析，而mounted中的數據則已被解析,並且mounted中的數據會進行實時的數據變化。掛載就是在實例對象創建後，把實例對象作用於dom節點上。(beforeMount()鉤子函數，實例放上去了，但變量語法還未解析)

Mounted()生命週期，在mounted鉤子階段，可以對在data中有初始值的dom元素進行掛載。

Mounted()鉤子函數通常在什麼時候用？

Mounted鉤子函數通常用於數據的請求。請求到數據後把數據掛載到dom實例中。打開頁面數據便已被請求到頁面中，比較符合用戶體驗。

beforeUpdate()生命週期，beforeUpdate()和update()生命週期在數據更新時觸發。

beforeUpdate()鉤子函數，數據變更，但視圖（顯示到頁面上的數據）並未變更。

updated()生命週期，update()鉤子函數，數據變更，視圖也變更。
beforedestroy()生命週期，在實例銷燬之前調用，在這個階段，實例仍然是可以使用的。

destroyed()生命週期，在Vue實例銷燬後調用的，調用後，Vue實例的數據會與之解綁，事件會被移除，Vue實例所擁有的子實例也會被銷燬。

事件冒泡形成的前提條件是：

父子元素綁定了相同的事件類型，冒泡是由內向外

所有框架均不支持低版本IE瀏覽器什麼是mixins？

混入 (mixins) 是一種分發 Vue 組件中可複用功能的非常靈活的方式。

混入對象可以包含任意組件選項。

當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。當組件和混入對象含有同名選項時，這些選項將以恰當的方式混合。

同名鉤子函數將混合爲一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。

函數內部阻止事件冒泡 e.cancelBubble=true;
標籤內阻止事件冒泡 @click.stop=“show1()”
鍵盤事件 keydown 函數中獲取鍵盤編碼keyCode
在標籤內直接綁定按鍵事件 @keyup.13=“show()” @keyup.enter=“show()” watch：

第一種寫法vm.$watch(‘’,function( newvalue,oldvalue){ }) 第二種寫法
直接在vue初始化中通過 watch｛msg:function(newvalue,oldvalue){}｝

**22.**什麼是同步加載、異步加載、延遲加載

同步模式又稱阻塞模式，會阻止瀏覽器的後續處理，停止了後續的文件的解析，執行，

如圖像的渲染。流覽器之所以會採用同步模式，是因爲加載的 js 文件中有對 dom
的操作，重定向，輸出 document 等默認行爲，所以同步纔是最安全的。通常會把要加載的
js 放到 body 結束標籤之前，使得 js
可在頁面最後加載，儘量減少阻塞頁面的渲染。這樣可以先讓頁面顯示出來

異步加載也叫非阻塞模式加載，瀏覽器在下載 js 的同時，同時還會執行後續的頁面處理。
在 script 標籤內，用 js 創建一個 script 元素並插入到 document
中，這種就是異步加載 js 文件了。

同步加載流程是瀑布模型，異步加載流程是併發模型。

延遲加載：有些 js
代碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。延遲加載就是一開始並不加載這些暫時不用的
js，而是在需要的時候或稍後再通過 js 的控制來異步加載。

也就是將 js 切分成許多模塊，頁面初始化時只加載需要立即執行的 js ，然後其它 js
的加載延遲到第一次需要用到的時候再加載。

特別是頁面有大量不同的模塊組成，很多可能暫時不用或根本就沒用到。

就像圖片的延遲加載，在圖片出現在可視區域內時（在滾動條下拉）才加載顯示圖片跨域的解決

23.JSONP(適用於單項跨域請求)

原理：因爲瀏覽器對 script 不存在同源策略，所以 script
可以跨域請求外部資源，返回的數據是 json 格式。

缺點：1、只能發送 get 請求，無法發送 post 請求

2、無法判斷請求成功還是失敗

24.porxy 代理

原理：讓代理服務器請求目標地址，因爲請求是在服務端進行的，在服務端不存在跨域，從而解決跨域問題

25.跨域資源共享（CORS）

CORS 需要瀏覽器和後端同時支持。IE 8 和 9 需要通過 XDomainRequest 來實現。

瀏覽器會自動進行 CORS 通信，實現 CORS 通信的關鍵是後端。只要後端實現了
CORS，就實現了跨域。

服務端設置 Access-Control-Allow-Origin 就可以開啓 CORS。
該屬性表示哪些域名可以訪問資源，如果設置通配符則表示所有網站都可以訪問資源。

26.react 和 vue 兩個框架的差異

Vue 通過指令 v-model 實現數據雙向綁定，而 React 的數據流是單向的。

在 Vue 中，數據由 data 屬性在 Vue 對象中進行管理；在 React 中使用
setState()方法去更新狀態。

Vue.js 在模板中提供了指令，過濾器等，可以非常方便，快捷地操作 DOM，而 React
則沒有

**27.**面向對象思想面向對象的三大特徵繼承、封裝、多態
只需要告訴調用者對象中具體方法的功能，不需要調用者去了解方法中的實現細節。

原型鏈的繼承一、原型鏈繼承：二、借用構造函數三、組合繼承：四、原型式繼承：
五、寄生繼承：六：寄生組合繼承(最理想)：構造函數中有個
prototype（每個函數中都有），指向他的原型對象，每個原型對象中也有一個
constructor
屬性，指向原構造函數。通過構造函數創建的新對象中都有一個無法直接訪問的[[proto]]屬性，使得對象也指向構造函數的原型。這使得對象也獲得了原型中的方法和屬性。
當訪問對象中的屬性或方法時，如果對象中沒有該屬性或方法，則會向上一級原型對象中尋找該屬性或方法，如果找了，就返回該屬性，若沒有則繼續向上面的原型中去查找該屬性。

**28.**說說你對 promise 的理解？

概念：promise
是異步編程的一種解決方案。它可以把異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。

Promise
爲異步操作提供了統一的接口，使得控制異步操作更加容易，它的強大之處在於它的鏈式調用。

基本用法：

new Promise(function(resolve, reject) {

//待處理的異步邏輯

//處理結束後，調用 resolve 或 reject 方法 })

新建一個 promise 很簡單，只需要 new 一個 Promise 對象即可。所以 promise
本質上就是一個函數，它接受一個函數作爲參數，並且返回 promise
對象，這就給鏈式調用提供了基礎。

**29.**你對前端頁面的性能優化有什麼好的解決方案？

CSS 放在頁面最上部（head 標籤中），JS 文件放在頁面最下面
瀏覽器會在下載完成全部 CSS 之後纔對整個頁面進行渲染，因此最好的做法是將
CSS 放在頁面最上面（是將 CSS 放在 head 中），讓瀏覽器儘快下載 CSS。

js 文件則相反，瀏覽器在加載 js
後，立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此 js
最好放在頁面最下面。但是，如果頁面解析時就需要用到 js
文件，這時放到底部就不合適了。

儘可能少的設置全局變量。 3、儘量減少 DOM 操作
不要在標籤中設置樣式，最好是外部引用 CSS 文件。
減少 http 請求，合理設置 HTTP 緩存；（最有效的辦法） http
協議是無狀態的應用層協議，意味着每次 http
請求都需要建立通信鏈路、進行數據傳輸，而在服務器端，每個 http
都需要啓動獨立的線程去處理。這些通信和服務的開銷都很昂貴，減少 http
請求的數目可有效提高訪問性能。

減少 http 的主要手段是合併 CSS 、合併 js 、
合併圖片（多張圖片合併成一張）。

設置 HTTP 緩存：緩存的力量是強大的，恰當的緩存設置可以大大的減少 HTTP
請求。假設某網站首頁，當瀏覽器沒有緩存的時候訪問一共會發出 78 個請求，共 600 多
K 數據，而當第二次訪問即瀏覽器已緩存之後訪問則僅有 10 個請求，共 20 多 K 數據。

怎樣才能合理設置緩存？原則很簡單，能緩存越多越好，能緩存越久越好。

如果可以的話，儘可能的將外部的腳本、樣式進行合併，多個合爲一個。另外， CSS、

Javascript、Image 都可以用相應的工具進行壓縮，壓縮後往往能省下不少空間。

使用瀏覽器緩存
：對一個網站而言，CSS、js、logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件幾乎是每次
http 請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好的改善性能。通過設置
http 頭中的 cache-control 和 expires
的屬性，可設定瀏覽器緩存，緩存時間可以是數天，甚至是幾個月。

如果遇到大的文件，可以將文件放置在一個定時器中
，利用異步操作，等其他的文件加載完成後，再加載定時器中的文件。

CSS Sprites 合併 CSS 圖片

圖片的懶加載：這條策略實際上並不一定能減少 HTTP
請求數，但是卻能在某些條件下，或者頁面剛加載時減少 HTTP
請求數。對於圖片而言，在頁面剛加載的時候
，可以只加載第一屏，當用戶繼續往後滾屏的時候，才加載後續的圖片。

減少 cookie 傳輸，儘量使用 localStorage 存儲本地數據

一方面，cookie 包含在每次請求和響應中，太大的 cookie
會嚴重影響數據傳輸，因此哪些數據需要寫入 cookie 需要慎重考慮，儘量減少 cookie
中傳輸的數據量。

將 Image 進行壓縮。

**30.**什麼是作用域鏈，什麼是原型鏈？

作用域是針對變量的，比如我們創建了一個函數，函數裏面又包含了一個函數，那麼現在就有三個作用域

全局作用域==>函數 1 作用域==>函數 2 作用域
作用域的特點就是，先在自己的變量範圍中查找，如果找不到，就會沿着作用域往上找那麼什麼是原型鏈呢？
原型鏈是針對構造函數的，比如我先創建了一個函數，然後通過一個變量 new
了這個函數，那麼這個被 new
出來的函數就會繼承創建出來的那個函數的屬性，然後如果我訪問 new
出來的這個函數的某個屬性，但是我並沒有在這個 new 出來的函數中定義這個變量，

那麼它就會往上（向創建出它的函數中）查找，這個查找的過程就叫做原型鏈。

Object ==> 構造函數 1 ==> 構造函數 2

就和 css 中的繼承一樣，如果自身沒有定義就會繼承父元素的樣式。

active-class 是哪個組件的屬性？嵌套路由怎麼定義？答：vue-router 模塊的
router-link 組件。
怎麼定義 vue-router 的動態路由？怎麼獲取傳過來的動態參數？

答：在 router 目錄下的 index.js 文件中，對 path 屬性加上/:id。使用 router
對象的 params.id

vue-router 有哪幾種導航鉤子？

答：三種，一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。第二種：組件內的鉤子；第三種：單獨路由獨享組件

scss 是什麼？安裝使用的步驟是？有哪幾大特性？

答：預處理 css，把 css 當前函數編寫，定義變量,嵌套。先裝
css-loader、node-loader、sass-loader 等加載器模塊，在 webpack-base.config.js
配置文件中加多一個拓展:extenstion，再加多一個模塊：module 裏面 test、loader

4.1、scss 是什麼？在 vue.cli 中的安裝使用步驟是？有哪幾大特性？答：css
的預編譯。

使用步驟：

第一步：用 npm 下三個 loader（sass-loader、css-loader、node-sass）

第二步：在 build 目錄找到 webpack.base.config.js，在那個 extends
屬性中加一個拓展.scss 第三步：還是在同一個文件，配置一個 module 屬性

第四步：然後在組件的 style 標籤加上 lang 屬性，例如：lang=”scss” 有哪幾大特性:

可以用變量，例如（$變量名稱=值）；
可以用混合器，例如（）
可以嵌套

5、mint-ui 是什麼？怎麼使用？說出至少三個組件使用方法？

答：基於 vue 的前端組件庫。npm 安裝，然後 import 樣式和
js，vue.use（mintUi）全局引

入。在單個組件局部引入：import {Toast} from
‘mint-ui’。組件一：Toast(‘登錄成功’)；組件二： mint-header；組件三：mint-swiper

6、v-model 是什麼？怎麼使用？ vue 中標籤怎麼綁定事件？

答：可以實現雙向綁定，指令（v-class、v-for、v-if、v-show、v-on）。vue 的 model
層的 data 屬性。綁定事件：<input @click=doLog() />

axios
是什麼？怎麼使用？描述使用它實現登錄功能的流程？答：請求後臺資源的模塊。npm
install axios -S 裝好，然後發送的是跨域，需在配置文件中 config/index.js
進行設置。後臺如果是 Tp5 則定義一個資源路由。js 中使用 import 進來，然後.get
或.post。返回在.then 函數中如果成功，失敗則是在.catch 函數中
axios+tp5 進階中，調用
axios.post(‘api/user’)是進行的什麼操作？axios.put(‘api/user/8′)呢？答：跨域，添加用戶操作，更新操作。
什麼是 RESTful API？怎麼使用?

答：是一個 api 的標準，無狀態請求。請求的路由地址是固定的，如果是 tp5
則先路由配置中把資源路由配置好。標準有：.post .put .delete

vuex 是什麼？怎麼使用？哪種功能場景使用它？

答：vue 框架中狀態管理。在 main.js 引入 store，注入。新建了一個目錄 store，……
export 。

場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

mvvm 框架是什麼？它和其它框架（jquery）的區別是什麼？哪些場景適合？答：一個
model+view+viewModel 框架，數據模型 model，viewModel 連接兩個區別：vue
數據驅動，通過數據來顯示視圖層而不是節點操作。場景：數據操作比較多的場景，更加便捷
自定義指令（v-check、v-focus）的方法有哪些？它有哪些鉤子函數？還有哪些鉤子函數參數？

答：全局定義指令：在 vue 對象的 directive
方法裏面有兩個參數，一個是指令名稱，另外一個是函數。組件內定義指令：directives
鉤子函數：bind（綁定事件觸發）、inserted(節點插入的時候觸發)、update（組件內相關更新）

鉤子函數參數：el、binding

說出至少 4 種 vue 當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

vue-router 是什麼？它有哪些組件？

答：vue 用來寫路由一個插件。router-link、router-view

導航鉤子有哪些？它們有哪些參數？

答：導航鉤子有：a/全局鉤子和組件內獨享的鉤子。b/beforeRouteEnter、afterEnter、
beforeRouterUpdate、beforeRouteLeave

參數：有
to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種

Vue 的雙向數據綁定原理是什麼？

答：vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，通過
Object.defineProperty()來劫持各個屬性的
setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。

具體步驟：

第一步：需要 observe 的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter
和 getter

這樣的話，給這個對象的某個值賦值，就會觸發
setter，那麼就能監聽到了數據變化第二步：compile
解析模板指令，將模板中的變量替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖

第三步：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋樑，主要做的事情是:

在自身實例化時往屬性訂閱器(dep)裏面添加自己
自身必須有一個 update()方法
待屬性變動 dep.notice()通知時，能調用自身的 update()方法，並觸發 Compile
中綁定的回調，則功成身退。

第四步：MVVM 作爲數據綁定的入口，整合 Observer、Compile 和 Watcher 三者，通過
Observer 來監聽自己的 model 數據變化，通過 Compile 來解析編譯模板指令，最終利用
Watcher 搭起

Observer和Compile之間的通信橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input)
-> 數據 model 變更的雙向綁定效果。

ps：16 題答案同樣適合”vue data 是怎麼實現的？”此面試題。

請詳細說下你對 vue 生命週期的理解？

答：總共分爲 8 個階段創建前/後，載入前/後，更新前/後，銷燬前/後。

創建前/後：在 beforeCreated 階段，vue 實例的掛載元素$el 和數據對象 data 都爲
undefined，還未初始化。在 created 階段，vue 實例的數據對象 data 有了，$el
還沒有。

載入前/後：在 beforeMount 階段，vue 實例的$el 和 data
都初始化了，但還是掛載之前爲虛擬的 dom 節點，data.message 還未替換。在 mounted
階段，vue 實例掛載完成，data.message 成功渲染。

更新前/後：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。

銷燬前/後：在執行 destroy 方法後，對 data 的改變不會再觸發周期函數，說明此時 vue
實例已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在

請說下封裝 vue 組件的過程？

答：首先，組件可以提升整個項目的開發效率。能夠把頁面抽象成多個相對獨立的模塊，解決了我們傳統項目開發：效率低、難維護、複用性等問題。

然後，使用 Vue.extend 方法創建一個組件，然後使用 Vue.component
方法註冊組件。子組件需要數據，可以在 props
中接受定義。而子組件修改好數據後，想把數據傳遞給父組件。可以採用 emit 方法。

你是怎麼認識 vuex 的？答：vuex 可以理解爲一種開發模式或框架。比如 PHP 有
thinkphp，java 有 spring 等。通過狀態（數據源）集中管理驅動組件的變化（好比
spring 的 IOC 容器對 bean 進行集中管理）。

應用級的狀態集中放在 store 中；改變狀態的方式是提交
mutations，這是個同步的事物；異步邏輯應該封裝在 action 中。

vue-loader 是什麼？使用它的用途有哪些？答：解析.vue 文件的一個加載器，跟
template/js/style 轉換成 js 模塊。用途：js 可以寫 es6、style 樣式可以 scss
或 less、template 可以加 jade 等
請說出 vue.cli 項目中 src 目錄每個文件夾和文件的用法？答：assets
文件夾是放靜態資源；components 是放組件；router 是定義路由相關的配置;view
視圖；app.vue 是一個應用主組件；main.js 是入口文件
vue.cli 中怎樣使用自定義的組件？有遇到過哪些問題嗎？

答：第一步：在 components 目錄新建你的組件文件（smithButton.vue），script 一定要
export

default {

第二步：在需要用的頁面（組件）中導入： import smithButton from

‘…/components/smithButton.vue’

第三步：注入到 vue 的子組件的 components 屬性上面,components:{smithButton}
第四步：在 template 視圖 view 中使用，<smith-button> </smith-button>
問題有：smithButton 命名，使用的時候則 smith-button。

聊聊你對 Vue.js 的 template 編譯的理解？答：簡而言之，就是先轉化成 AST
樹，再得到的 render 函數返回 VNode（Vue 的虛擬 DOM 節點）

詳情步驟：

首先，通過 compile 編譯器把 template 編譯成 AST 語法樹（abstract syntax tree 即
源代碼的抽象語法結構的樹狀表現形式），compile 是 createCompiler
的返回值，createCompiler 是用以創建編譯器的。另外 compile 還負責合併 option。

然後，AST 會經過 generate（將 AST 語法樹轉化成 render funtion 字符串的過程）得到
render 函數，render 的返回值是 VNode，VNode 是 Vue 的虛擬 DOM
節點，裏面有（標籤名、子節點、文本等等）

請說下具體使用 vue 的理解？

使用 vue 不必擔心佈局更改和類名重複導致的 js
重寫，因爲它是靠數據驅動雙向綁定，底層是通過 Object.defineProperty()
定義的數據 set、get 函數原理實現。
組件化開發，讓項目的可拓展性、移植性更好，代碼重用性更高，就好像農民工建房子，拿起自己的工具包就可以開工。項目經理坐等收樓就好。
單頁應用的體驗零距離接觸安卓原生應用，局部組件更新界面，讓用戶體驗更快速省時。
js 的代碼無形的規範，團隊合作開發代碼可閱讀性更高。

你覺得哪些項目適合 vue 框架？

數據信息量比較多的，反之類似企業網站就無需此框架了。
手機 web 和 app 應用多端共用一套界面的項目，因爲使用 vue.cli+webpack
後的前端目錄，非常有利於項目的跨平臺部署。

PC 端項目你會在哪些場景使用 Vue
框架？場景：上萬級數據需要瀑布流更新和搜索的時候，因爲數據龐大的時候，用原生的
dom 操作 js 和 html 都會有列表的 html 佈局，迭代很困難。再一個 dom
節點的大面積添加會影響性能。

那麼 vue 爲什麼解決這些問題呢？第一：只需用 v-for 在 view
層一個地方遍歷數據即可，無需複製一段 html 代碼在 js 和 html 兩個地方。

第二：vue 通過 Virtual Dom 就是在 js 中模擬 DOM 對象樹來優化 DOM 操作。

Vue computed 實現

建立與其他屬性（如：data、 Store）的聯繫；屬性改變後，通知計算屬性重新計算
實現時，主要如下：

初始化 data，使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter。
初始化 computed, 遍歷 computed 裏的每個屬性，每個 computed 屬性都是一個
watch 實例。每個屬性提供的函數作爲屬性的 getter，使用 Object.defineProperty
轉化。
Object.defineProperty getter
依賴收集。用於依賴發生變化時，觸發屬性重新計算。 4. 若出現當前 computed
計算屬性嵌套其他 computed 計算屬性時，先進行其他的依賴收集。

$router 和$route 的區別 route 爲當前 router 跳轉對象裏面可以獲取
name、path、query、params 等 route 爲當前 router 跳轉對象裏面可以獲取
name、path、query、params 等 router 爲 VueRouter 實例，想要導航到不同
URL，則使用$router.push 方法

怎麼定義 vue-router 的動態路由以及如何獲取傳過來的動態參數？

在 router 目錄下的 index.js 文件中，對 path 屬性加上/:id，使用 router 對象的
params.id 來獲取參數。

3 種 vue 路由傳參的基本模式：

getDescribe(id) {// 直接調用$router.push 實現攜帶參數的跳轉

this.$router.push({ path: `/describe/${id}`,

})// 方案一，需要對應路由配置如下：

{ path: ‘/describe/:id’, name: ‘Describe’, component: Describe

}// 很顯然，需要在 path 中添加/:id 來對應 $router.push 中 path 攜帶的參數。//
在子組件中可以使用來獲取傳遞的參數值。$route.params.id

// 父組件中：通過路由屬性中的 name 來確定匹配的路由，通過 params
來傳遞參數。

this.$router.push({ name: ‘Describe’, params: { id: id

}

})// 對應路由配置: 注意這裏不能使用:/id 來傳遞參數了，因爲父組件中，已經使用
params 來攜帶參數了。

{ path: ‘/describe’, name: ‘Describe’, component: Describe

}//子組件中: 這樣來獲取參數$route.params.id

3、// 父組件：使用 path 來匹配路由，然後通過 query 來傳遞參數這種情況下 query
傳遞的參數會顯示在 url 後面?id=？

this.$router.push({ path: ‘/describe’, query: { id: id

}

})// 對應路由配置：

{ path: ‘/describe’, name: ‘Describe’, component: Describe

}// 對應子組件: 這樣來獲取參數$route.query.id

路由之間跳轉？聲明式（標籤跳轉）：編程式（ js 跳轉）：router.push(‘index’)

vue-router 有哪幾種導航鉤子？它們有哪些參數？

、全局導航鉤子 beforeEach beforeResolve

afterEach

、某個路由獨享的導航鉤子 beforeEnter
、路由組件上的導航鉤子 beforeRouteEnter beforeRouteUpdate (2.2 新增)
beforeRouteLeave

參數：有
to（去的那個路由）、from（離開的路由）、next（一定要用這個函數才能去到下一個路由，如果不用就攔截）最常用就這幾種

路由懶加載

當打包構建應用時，Javascript
包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

你是怎麼認識 vuex 的？

答：vuex 可以理解爲一種開發模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。

通過狀態（數據源）集中管理驅動組件的變化（好比 spring 的 IOC 容器對 bean
進行集中管理）。

應用級的狀態集中放在 store 中；改變狀態的方式是提交
mutations，這是個同步的事物；異步邏輯應該封裝在 action 中。

vuex 是什麼？怎麼使用？哪種功能場景使用它？

vue.js 的中心化狀態管理方案。在 main.js 引入 store，注入。新建一個目錄
store，…… export 。
場景有：單頁應用中，組件之間的狀態。音樂播放、登錄狀態、加入購物車

vuex 有哪幾種屬性？

有五種，分別是 State、 Getter、Mutation 、Action、 Module

* vuex 的 State 特性

Vuex 就是一個倉庫，倉庫裏面放了很多對象。其中 state
就是數據源存放地，對應於一般 Vue 對象裏面的 data
state 裏面存放的數據是響應式的，Vue 組件從 store 中讀取數據，若是 store
中的數據發生改變，依賴這個數據的組件也會發生更新
它通過 mapState 把全局的 state 和 getters 映射到當前組件的 computed
計算屬性中

* vuex 的 Getter 特性

getters 可以對 State 進行計算操作，它就是 Store 的計算屬性
雖然在組件內也可以做計算屬性，但是 getters 可以在多組件之間複用
如果一個狀態只在一個組件內使用，是可以不用 getters

* vuex 的 Mutation 特性

Action 類似於 mutation，不同在於：Action 提交的是
mutation，而不是直接變更狀態；Action 可以包含任意異步操作。

不用 Vuex
會帶來什麼問題？可維護性會下降，想修改數據要維護三個地方；可讀性會下降，因爲一個組件裏的數據，根本就看不出來是從哪來的；增加耦合，大量的上傳派發，會讓耦合性大大增加，本來
Vue 用 Component 就是爲了減少耦合，現在這麼用，和組件化的初衷相背。

Vue.js 中 ajax 請求代碼應該寫在組件的 methods 中還是 vuex 的 actions 中？

如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex
的 state 裏。
如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入 action
裏，方便複用，幷包裝成 promise 返回，在調用處用 async await
處理返回的數據。如果不要複用這個請求，那麼直接寫在 vue 文件裏很方便。

axios 的特點有哪些？一、Axios 是一個基於 promise 的 HTTP 庫，支持 promise 所有的
API

二、它可以攔截請求和響應
三、它可以轉換請求數據和響應數據，並對響應回來的內容自動轉換成 JSON 類型的數據
四、安全性更高，客戶端支持防禦 XSRF

axios 有哪些常用方法？

axios.get(url[, config]) //get 請求用於列表和信息查詢
axios.delete(url[, config]) //刪除三、axios.post(url[, data[, config]])
//post 請求用於信息的添加四、axios.put(url[, data[, config]]) //更新操作

說下你瞭解的 axios 相關配置屬性？ url 是用於請求的服務器 URL method
是創建請求時使用的方法,默認是 get baseURL 將自動加在 url 前面，除非 url
是一個絕對 URL。它可以通過設置一個 baseURL 便於爲 axios 實例的方法傳遞相對 URL
transformRequest
允許在向服務器發送前，修改請求數據，只能用在’PUT’,’POST’和’PATCH’這幾個請求方法

headers
是即將被髮送的自定義請求頭：headers:{‘X-Requested-With’:’XMLHttpRequest’},

params 是即將與請求一起發送的 URL 參數，必須是一個無格式對象(plainobject)或

URLSearchParams 對象

params:{ ID:12345},

auth 表示應該使用 HTTP 基礎驗證，並提供憑據。這將設置一個 Authorization
頭，覆寫掉現有的任意使用 headers 設置的自定義 Authorization 頭

auth:{ username:‘janedoe’, password:‘s00pers3cret’},
‘proxy’定義代理服務器的主機名稱和端口 auth 表示應該使用 HTTP
基礎驗證，並提供憑據。這將設置一個 Authorization 頭，覆寫掉現有的任意使用
headers 設置的自定義 Authorization 頭

proxy:{ host:‘127.0.0.1’, port:9000, auth:{ username:‘mikeymike’,
password:‘rapunz3l’

}

React 相關：

1.setState 的第二個參數的作用

1.setState 的第二個參數是一個回調函數

2.該函數會在 setState
函數調用完成並且組件開始重新渲染的時候調用，我們可以用該函數來監聽渲染是否完成

this.setState(

{msg:‘修改後的數據’},

() => console.log(‘這是回調函數’)

)

2.React 中 createElement 和 cloneElement 的區別

1.createElement 和 cloneElemen t 都能夠生成可以直接在 jsx
頁面組件中使用的標籤語言,

但是在生成的過程中是存在細微差別的

React.createElement():JSX 語法就是用 React.createElement()來構建 React
元素的。它接受三

個參數，第一個參數 type 可以是一個標籤名。如 div、span，或者 React
組件。第二個參數 props 爲傳入的屬性。第三個以及之後的參數
children，皆作爲組件的子組件。

React.cloneElement()與 React.createElement()相似，不同的是它傳入的第一個參數
element

是一個 React
元素，而不是標籤名或組件。新添加的屬性會併入原有的屬性，傳入到返回的新元素中，而舊的子元素將被替換。將保留原始元素的鍵和引用。

**3.**列舉你所瞭解的跨域的實現方法

1.思路：
(參考：https://blog.csdn.net/wzj_110/article/details/80733573)

(1)讓服務器來加載遠程數據，然後在用戶請求時提供給瀏覽器。

(2)用<script>或是<iframe>標籤加載外來文件，因爲他們的 src
屬性允許獲得任何地方的資源。

(3)W3C 制定的 Cross-Origin Resource Sharing(CORS，跨域資源共享)。

(4)JSONP

4.JavaScript 實現繼承的方法有，建議哪一種？

https://www.cnblogs.com/humin/p/4556820.html

1.原型鏈繼承 ★★（3、4 兩大致命缺陷）

(1）核心：將父類的實例作爲子類的原型

特點：1.非常純粹的繼承關係，實例的是子類的實例，也是父類的實例

2.父類新增原型方法/原型屬性，子類都能訪問到 3.簡單，易於實現

缺點：1.要想爲子類新增屬性和方法，必須在 new Animal()
這樣的語句執行，不能放到構造器中 2.無法實現多繼承

3.來自原型對象的所有屬性被所有實例共享(來自原型對象的引用屬性是所有實例共享的)

**4.**創建子類實例時，無法向父類構造函數傳參

2.構造繼承 ★★（缺點 3）

(1)
核心：使用父類的構造函數來增強子類實例，等於是複製父類的實例屬性給子類(沒用到原型)

(2)特點：1.解決了 1 中，子類實例共享父類引用屬性的問題

2.創建子類實例時，可以向父類傳遞參數

3.可以實現多繼承（call 多個父類對象）

(3)缺點：1.實例並不是父類的實例，值是子類的實例

2.只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

3.無法實現函數複用，每個子類都有父類實例函數的副本，影響性能

3.實例繼承 ★★

(1)核心：爲父類實例添加新特性，作爲子類實例返回

(2)特點：1.不限制調用方式，不管是 new 子類()還是子類(),返回的對象具有相同的效果

(3)缺點：1. 實例是父類的實例，不是子類的實例

不支持多繼承

4.拷貝繼承 ★（缺點 1）

(1)核心：

(2)特點：1.支持多繼承

(3)缺點：1. 效率較低，內存佔用高（因爲要拷貝父類的屬性）

2.無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用 for in 訪問到）

5.組合繼承 ★★★★（僅僅多消耗了一點內存）

(1)核心：通過調用父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類實例作爲子類原型，實現函數複用

(2)特點：1.彌補了方式 2
的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法既是子類的實例，也是父類的實例
2.不存在引用屬性共享問題 3.可以傳參 4.函數可複用

(3)缺點：1.
調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

6.寄生組合繼承 ★★★★（實現複雜，扣掉一顆星）

(1)核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點

(2)特點：堪稱完美

(3)缺點：實現較爲複雜

**5.**塊級元素、行內元素和空元素（void）塊級元素：

<address>、<caption>、<dd>、<div>、<dl>、<dt>、<fieldset>、<form>、<h1>、<h2>、<h3>、

<h4>、<h5>、<h6>、<hr>、<legend>、<li>、<noframes>、<noscript>、<ol>、<ul>、<p>、<pre>、

行內元素：

<a>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<i>、

<img>、<input>、<kbd>、<label>、<q>、<samp>、<select>、<small>、<span>、<strong>、<sub>、

空元素（void）：

**6.**如何實現瀏覽器內多個標籤頁之間的通信？

調用 localstorge、cookies 等本地存儲方式

使用 cookie+setInterval

{ display: none; /* 不佔據空間，無法點擊 */ }

{ visibility: hidden; /* 佔據空間，無法點擊 */ }

{ position: absolute; top: -999em; /* 不佔據空間，無法點擊 */ }

{ position: relative; top: -999em; /* 佔據空間，無法點擊 */ }

{ position: absolute; visibility: hidden; /* 不佔據空間，無法點擊 */ }

{ height: 0; overflow: hidden; /* 不佔據空間，無法點擊 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，可以點擊 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /*
不佔據空間，可以點擊 */ }

3 個使用 this 的典型應用

1.在 html 元素事件屬性中使用

2.在構造函數中

3.apply()/call()中

7.React 中 keys 的作用是什麼？

Keys 是 React 用於追蹤哪些列表中元素被修改、被添加或者被移除的輔助標識。

render () { return (

\<ul\>

{this.state.todoItems.map(({item, key}) =\> { return \<li
key={key}\>{item}\</li\>

})}

\</ul\>

)

}

在開發過程中，我們需要保證某個元素的 key 在其同級元素中具有唯一性。在 React Diff
算法中 React 會藉助元素的 Key
值來判斷該元素是新近創建的還是被移動而來的元素，從而減少不必要的元素重渲染。此外，React
還需要藉助 Key 值來判斷元素與本地狀態的關聯關係，因此我們絕不可忽視轉換函數中
Key 的重要性。

8.調用 setState 之後發生了什麼？

在代碼中調用 setState 函數之後，React
會將傳入的參數對象與組件當前的狀態合併，然後觸發所謂的調和過程（Reconciliation）。經過調和過程，React
會以相對高效的方式根據新的狀態構建 React 元素樹並且着手重新渲染整個 UI 界面。在
React 得到元素樹之後，

React
會自動計算出新的樹與老樹的節點差異，然後根據差異對界面進行最小化重渲染。在差異計算算法中，React
能夠相對精確地知道哪些位置發生了改變以及應該如何改變，這就保證了按需更新，而不是全部重新渲染。

9.react 生命週期函數

初始化階段：

getDefaultProps:獲取實例的默認屬性 getInitialState:獲取每個實例的初始化狀態
componentWillMount：組件即將被裝載、渲染到頁面上 ender:組件在這裏生成虛擬的 DOM
節點 componentDidMount:組件真正在被裝載之後

運行中狀態：

componentWillReceiveProps:組件將要接收到屬性的時候調用
shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（可以返回
false，接收數據後不更新，阻止 render 調用，後面的函數不會被繼續執行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態 render:組件重新描繪
componentDidUpdate:組件已經更新

銷燬階段：

componentWillUnmount:組件即將銷燬 shouldComponentUpdate 是做什麼的，（react
性能優化是哪個周期函數？） shouldComponentUpdate 這個方法用來判斷是否需要調用
render 方法重新描繪 dom。因爲 dom 的描繪非常消耗性能，如果我們能在
shouldComponentUpdate 方法中能夠寫出更優化的 dom diff 算法，可以極大的提高性能。

10.參考 react 性能優化-sf

**11.爲什麼虛擬 dom 會提高性能?(必考)**如何理解虛擬 DOM?

虛擬 dom 相當於在 js 和真實 dom 中間加了一個緩存，利用 dom diff
算法避免了沒有必要的 dom 操作，從而提高性能。

用 JavaScript 對象結構表示 DOM 樹的結構；然後用這個樹構建一個真正的
DOM
樹，插到文檔當中當狀態變更的時候，重新構造一棵新的對象樹。然後用新的樹和舊的樹進行比較，記錄兩棵樹差異把
2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。

Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU
和硬盤，既然硬盤這麼慢，我們就在它們之間加個緩存：既然 DOM 這麼慢，我們就在它們
JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual
DOM），最後的時候再把變更寫入硬盤（DOM）。

12.react diff 原理（常考，大廠必考）

把樹形結構按照層級分解，只比較同級元素。給列表結構的每個單元添加唯一的 key
屬性，方便比較。

React 只會匹配相同 class 的 component（這裏面的 class
指的是組件的名字）合併操作，調用 component 的 setState 方法的時候, React
將其標記爲 dirty.到每一個事件循環結束, React 檢查所有標記 dirty 的 component
重新繪製. 選擇性子樹渲染。開發人員可以重寫 shouldComponentUpdate 提高 diff
的性能。

13.React 中 refs 的作用是什麼？

Refs 是 React 提供給我們的安全訪問 DOM
元素或者某個組件實例的句柄。我們可以爲元素添加 ref
屬性然後在回調函數中接受該元素在 DOM
樹中的句柄，該值會作爲回調函數的第一個參數返回：

class CustomForm extends Component { handleSubmit = () =\> { console.log("Input
Value: ", this.input.value)

}

render () { return (

\<form onSubmit={this.handleSubmit}\>

\<input type='text' ref={(input) =\> this.input = input} /\>

\<button type='submit'\>Submit\</button\>

\</form\>

)

}

}

上述代碼中的 input 域包含了一個 ref 屬性，該屬性聲明的回調函數會接收 input
對應的 DOM 元素，我們將其綁定到 this
指針以便在其他的類函數中使用。另外值得一提的是，refs
並不是類組件的專屬，函數式組件同樣能夠利用閉包暫存其值：

function CustomForm ({handleSubmit}) { let inputElement return (

\<form onSubmit={() =\> handleSubmit(inputElement.value)}\>

\<input type='text' ref={(input) =\> inputElement = input} /\>

\<button type='submit'\>Submit\</button\>

\</form\>

) }

如果你創建了類似於下面的 Twitter 元素，那麼它相關的類定義是啥樣子的？

\<Twitter username='tylermcginnis33'\>

{(user) =\> user === null

? \<Loading /\>

: \<Badge info={user} /\>}

\</Twitter\> import React, { Component, PropTypes } from 'react' import
fetchUser from 'twitter'

// fetchUser take in a username returns a promise// which will resolve with that
username's data.class Twitter extends Component {

// finish this

}

如果你還不熟悉回調渲染模式（Render Callback
Pattern），這個代碼可能看起來有點怪。這種模式中，組件會接收某個函數作爲其子組件，然後在渲染函數中以
props.children 進行調用：

import React, { Component, PropTypes } from 'react' import fetchUser from
'twitter' class Twitter extends Component { state = { user: null,

}

static propTypes = { username: PropTypes.string.isRequired,

}

componentDidMount () { fetchUser(this.props.username)

.then((user) =\> this.setState({user}))

}

render () { return this.props.children(this.state.user)

}

}

這種模式的優勢在於將父組件與子組件解耦和，父組件可以直接訪問子組件的內部狀態而不需要再通過
Props 傳遞，這樣父組件能夠更爲方便地控制子組件展示的 UI
界面。譬如產品經理讓我們將原本展示的 Badge 替換爲
Profile，我們可以輕易地修改下回調函數即可：

{(user) => user === null

? <Loading />: <Profile info={user} />}

</Twitter>

14.展示組件(Presentational component)和容器組件(Container component)之間有何不同？

展示組件關心組件看起來是什麼。展示專門通過 props
接受數據和回調，並且幾乎不會有自身的狀態，但當展示組件擁有自身的狀態時，通常也只關心
UI
狀態而不是數據的狀態。容器組件則更關心組件是如何運作的。容器組件會爲展示組件或者其它容器組件提供數據和行爲(behavior)，它們會調用
Flux
actions，並將其作爲回調提供給展示組件。容器組件經常是有狀態的，因爲它們是(其它組件的)數據源。

15.類組件(Class component)和函數式組件(Functional component)之間有何不同？

類組件不僅允許你使用更多額外的功能，如組件自身的狀態和生命週期鉤子，也能使組件直接訪問
store 並維持狀態當組件僅是接收 props，並將組件自身渲染到頁面時，該組件就是一個
‘無狀態組件(stateless
component)’，可以使用一個純函數來創建這樣的組件。這種組件也被稱爲啞組件(dumb
components)或展示組件

16.(組件的)狀態(state)和屬性(props)之間有何不同？

State 是一種數據結構，用於組件掛載時所需數據的默認值。State
可能會隨着時間的推移而發生突變，但多數時候是作爲用戶事件行爲的結果。

Props(properties 的簡寫)則是組件的配置。props
由父組件傳遞給子組件，並且就子組件而言，props
是不可變的(immutable)。組件不能改變自身的 props，但是可以把其子組件的 props
放在一起(統一管理)。Props 也不僅僅是數據–回調函數也可以通過 props 傳遞。

17.何爲受控組件(controlled component)？

在 HTML 中，類似 <input>, <textarea> 和 <select>
這樣的表單元素會維護自身的狀態，並基於用戶的輸入來更新。當用戶提交表單時，前面提到的元素的值將隨表單一起被髮送。但在

React 中會有些不同，包含表單元素的組件將會在 state
中追蹤輸入的值，並且每次調用回調函數時，如 onChange 會更新
state，重新渲染組件。一個輸入表單元素，它的值通過 React
的這種方式來控制，這樣的元素就被稱爲"受控元素"。

18.何爲高階組件(higher order component)？

高階組件是一個以組件爲參數並返回一個新組件的函數。HOC
運行你重用代碼、邏輯和引導抽象。最常見的可能是 Redux 的 connect
函數。除了簡單分享工具庫和簡單的組合，HOC 最好的方式是共享 React
組件之間的行爲。如果你發現你在不同的地方寫了大量代碼來做同一件事時，就應該考慮將代碼重構爲可重用的
HOC。

**19.**爲什麼建議傳遞給 setState 的參數是一個 callback
而不是一個對象？因爲 this.props 和 this.state
的更新可能是異步的，不能依賴它們的值去計算下一個 state。

**20.**除了在構造函數中綁定 this，還有其它方式嗎？

你可以使用屬性初始值設定項(property
initializers)來正確綁定回調，create-react-app
也是默認支持的。在回調中你可以使用箭頭函數，但問題是每次組件渲染時都會創建一個新的回調。

**21.(在構造函數中)**調用 super(props) 的目的是什麼？在 super()
被調用之前，子類是不能使用 this 的，在 ES2015 中，子類必須在 constructor 中調用
super()。傳遞 props 給 super() 的原因則是便於(在子類中)能在 constructor 訪問
this.props。

22.如何在 React 組件的何處發起 Ajax 請求？

在 React 組件中，應該在 componentDidMount
中發起網絡請求。這個方法會在組件第一次“掛載”(被添加到
DOM)時執行，在組件的生命週期中僅會執行一次。更重要的是，你不能保證在組件掛載之前
Ajax 請求已經完成，如果是這樣，也就意味着你將嘗試在一個未掛載的組件上調用
setState，這將不起作用。在 componentDidMount
中發起網絡請求將保證這有一個組件可以更新了。

**23.**描述事件在 React 中的處理方式爲了解決跨瀏覽器兼容性問題，您的 React
中的事件處理程序將傳遞 SyntheticEvent 的實例，它是 React
的瀏覽器本機事件的跨瀏覽器包裝器。

這些 SyntheticEvent
與您習慣的原生事件具有相同的接口，除了它們在所有瀏覽器中都兼容。有趣的是，React
實際上並沒有將事件附加到子節點本身。React
將使用單個事件監聽器監聽頂層的所有事件。這對於性能是有好處的，這也意味着在更新
DOM 時，React 不需要擔心跟蹤事件監聽器。

24.createElement 和 cloneElement 有什麼區別？

React.createElement():JSX 語法就是用 React.createElement()來構建 React
元素的。它接受三個參數，第一個參數可以是一個標籤名。如 div、span，或者 React
組件。第二個參數爲傳入的屬性。第三個以及之後的參數，皆作爲組件的子組件。

React.createElement( type,

[props],

[…children]

)

React.cloneElement()與
React.createElement()相似，不同的是它傳入的第一個參數是一個

React
元素，而不是標籤名或組件。新添加的屬性會併入原有的屬性，傳入到返回的新元素中，而就的子元素獎盃替換。

React.cloneElement( element, [props],

[…children]

)

25.React 中有三種構建組件的方式

React.createClass()、ES6 class 和無狀態函數。

26.react 組件的劃分業務組件技術組件？根據組件的職責通常把組件分爲 UI
組件和容器組件。 UI 組件負責 UI 的呈現，容器組件負責管理數據和邏輯。

兩者通過 React-Redux 提供 connect 方法聯繫起來。

27.簡述 flux 思想

Flux 的最大特點，就是數據的"單向流動"。

用戶訪問 View，View 發出用戶的 Action

Dispatcher 收到 Action，要求 Store 進行相應的更新

Store 更新後，發出一個"change"事件

View 收到"change"事件後，更新頁面

28.React 項目用過什麼腳手架（本題是開放性題目）

creat-react-app Yeoman 等

29.瞭解 redux 麼，說一下 redux 吧

redux 是一個應用數據流框架，主要是解決了組件間狀態共享的問題，原理是集中式管理，

主要有三個核心方法，action，store，reducer，工作流程是 view 調用 store 的
dispatch 接收 action 傳入 store，reducer 進行 state 操作，view 通過 store 提供的
getState 獲取最新的數據，flux 也是用來進行數據操作的，有四個組成部分
action，dispatch，view，store，工作流程是 view 發出一個 action，派發器接收
action，讓 store 進行數據更新，更新完成以後 store 發出 change，view 接受 change
更新視圖。Redux 和 Flux 很像。主要區別在於 Flux 有多個可以改變應用狀態的
store，在 Flux 中 dispatcher 被用來傳遞數據到註冊的回調事件，但是在 redux
中只能定義一個可更新狀態的 store，redux 把 store 和

Dispatcher 合併,結構更加簡單清晰，新增 state,對狀態的管理更加明確，通過
redux，流程更加規範了，減少手動編碼量，提高了編碼效率，同時缺點時當數據更新時有時候組件不需要，但是也要重新繪製，有些影響效率。一般情況下，我們在構建多交互，多數據流的複雜項目應用時纔會使用它們

30.redux 有什麼缺點

一個組件所需要的數據，必須由父組件傳過來，而不能像 flux 中直接從 store 取。

當一個組件相關數據更新時，即使父組件不需要用到這個組件，父組件還是會重新
render，可能會有效率影響，或者需要寫複雜的 shouldComponentUpdate 進行判斷

31.React 的工作原理

React 會創建一個虛擬 DOM(virtual DOM)。當一個組件中的狀態改變時，React
首先會通過

“diffing” 算法來標記虛擬 DOM 中的改變，第二步是調節(reconciliation)，會用 diff
的結果來更新 DOM。

32.使用 React 有何優點

1.只需查看 render 函數就會很容易知道一個組件是如何被渲染的

2.JSX
的引入，使得組件的代碼更加可讀，也更容易看懂組件的佈局，或者組件之間是如何互相引用的

3.支持服務端渲染，這可以改進 SEO 和性能

4.易於測試

5.React 只關注 View 層，所以可以和其它任何框架(如 Backbone.js,
Angular.js)一起使用

33.使用箭頭函數(arrow functions)的優點是什麼

作用域安全：在箭頭函數之前，每一個新創建的函數都有定義自身的 this
值(在構造函數中是新對象；在嚴格模式下，函數調用中的 this
是未定義的；如果函數被稱爲“對象方法”，則爲基礎對象等)，但箭頭函數不會，它會使用封閉執行上下文的
this 值。

簡單：箭頭函數易於閱讀和書寫

清晰：當一切都是一個箭頭函數，任何常規函數都可以立即用於定義作用域。開發者總是可以查找
next-higher 函數語句，以查看 this 的值

**34.**怎麼阻止組件的渲染在組件的 render 方法中返回 null
並不會影響觸發組件的生命週期方法

**35.**當渲染一個列表時，何爲 key？設置 key 的目的是什麼

Keys 會有助於 React 識別哪些 items 改變了，被添加了或者被移除了。Keys
應該被賦予數組內的元素以賦予(DOM)元素一個穩定的標識，選擇一個 key
的最佳方法是使用一個字符串，該字符串能惟一地標識一個列表項。很多時候你會使用數據中的
IDs 作爲 keys，當你沒有穩定的 IDs 用於被渲染的 items
時，可以使用項目索引作爲渲染項的 key，但這種方式並不推薦，如果 items
可以重新排序，就會導致 re-render 變慢。 **36.(在構造函數中)**調用
super(props) 的目的是什麼在 super() 被調用之前，子類是不能使用 this 的，在
ES2015 中，子類必須在 constructor 中調用 super() 。傳遞 props 給 super()
的原因則是便於 ( 在子類中 ) 能在 constructor 訪

問 this.props。

37.何爲 JSX？

JSX 是 JavaScript 語法的一種語法擴展，並擁有 JavaScript 的全部功能。JSX 生產
React " 元素"，你可以將任何的 JavaScript 表達式封裝在花括號裏，然後將其嵌入到
JSX 中。在編譯完成之後，JSX 表達式就變成了常規的 JavaScript
對象，這意味着你可以在 if 語句和 for 循

環內部使用 JSX，將它賦值給變量，接受它作爲參數，並從函數中返回它。

38.怎麼用 React.createElement 重寫下面的代碼 Question：

const element = (

\<h1 className="greeting"\>

Hello, rdhub.cn!

\</h1\>

);

Answer：

const element = React.createElement(

'h1',

{className: 'greeting'},

'Hello, rdhub.cn!'

);

39.何爲 Children

在 JSX
表達式中，一個開始標籤(比如<a>)和一個關閉標籤(比如</a>)之間的內容會作爲一個特殊的屬性
props.children 被自動傳遞給包含着它的組件。

這個屬性有許多可用的方法，包括 React.Children.map ，

React.Children.forEach， React.Children.count，
React.Children.only，React.Children.toArray。

40.在 React 中，何爲 state

State 和 props 類似，但它是私有的，並且完全由組件自身控制。State
本質上是一個持有數據，並決定組件如何渲染的對象。

**41.**什麼原因會促使你脫離 create-react-app 的依賴當你想去配置 webpack 或
babel presets。

42.何爲 redux

Redux 的基本思想是整個應用的 state 保持在一個單一的 store 中。store
就是一個簡單的 javascript 對象，而改變應用 state 的唯一方式是在應用中觸發
actions，然後爲這些 actions 編寫 reducers 來修改 state。整個 state 轉化是在
reducers 中完成，並且不應該有任何副作用。

43.在 Redux 中，何爲 store

Store 是一個 javascript 對象，它保存了整個應用的 state。與此同時，Store
也承擔以下職責：

允許通過 getState() 訪問 state 運行通過 dispatch(action) 改變 state 通過
subscribe(listener) 註冊 listeners 通過 subscribe(listener) 返回的函數處理
listeners 的註銷

44.何爲 action

Actions 是一個純 javascript 對象，它們必須有一個 type 屬性表明正在執行的 action
的類型。實質上，action 是將數據從應用程序發送到 store 的有效載荷。

45.何爲 reducer

一個 reducer 是一個純函數，該函數以先前的 state 和一個 action
作爲參數，並返回下一

個 state。

46.Redux Thunk 的作用是什麼

Redux thunk 是一個允許你編寫返回一個函數而不是一個 action 的 actions creators
的中間件。如果滿足某個條件，thunk 則可以用來延遲 action
的派發(dispatch)，這可以處理異步 action 的派發(dispatch)。

47.何爲純函數(pure function)

一個純函數是一個不依賴於且不改變其作用域之外的變量狀態的函數，這也意味着一個純函數對於同樣的參數總是返回同樣的結果

web前端面試題含答案