2021年前端崗位面試題 “二”（本人親測）

今年4月份在南京面試 大概三周的時間 面試了二十幾家大 中 小型企業 收集了各種面試題
希望給還在面試的兄弟們一點幫助 共三套

null和undefined的區別
null :表示無值;
undefined : 表示一個未宣告的變數，或已宣告但沒有賦值的變數，或一個并不存在的物件屬性，
null表示"沒有物件"，即該處不應該有值，
undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義，

http協議
http是一個基于請求回應模式的無狀態的應用層的協議，

http協議特點，
支持客戶服務器模式
簡單快速靈活無連接無狀態，

VUE組件怎么封裝
vue.extend（）方法創建組件
vue.component（）注冊組件
若子組件需要資料，可以在props中接受定義
子傳父，用$emit（）方法

呼叫組件
只需要在呼叫組件的地方寫上組件名字的標簽即可

v-for和v-if優先級
v-for優于v-if

路由傳參的兩種方式
params
query

key的作用
更高效的更新虛擬Dom
另外在vue中相同的標簽元素的過渡切換時使用 可以讓vue區分它們
還可以管理可復用的元素 減少不必要的渲染

js本身是弱型別語言
按照型別分是沒有分類的
但是資料本身是有的
string字串
number數值
boolean布爾
undefined
null（只有給物件賦值為null時物件才會為null）
function

HTML的標準模式與怪異模式
怪異模式
就是 box-sizing width= padding+border+content 這首先是ie搞得 叫怪異盒模型...

存盤方式
1.localstorage本地存盤
2.sessionstorage本地存盤
3.application cache 離線快取
4.web sql 關系資料庫，通過sql陳述句訪問
5.indexedDB 索引資料庫

本地存盤
cookie
localStorage
sessionStorage

路由守衛
全域守衛
組件內守衛
路由獨享守衛

v-show和v-if的區別
共同點：都能控制元素的顯示和隱藏

不同點：v-show:嚴格意義上說“條件隱藏”，瀏覽器首先不管三七二十一，把HTML元素先渲染起來，符合條件就顯示，不符合條件display就為none，不顯示，但是元素還在那，，

v-if是真正意義上的“條件渲染”，瀏覽器先判斷符不符合條件，符合了再渲染，否則不渲染DOM，瀏覽器中找不到這個DOM，

v-show先渲染再判斷
v-if先判斷再渲染

組件通訊
父子同步：.sync
父傳子：props
子傳父：$emit
兄弟組件傳值：
1.第一種屬于比較麻煩的方法，可以將值先傳給父組件，再通過父組件傳值給子組件的傳值方式傳遞給另一個組件
2.可以使用$bus方法
創建一個bus檔案夾，在檔案夾中新建， index.js檔案 在main.js中參考 在方法中通過
this.$bus.$emit將值放入setDataToBrather中
通過$on將值取出

vue有哪些組件
router-link
router-view
component
transition
transition-group
keep-alive
slot

vue的兩大特點
回應式編程、組件化

vue是什么
是一個js庫

為什么用vue
輕量級框架 簡單易學 運行速度快
是單頁面應用 使得頁面區域重繪 不用每次跳轉頁面都要求所有的資料和dom
這樣大大加快了訪問速度和提升用戶體驗
而且他的第三方ui庫很多 節省開發時間

vue優點
能夠把頁面抽象成多個相對獨立的模塊
實作代碼重用，提高開發效率和代碼質量
使得代碼容易維護

css怎么讓div居中
定位（父子容器）
在css中設定寬高，將margin屬性設定為
0 auto，可實作居中效果

雙向系結
v-model
什么是雙向系結
首先我們先從單項系結切入
就是把model系結到view
當我們用JavaScript代碼更新model時
view就會自動更新
而雙向系結就是在此基礎上
用戶更新了view，model的資料也會自動更新
這種情況就是雙向系結

什么是html
一種超文本標記語言

什么是css
css是指層疊樣式表

$nextTick是什么
是用來知道什么時候Dom更新完成的
在下次 DOM 更新回圈結束之后執行延遲回呼，在修改資料之后立即使用這個方法，獲取更新后的 DOM，

axios互動 呼叫API
先安裝axios插件
然后對插件進行簡單的封裝
然后使用axios中的get post等方法進行介面訪問
然后把axios物件寫入到vue中的prototype中
方便以后使用

ajax優缺點
優：頁面無重繪，用戶體驗好
使用異步方式與服務器通信，具有更加迅速的回應能力
缺：不支持瀏覽器back按鈕
不容易除錯
對搜索引擎的支持較弱
破壞了程式的例外機制

html的渲染規則
決議html
構建dom
dom與css樣式進行附著構造
還有布局和繪制

css的隱藏方式有哪幾種
visibility：hidden
opacity：0
display：none

display屬性
block
inline
inline-block
none

閉包
在JavaScript語言中 只有函式中的子函式才能參考函式中的變數 簡單來說 閉包就是函式中的函式 是函式內外部鏈接的橋梁
可以讀取函式中的變數 另一個是將函式中的變數值存盤于記憶體中

虛擬 DOM 到底是什么，說簡單點，就是一個普通的 JavaScript 物件，包含了 tag、props、children 三個屬性，

在Vue中computed和watch有什么區別
從屬性名上，computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值，watch是去監聽一個值的變化，然后執行相對應的函式，

同步和異步區別
同步，是所有的操作都做完，才回傳給用戶結果，即寫完資料庫之后，在相應用戶，用戶體驗不好，
異步，不用等所有操作等做完，就相應用戶請求，即先相應用戶請求，然后慢慢去寫資料庫，用戶體驗較好，

get和post區別

1、url可見性：
get，引數url可見；
post，url引數不可見
2、資料傳輸上：
get，通過拼接url進行傳遞引數；
post，通過body體傳輸引數
3、快取性：
get請求是可以快取的
post請求不可以快取
4、后退頁面的反應
get請求頁面后退時，不產生影響
post請求頁面后退時，會重新提交請求
5、傳輸資料的大小
get一般傳輸資料大小不超過2k-4k（根據瀏覽器不同，限制不一樣，但相差不大）
post請求傳輸資料的大小根據php.ini 組態檔設定，也可以無限大，
6、安全性
這個也是最不好分析的，原則上post肯定要比get安全，

箭頭nim函式

箭頭函式this是靜態的，
箭頭函式內的this指向上層物件；始終指向函式宣告時所在作用域下的this的值

普通函式內的this指向呼叫其函式的物件

路由傳參（重點了解一下）
params
query

路由模式
同步異步
圓形
border-radius屬性可以向div元素添加圓角邊框，

獲取用戶openid

javascript
==表示相等（值相等）
===表示恒等（型別和值都相等）

JavaScript區分大小寫
第一個字符必須是字母、下劃線、$

typeof可以上用戶知道變數是什么型別

宣告函式用function
需要回傳 用return

宣告陣列
var arr = new Array( );
或者用 [ 1,2,3,4,5,6 ]

水平居中
inline、inline-block元素水平居中
在父級元素上設定taxt-aling：center
還可以用margin：0 auto
還可以用flex布局 justify-content：center

html標準模式（又稱嚴禁模式）
瀏覽器按照最新標準進行決議
html兼容模式
會以向后兼容的方式來模擬老實瀏覽器的行為

圖片格式：gif、png

CSS3新增屬性
邊框屬性
border-color（邊框顏色）
border-image（圖片邊框）
border-radius（邊框圓角）
border-shadow（邊框陰影）

影片效果 transform
過渡效果 transition
自動換行word-wrap

選擇器
基本選擇器
屬性選擇器 element[......]
偽類選擇器(:hover :active)
nth選擇器(nth-child(n), nth-last-child(n)...)

html5新增特性
語意化標簽（<header> <nav>...）
SVG繪圖
繪圖canvas
音頻、視頻
本地存盤：
local Storage 長期存盤 瀏覽器關閉資料不丟失
sessionStorage 瀏覽器關閉資料自動洗掉

ES6新特性
let & const 用于生命變數
模板字串 ``反引號 可以直接進行變數拼接
箭頭函式
Map集合
promis建構式用于封裝異步操作
并且可以回去其結果

ES6允許給函式引數賦初始值

這里是面試一：面試題“一”???????

//禁止轉載 轉載給我說一聲 俺是有脾氣的