㈠ VUE3前端開發入門系列教程五：Nginx+ThinkJS後端無縫接入
## vite打包：會自動編譯，生成dist文件夾
## thinkjs配置: src/config/router.js
## nginx配置
-----
在vue前端訪問後端時直接使用ThinkJS的API：/api/...
㈡ 2021 web面試題常見vue之一 $nextTick 05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>點擊button顯示input框後自動聚焦</h3>
<button @click="show">點擊顯示</button>
<input ref="xx" type="text" v-show="flag">
</div>
<script>
var app=new Vue({
el:'#app',
data() {
return {
// 函數返回因為每次都是新作用域,不會造成引用組件時影響一個個新組件
//應該也聽過每一個頁面都是,router-view下的新組件說法
flag:false
}
},
methods: {
show() {
this.flag=true
// 錯誤示範
// this. nextTick(()=>{
// 不知道ref就列印看看
this.$refs.xx.focus()
})
}
},
})
</script>
</body>
</html>
㈢ 2021 web面試題常見之一vue computed和watch 03
vue中必問，回答不清楚說明不了解，也會在日常中寫錯。
監聽除去new關鍵詞寫時換成newVal外，監聽值變化，做業務操作。
computed可以緩存結果，依賴a和b返回新c，具有返回數值。當需要新值c，並且依賴其餘時要第一個想到。
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>法外狂徒張三</h3>
姓名：<input type="text" v-model="name">
諢號：<input type="text" v-model="txt">
<p>
顯示： {{tip}}
</p>
ps：面試官問：watch不能實現computed的功能?
<p>
<input type="radio" name="a" value="不能" v-model="res">不能
<input type="radio" name="a" value="能" v-model="res">能
</p>
<p style="color:red" v-show="res==='不能'">沒理解！！</p>
<p style="color:green" v-show="res==='能'">理解！！</p>
</div>
<script>
// 初始化vue
var app=new Vue({
el:'#app',
data() {
return {
res:'',//結果
name:'',
txt:'',
tip:''
}
},
computed: {
// 函數才有return
// 思考能不能直接tip() ? 而且不刪除return中tip為什麼會報錯
},
watch:{
name:function(newVal,oldVal) {
console.log(1);
this.tip=this.txt+newVal
},
txt:function(newVal,odlVal) {
this.tip=newVal+this.name
}
}
})
</script>
</body>
</html>
···
㈣ Web 前端面試
博客園整理了一下，有好的面試題歡迎大家發在評論區喲
1. 閉包
2. 數組去重
3. 原型和原型鏈
4. call,apply,bind三者的區別？
5. 請介紹常見的 HTTP 狀態碼(至少五個)
6. 深淺拷貝
7. 實現(5).add(3).minus(2)輸出6
8. null和undefined區別
9. MVC和MVVC?
10. Vue生命周期
11. Vue數據雙向綁定原理
12. Vue組件傳參
13. 說說各瀏覽器存在的兼容問題
14. router和route
15. active-class屬於Vue哪一個moles,有什麼作用
16. v-if和v-show
17. computed和watch有什麼區別
18.Vue 組件中 data 為什麼必須是函數
19. vue中子組件調用父組件的方法
20. vue中 keep-alive 組件的作用
21. vue中如何編寫可復用的組件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎麼自定義指令
25. Vue 中怎麼自定義過濾器
26. NextTick 是做什麼的
27. Vue 組件 data 為什麼必須是函數
28. 計算屬性computed 和事件 methods 有什麼區別
29. scoped（死夠撲的）
30. vue如何獲取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什麼?使用和用途？
34.css樣式局部化，如何讓css只在當前組件起作用?scss和stytus樣式穿透
閉包指有權訪問另一個函數中變數的函數，
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站視頻： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126
https://www.jianshu.com/p/9c3547450a52
https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC
都是用來改變this指向的
call和apply都是function原型上的方法，每一個函數作為function的實例都可以調用這兩個方法，而這兩個方法都是用來改變this指向的
一般情況下this指向其調用者（）
fun.call(thisArg,arg1,ary2,...)
主要作用可以實現繼承
調用函數，改變this指向
繼承
fun.apply(thisArg,[argsArray])
作用：調用函數，改變函數內部this指向
參數必須是數組
apply主要應用於藉助數學對象等
bind()方法不會調用函數，但可以改變函數內部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函數運行時指定的this值
arg1，arg2:傳遞的其他參數
返回由指定的this值和初始化參數改造的原函數拷貝
call的性能要比apply好一些，尤其當傳遞參數超過3個，後期開發可多用call
時間測試
狀態碼是由 3 位數組成，第一個數字定義了響應的類別，且有五種可能取值:
1xx：指示信息–表示請求已接收，繼續處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進行更進一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx：伺服器端錯誤–伺服器未能實現合法的請求。
阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
MVC 是後端中的概念
MVVC中 是前端概念
最終實現V和M數據的同步，因此開發者只需關注業務邏輯，不需要手動操作Dom，mvvm是vue的核心
這兩個不同的結構可以看出兩者的區別，他們的一些屬性是不同的。
active-class 屬於vue-router的樣式方法
當routerlink標簽被點擊時將會應用這個樣式
使用有兩種方法
routerLink標簽內使用
在使用時會有一個Bug
首頁的active會一直被應用
解決辦法
為了解決上面的問題，還需加入一個屬性exact,類似也有兩種方式：
在router-link中寫入exact
在路由js文件,配置active-class
還可以不用exact這種方法去解決，例如
首頁
路由中加入重定向
computed
computed是計算屬性，也就是計算值，它更多用於計算值的場景
computed具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算
computed適用於計算比較消耗性能的計算場景
watch
watch更多的是[觀察]的作用，類似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操作
無緩存性，頁面重新渲染時值不變化也會執行
小結
當我們要進行數值計算，而且依賴於其他數據，那麼把這個數據設計為computed
如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。
去這里看一下blog.csdn.net
vue-router 默認使用 hash 模式，所以在路由載入的時候，項目中的 url 會自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 404 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面
具體參考 官方API
參考 官方文檔-自定義指令
過濾器也同樣接受全局注冊和局部注冊
具體可參考官方文檔 深入響應式原理
我們可以將同一函數定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的
不同點：
讓css只在當前組件中起作用
㈤ 47道基礎的VueJS面試題(附答案)
1、什麼是MVVM框架？它適用於哪些場景？
MVVM框架是一個 Model-View-View Model框架，其中 ViewModel連接模型Model）和視圖（View）。
在數據操作比較多的場景中，MVVM框架更合適，有助於通過操作數據渲染頁面。
2、active- class是哪個組件的屬性？
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動態路由？
在靜態路由名稱前面添加冒號，例如，設置id動態路由參數，為路由對象的path屬性設置/:id。
4、如何獲取傳過來的動態參數？
在組件中，使用$router對象的 params.id，即 $route.params.id 。
5、vue- router有哪幾種導航鉤子？
有3種。
第一種是全局導航鉤子：router.beforeEach(to,from,next)。作用是跳轉前進行判斷攔截。
第二種是組件內的鉤子。
第三種是單獨路由獨享組件。
6、mint-ui是什麼？如何使用？
它是基於 Vue.js的前端組件庫。用npm安裝，然後通過 import導入樣式和JavaScript代碼。vue.use(mintUi)用於實現全局引入， import {Toast} from ' mint-ui'用於在單個組件局部引入。
7、V-model是什麼？有什麼作用？
v- model是 Vue. js中的一條指令，可以實現數據的雙向綁定。
8、Vue.js中標簽如何綁定事件？
綁定事件有兩種方式。
第一種，通過v-on指令， 。
第二種，通過@語法糖， input@ click= doLog()/>。
9、vuex是什麼？如何使用？在哪種功能場景中使用它？
vuex是針對 Vue. js框架實現的狀態管理系統。
為了使用vuex，要引入 store，並注入Vue.js組件中，在組件內部即可通過$ ostore訪問 store對象。
使用場景包括：在單頁應用中，用於組件之間的通信，例如音樂播放、登錄狀態管理、加入購物車等。
10、如何實現自定義指令？它有哪些鉤子函數？還有哪些鉤子函數參數？
自定義指令包括以下兩種。
它有如下鉤子函數。
鉤子函數的參數如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關指令及其用法如下。
12、Vue-router是什麼？它有哪些組件？
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導航鉤子有哪些？它們有哪些參數？
導航鉤子又稱導航守衛，又分為全局鉤子、單個路由獨享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個路由獨享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數。
14、Vue.js的雙向數據綁定原理是什麼？
具體步驟如下。
（1）對需要觀察的數據對象進行遞歸遍歷，包括子屬性對象的屬性，設置set和get特性方法。當給這個對象的某個值賦值時，會觸發綁定的set特性方法，於是就能監聽到數據變化。
（4）MVVM是數據綁定的入口，整合了 Observer、 Compile和 Watcher三者，通過Observer來監聽自己的 model數據變化，通過 Compile來解析編譯模板指令，最終利用Watcher搭起 Observer和 Compile之間的通信橋梁，達到數據變化通知視圖更新的效果。利用視圖交互，變化更新數據 model變更的雙向綁定效果。
15、請詳細說明你對Vue.js生命周期的理解。
總共分為8個階段，分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當使用組件的kep- alive功能時，增加以下兩個周期。
Vue2.5.0版本新增了一個周期鉤子：ErrorCaptured，當捕獲一個來自子孫組件的錯誤時調用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個項目的開發效率，能夠把頁面抽象成多個相對獨立的模塊，解決了傳統項目開發中效率低、難維護、復用性等問題。
使用Vue.extend方法創建一個組件，使用Vue.component方法注冊組件。子組件需要數據，可以在 props中接收數據。而子組件修改妤數據後，若想把數據傳遞給父組件，可以採用emit方法。
17、你是怎樣認識vuex的？
vuex可以理解為一種開發模式或框架。它是對 Vue. js框架數據層面的擴展。通過狀態（數據源）集中管理驅動組件的變化。應用的狀態集中放在 store中。改變狀態的方式是提交 mutations，這是個同步的事務。非同步邏輯應該封裝在 action中。
18、Vue- loader是什麼？它的用途有哪些？
它是解析.vue文件的一個載入器，可以將 template/js/style轉換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法， style樣式可以應用scss或less, template可以添加jade語法等。
19、請說出vue.cli項目的src目錄中每個文件夾和文件的用法。
assets文件夾存放靜態資源；components存放組件；router定義路由相關的配置；view是視圖；app. vue是一個應用主組件；main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件？在使用過程中你遇到過哪些問題？
具體步驟如下。
（1）在 components目錄中新建組件文件，腳本一定要導出暴露的介面。
（2）導入需要用到的頁面（組件）。
（3）將導入的組件注入uejs的子組件的 components屬性中。
（4）在 template的視圖中使用自定義組件。
21、談談你對vue.js的 template編譯的理解。
簡而言之，就是首先轉化成AST（ Abstract Syntax Tree，抽象語法樹），即將源代碼語法結構抽象成樹狀表現形式，然後通過 render函數進行渲染，並返回VNode（ Vue. js的虛擬DOM節點）。
詳細步驟如下。
（1）通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值， createCompiler用來創建編譯器。另外， compile還負責合並 option。
（2）AST會經過 generate（將AST轉化成 render funtion字元串的過程）得到 render函數， render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節點，裡面有標簽名子節點、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數據驅動的， Vue. js實例化對象將DOM和數據進行綁定，一旦綁定，和數據將保持同步，每當數據發生變化，DOM也會隨著變化。
ViewModel是Vue.js的核心，它是 Vue.js的一個實例。Vue.js會針對某個HTML元素進行實例化，這個HTML元素可以是body，也可以是某個CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實現雙向綁定的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的數據隨之變化。Data Bindings會監聽 Model層的數據，當數據發生變化時，View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區別是什麼？
v-show與v-if都是條件渲染指令。不同的是，無論v-show的值為true或 false，元素都會存在於HTML頁面中；而只有當v-if的值為true時，元素才會存在於HTML頁面中。v-show指令是通過修改元素的 style屬性值實現的。
24、如何讓CSS只在當前組件中起作用？
在每一個Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內寫的CSS只對當前組件起作用，只需要在Style標簽添加Scoped屬性，即 。
25、如何創建vue.js組件？
在vue.js中，組件要先注冊，然後才能使用。具體代碼如下
26、如何實現路由嵌套？如何進行頁面跳轉？
路由嵌套會將其他組件渲染到該組件內，而不是使整個頁面跳轉到 router-view定義組件渲染的位置。要進行頁面跳轉，就要將頁面渲染到根組件內，可做如下配置。
首先，實例化根組件，在根組件中定義組件渲染容器。然後，掛載路由，當切換路由時，將會切換整個頁面。
27、ref屬性有什麼作用？
有時候，為了在組件內部可以直接訪問組件內部的一些元素，可以定義該屬性此時可以在組件內部通過this. $refs屬性，更快捷地訪問設置ref屬性的元素。這是一個原生的DOM元素，要使用原生 DOM API操作它們，例如以下代碼。
注意：在Ve2.0中，ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什麼？
Vue. js的目標是通過盡可能簡單的API實現響應式的數據綁定的組件開發。
29、描述vue.js的一些特性。
Vue.js有以下持性。
（1）MVVM模式。
數據模型（ Model）發生改變，視圖（View）監聽到變化，也同步改變；視圖（View）發生改變，數據模型（ Model）監聽到改變，也同步改變。
使用MVVM模式有幾大好處。
（2）組件化開發
（3）指令系統
（4）Vue2.0開始支持虛擬DOM。
但在Vue1.0中，操作的是真實DOM元素而不是虛擬DOM，虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點。
Vue. js有以下特點。
31、在vue.js中如何綁定事件？
通過在v-on後跟事件名稱=「事件回調函數( )」的語法綁定事件。事件回調函數的參數集合( )可有可無。如果存在參數集合( )，事件回調函數的參數需要主動傳遞，使用事件對象要傳遞 $event。當然，此時也可以傳遞一些其他自定義數據。如果沒有參數集合，此時事件回調函數有一個默認參數，就是事件對象。事件回調函數要定義在組件的 methods屬性中，作用域是 Vue. js實例化對象，因此在方法中，可以通過this使用 Vue. js中的數據以及方法，也可以通過@語法糖快速綁定事件，如@事件名稱=「事件回調函數( )」。
32、請說明 組件的作用。
當 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
keep-alive>是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現在父組件鏈中。
當在 內切換組件時，它的 activated和 deactivated這兩個生命周期鈞子函數將會執行。
33、axios是什麼？如何使用它？
axios是在vue2.0中用來替換 vue-resource.js插件的一個模塊，是一個請求後台的模。
用 npm install axios安裝 axios。基於 EMAScript 6 的 EMAScript Mole規范，通過 import關鍵字將 axios導入，並添加到 Vue. js類的原型中。這樣每個組件（包括vue.js實例化對象）都將繼承該方法對象。它定義了get、post等方法，可以發送get或者post請求。在then方法中注冊成功後的回調函數，通過箭頭函數的作用域特徵，可以直接訪問組件實例化對象，存儲返回的數據。
34、在 axios中，當調用 axios.post('api/user'）時進行的是什麼操作？
當調用post方法表示在發送post非同步請求。
35、sass是什麼？如何在ue中安裝和使用？
sass是一種CSS預編譯語言安裝和使用步驟如下。
（1）用npm安裝載入程序（ sass-loader、 css-loader等載入程序)。
（2）在 webpack. config. js中配置sass載入程序。
（3）在組件的 style標簽中加上lang屬性，例如lang="scss"。
36、如何在 Vue. js中循環插入圖片？
對「src」屬性插值將導致404請求錯誤。應使用 v-bind:src格式代替。
代碼如下：
㈥ web前端工程師需要掌握哪些技術
1、開發語言
HTML發展歷史有二十多年，歷經多次版本更新，HTML5和CSS3的出現又是一次革新。有些人認為前端開發要掌握的技能簡單，不就是網頁製作嘛。其實不然，web前端需要掌握的核心語言HTML+CSS+JavaScript，JavaScript作為最難的語言之一，許多編程高手也不敢妄自菲薄自封精通。由於JavaScript與html的差異性，以及靜態分開處理的一些好處。在大公司編寫靜態效果和動態效果往往是分開由不同的人完成的。小公司因為需要壓縮成本，就需要每個人會的越多越好，如果你嚮往項目經理發展，能懂一兩門後端語言，絕對是錦上添花。
2、瀏覽器兼容性
互聯網目前主流瀏覽器有IE6/7/8/9，Firefox，Chrome，Opera，Safari，遨遊，包括國內主流的搜狗，騰訊TT，360，the word等等；從內河上講主要有IE的，遨遊版IE，Safari，Firefox以及opera的，這些都是大家常見的，如果你身邊有老網蟲喜歡收藏瀏覽器，你翻翻他的硬碟，相信十幾款肯定是有的。每種內核對代碼的解析是不完全一樣的，即使同樣內核也可能存在很大差異，如IE和遨遊版IE。不說非主流的瀏覽器，就主流的瀏覽器，要做到完全兼容，也並非易事，需要長時間的積累和測試，需要前端開發工程師對前端端開發的熱愛和激情。
目前移動互聯網的發展趨勢也不容小覷，將慢慢占據互聯網的主要份額。移動互聯網最突出的好處是方便和及時，試想一下，走在某地風景很好，拍下來後自 動分享給各路好友，因此手機上的瀏覽器兼容也看刻不容緩，現在手機上的瀏覽器也是紛繁復雜，主流的UCWEB，safari，IE，3G門戶的，以及 symbian低端機的「殘缺兒童」，包括國外流行手機我們不知道的一些瀏覽器，更糟糕的是這些瀏覽器解析因為手機硬體的不同，每個瀏覽器得到的結果都是 完全不同的。
3.hack技術
由於不同的瀏覽器對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，這個時候就需要針對不同的瀏覽器寫不同的CSS，這個過程叫CSS hack。雖然我們寫代碼都要求按照標准，不寫hack代碼，但實際工作中為了兼容主流瀏覽器，hack代碼是免不了的，所以這也應該是每個前端開發人員 必備的技能。
4.業內標准
目前Web前端開發中提到最多的就是W3C標准，這是一系列標準的集合，代表了互聯網發展的方向，也代表了前端開發的一種信仰。寫的代碼都要100%通過標准驗證，為通過標准驗證而感到自豪，會有效推動互聯網的快速發展。
5.開發工具
目前比較流行的是Dreamweaver， 其曾經風靡一時，到現在也沒有退出歷史舞台，證明DW還是有很大優勢的，尤其是針對初學者，其強大的提示功能可以幫助我們很快的熟悉並掌握網頁布局，但現 在更提倡的是純手寫代碼，既體現技能方面的卓越，也可有效避免使用DW等工具產生的冗餘代碼。此外再掌握一些photoshop技能，即使沒有美工，也能 簡單處理一些圖像。
小結，掌握以上技能，可以說你是一個合格的前端開發人員，能夠參與到一個大的項目中，或者自己獨立寫出一個網頁。雖然這看起來和網頁製作設計差不多，從效果上來看，都是製作網頁的，但實際上，技術上所超出的已經是好幾個檔次的東西了。
㈦ 面試Web前端需要注意什麼會面試哪些問題
作為一名HTML5前端工程師，為了工作，為了就業我們免不了要參加各種各樣的面試。為此總結了面試前的注意事項：
第一：注意自己的儀容儀表
面試之前，一定要再次從頭到腳地將自己的儀容儀表檢查一遍。檢查時主要包括，自己的牙縫是不是還有食物殘渣，所以你需要就近找一個衛生間，如果沒有衛生間就近找一個角落也是可以的，但是切記一定不要在大庭廣眾之下。因此，為了給自己整理出著裝的時間請在約定時間前20分鍾到達。
第二：再次檢查面試時所需的資料是否都已帶全
這些資料主要包括：身份證明、學歷文憑證明、個人簡歷、以往作品等等，如果這些東西齊全之後，需要對這些資料做一個整理與排序。因為沒有哪個面試官希望看到面試者拿出一堆「莫名其妙」的東西塞給他，讓他自己再一頁一頁的翻找自己需要的內容，如果說這些資料在面試官手中不小心散落一地，結果可想而知。這樣的求職者在面試官眼中也一定不是一個讓人放心、有條不紊的員工。當然如果檢查時發現資料沒有帶全，也不要緊張。反而你要慶倖幸虧及時檢查，也有足夠的時間組織語言去向面試官解釋。
第三：面試之前將通信工具調成振動或關閉狀態
雖然說面試者與面試官之間是一個平等的關系，但畢竟你是去人家公司求職的，始終處於一個被動的狀態，所以最起碼的尊重還是要做到的。曾經有調查顯示，對於面試過程中接電話或是被電話打斷的求職者，會被HR減分。
第四：等候面試官時，仔細觀察多了解面試公司
在等候面試官時，可以暗自觀察一下公司的大體情況比如員工的著裝風格、公司的LOGO或是貼在牆上的企業文化、公司的環境等等，一來可以在接下來的面試過程中表現出自己對公司的認同感，二來也可以讓自己對求職公司多些了解，以確定是否要接受這里的工作。如果你身邊有公司的資料宣傳架，不妨取一本翻看一下，也會增加HR對你的好感。
第五：放鬆心情，保持自信
面試時一定要保持一定的自信，這樣也會給面試官留下很好的印象。面試只是你步入工作的第一步，即便是失敗了那也是人生重要的經歷。失敗是為了更好的迎接下一個挑戰。
作為一名web前端工程師千萬不要覺得懂技術面試就能萬事大吉了，像以上五點細節性的東西也是一定要掌握的。
面試題系列：
網頁鏈接
㈧ web前端面試官會問什麼
01-javascript作用域與預解析
什麼是預解析?
分兩步執行：
第一步：(代碼還沒有執行。預覽頁面之前，寫完之後)
找程序中var關鍵字，如果找到了提前給var定義的變數賦值undefined
找程序中的普通函數，如果找到了，函數提升，將整個函數賦值給函數名。
如果找的var的名字和函數名字相同，函數優先。
第二步: 逐行解析代碼。按照上下順序。如果碰到函數定義，忽略。
重點：函數內部同樣適用於js預解析。
02-前端如何處理跨域
1、為什麼會出現跨域問題
同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和埠號（port）。
03-什麼是閉包？如何理解
閉包（closure）是javascript的一大難點，也是它的特色。很多高級應用都要依靠閉包來實現。
要理解閉包，首先要理解javascript的全局變數和局部變數。
javascript語言的特別之處就在於：函數內部可以直接讀取全局變數，但是在函數外部無法讀取函數內部的局部變數。
㈨ Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。