JS 篇

閉包

定義：函數內部定義函數，內部函數持有外部函數參數

作用

讀取函數內部的變量
讓這些變量的值始終保持在內存中。不會再f1調用后被自動清除。
方便調用上下文的局部變量。利于代碼封裝。

副作用：內存管理，可能會內存溢出

原因：f1是f2的父函數，f2被賦給了一個全局變量，f2始終存在內存中，f2的存在依賴f1，因此f1也始終存在內存中，不會在調用結束

內存溢出的常見方式

遞歸調用缺乏退出條件
vue、react 中定時器和計時器未消除，習慣在生命周期銷毀階段去清空；
閉包使用過程中未及時銷毀，fn=null 來清除變量的引用；
dom 操作完成后綁定事件未銷毀；
dom 操作中的事件委托未銷毀；

參考：https://blog.csdn.net/qappleh/article/details/80337630

防抖與節流

防抖是將多次執行變為最后一次執行；
節流是將多次執行變為每隔一段時間執行
實現函數節流我們主要有兩種方法：時間戳和定時器
參考：https://www.cnblogs.com/momo798/p/9177767.html

請求的取消

$ajax 取消的ajax的關鍵是調用XHR對象的.abort()方法
axios axios.CancelToken api 調用
如何自己實現一個ajax請求（要點：步驟、狀態、參數的處理、響應結果的處理、錯誤的處理）
參考：https://www.cnblogs.com/qing-5/p/11368009.html

WebSocket 與http

HTTP 協議通信只能由客戶端發起，通信是單向的，如果需要持續通信，常規通過輪詢的方式發起請求；效率低，占用通信；
WebSocket是雙向通信；服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息

其他特點包括：

建立在 TCP 協議之上，服務器端的實現比較容易。
與 HTTP 協議有著良好的兼容性。默認端口也是80和443，并且握手階段采用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。
數據格式比較輕量，性能開銷小，通信高效。
可以發送文本，也可以發送二進制數據。
沒有同源限制，客戶端可以與任意服務器通信。
協議標識符是ws（如果加密，則為wss），服務器網址就是 URL。

websocket的api與心跳機制（重要）

參考：http://www.lxweimin.com/p/5297732db7f2

flash 即將過期，有什么代替方案？

WebRTC 技術的實現了解一下；
- 參考： https://segmentfault.com/a/1190000005864228

Function的命名區別

    var a=function(){ console.log(1) } 與 function  a () { console.log(2)} 的區別

var a=function 函數表達式，變量命名初始化在前，函數主體初始話在函數調用時才進行；所以必須在申明之后才能調用a()；
function a 函數申明，變量申明和函數主體初始話一開始就完成，所以可以在a 申明之前去調用；
當執行 a();輸出的是1

JS類型判斷的方法

typeof
instanceof
Object.prototype.toString.call()
constructor 判斷（比較常用）
參考：https://www.jb51.net/article/190286.htm

Promise 的實現原理

參考：http://liubin.org/promises-book/

常見問題

狀態 pedding、fulfilled、rejected 什么含義
promise 內部是如何捕獲錯誤的（catch的實現原理）；
finnaly 的作用是什么（實現原理）
resolve 與 reject 的作用是什么；
多個 promise 鏈式調用中，如何執行( 什么情況會then,什么時候會catch )

    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次請求成功, 這是返回的數據:', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次請求成功, 這是返回的數據:', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次請求成功, 這是返回的數據:', data3);
    }).catch(function(error) {
        //用catch捕捉前面的錯誤
        console.log('sorry, 請求失敗了, 這是失敗信息:', error);
    });

參考： https://www.cnblogs.com/sweet-ice/p/10582925.html
promise.race()
參考 http://www.lxweimin.com/p/af443ae22f37
promise.all()
參考： https://blog.csdn.net/weixin_36869329/article/details/82841374

async 函數

參考： https://es6.ruanyifeng.com/#docs/async

實現異步改為同步的方式有哪些

async await
Generator 與 yield* 實現
常用的callback 在異步中回調

ES6 新增特性有哪些

常見問題

var、let、const 的區別（涉及到變量提升、暫時性死區概念）
https://es6.ruanyifeng.com/#docs/let
原始數據類型和引用數據類型有哪些？
https://blog.csdn.net/yehuaner33/article/details/85179508
如何數組去重？
對象深拷貝與淺拷貝有哪些區別，及如何實現？
js中實現異步加載的方式有哪些？

https://www.zhangshengrong.com/p/noXQoplPaG/
require與import 的區別？

https://www.cnblogs.com/myfirstboke/p/10563597.html
Array 與Object 新增的方法；
Set 與Map 數據結構；
Symbol 數據結構；
Class 的基本語法

參考： https://es6.ruanyifeng.com/#docs/class
- extends 繼承的實現
- super()與construction(){} 的作用；
- static 關鍵字的作用；

簡述打開一個新頁面時，瀏覽器如何實現頁面渲染

從js腳本、dom樹、樣式表三個方面回答

對象創建的方式有哪些，有什么區別（對象原型鏈問題）

第一種： 字面量
var Obj1 = {name:”o1”};
var Obj2 = new Object({name:”o2”});
// var a = {} 其實是 var a = new Object() 的語法糖
// var a = [] 其實是 var a = new Array() 的語法糖
//所以上面 Obj1 與 Obj2 的申明方式等價

第二種：構造函數
var M = function (name) { this.name = name };
var Obj3 = new M(“o3”) ;

第三種：Object.create（繼承的原型對象）
var p = {name:”o4”}
var Obj4 = Object.create(p);

參考：https://blog.csdn.net/m0_37585915/article/details/80843945?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

大體積文件上傳（分片上傳的實現）

參考：https://blog.csdn.net/u013611548/article/details/82850467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

敏捷開發模式（了解其概念）

參考：http://www.ruanyifeng.com/blog/2019/03/agile-development.html

CSS 篇

css 權重問題

!important>行內樣式>id>class,偽類選擇，屬性選擇器>>標簽>繼承》通配符
link>@important

css @import 與link 引入有什么不同，哪種方式更優？

參考鏈接：https://www.cnblogs.com/my--sunshine/p/6872224.html

less 與scss 的使用

常見問題

兩種中變量如何定義？
如何實現樣式的復用（混合）？

回流與重繪的概念

https://www.cnblogs.com/mdr86553/p/12048742.html

常見問題：display:none與visiable:hidden 的區別

布局

如何實現居中

flex布局居中；
transform + translate；
margin:0 auto;
display:table ,借助于表格定位；
calc 計算居中；
text-aligin：center；
高度與行高相同；

Css 中的BFC及消除方式

https://www.cnblogs.com/chen-cong/p/7862832.html

如何實現一個三角形？

http://caibaojian.com/css-border-triangle.html

如何實現響應式布局？

第三方庫的布局實現，如bosstrap 12列布局，element 的24列布局；
@media 實現不同界面設備下的布局；
如何實現自適應布局
- 參考：https://www.cnblogs.com/yuanziwen/p/6926561.html

vm、rem、em 、px的區別

參考：https://www.cnblogs.com/anyw3c/p/anyw3ccc.html

在vue 移動端開發過程中，如何設置字體、文字為響應式

postcss-px-to-viewport 的配置
rem 的具體使用方式；
- 參考：http://www.lxweimin.com/p/691a569f7fe1

VUE 篇

實現原理；

vue實現數據雙向綁定主要是：采用數據劫持結合發布者-訂閱者模式的方式，通過Objct.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

參考：https://baijiahao.baidu.com/s?id=1614572521202569483&wfr=spider&for=pc

如何實現數據雙向綁定，簡述原理和具體實現方式？

參考：https://blog.csdn.net/yun_hou/article/details/86313212

vue的生命周期及先后順序

created、watch、computed、mounted 的先后順序（具體寫案例測試）；
父子組件間 vue 的生命周期如何執行？

如何全局注冊組件和過濾器？多個組件和過濾器如何注冊？

//全局過濾器統一導出
conset fuction  filter1(){} 
conset fuction  filter2(){} 
conset fuction  filter3(){} 
export {filter1,filter2,filter3}
//統一導入
import * as filters from '@/common/filters' 
//循環生成過濾器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})
//統一導入組件同理
import * as compontents from '@/common/compontents' 
//循環生成過濾器
Object.keys(compontents).forEach(key => {
    Vue.Compontent(key, compontents[key])
})

傳參方式

父傳子：props，ref 獲取子組件實例、slot 插槽實現、$children 獲取所有子組件實例
子傳父：$emit 向外分發、.async 修改父組件實例，
兄弟之間（全局）：vuex 狀態管理器、$bus 中間總線方式；
路由傳參；
vue 根節點設置全局變量；
本地存儲方式實現數據共享；
組件組合方式 : mixins 混合語法，extends 子組件實現構造、provide / inject （依賴注入）（參考 element-ui）；

頁面緩存keep-alive 的實現

include and exclude 的作用，鉤子函數 activated、deactivated 的作用；
如何實現 a、b、c 三個頁面，a->b頁面緩存，c->b頁面不緩存；

如何實現組件的強制刷新功能;

v-if 設置false；在$nextTick(_=>更改狀態變為true);
component 的is屬性，動態改變掛載組件名稱；
設置key值，vue通過檢查key值變化了自動刷新頁面；
調用foceUplate 的實例方法，強制刷新頁面；

vue管理平臺鑒權如何設置？

參考：https://www.cnblogs.com/zhengrunlin/p/8981017.html

菜單權限

1、常規系統設計分為菜單、角色、人員；
2、菜單和按鈕分配給角色;角色分配給人員；
3、用戶登錄時獲取角色對應的菜單樹和按鈕集合；通過遍歷菜單樹形成router樹；
4、調用路由addrouters api 動態添加在路由對象中；用戶菜單常規是按照路由表對應生成的；

按鈕權限

通常后臺返回的按鈕是存在于菜單樹下的；需要單獨遍歷成一個按鈕權限code集合；
通過自定義指令的形式來控制按鈕節點的生成與刪除
import Vue from 'vue';
import store from '@/vuex/store';
//權限按鈕指令
Vue.directive('has', {
    inserted: function(el, binding) {
        if(!store.state.permissionButton[binding.value]){
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})
//使用 add 權限碼判斷
<el-button v-has="'add'">新增<el-button/>

Token 的使用

一種前后臺權限驗證手段；通常在請求的header中進行添加；
當缺少或者過期后，請求會返回401狀態碼；需要重新獲取token或者重新登錄；
***特殊業務***
token過期后跳轉至登錄，重新授權獲取登錄和再回跳至之前過期頁面

//asios Response響應攔截
switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳轉到登錄頁面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//保持頁面地址
                    })
            }
//登錄
methods:{
    login(){
        let redirect=decodeURIComponent(this.$router.query.redirect);
        if(redirect){
            this.$router.push(redirect);
            return 
        }
        this.$router.push('/login')
    }
}

Vue 語法忽略盲區（vue、vue-router、vuex、vue-cli、webpack）

watch 與computed 的區別?

watch 如何實現對對象的監聽？
watch 中deep:true 的作用是什么？（案例測試）
watch 中immediate :true 的作用是什么？（案例測試）

如何在methods 中使用filter的方法？

參考：https://blog.csdn.net/qq_35430000/article/details/92795438

修飾符有哪些？

.async 修飾符的作用及實現原理；

指令有哪些以及如何實現自定義指令?

參考：https://cn.vuejs.org/v2/guide/custom-directive.html

on-clock 的使用方式；

<transition> 的使用

參考：https://cn.vuejs.org/v2/api/#transition

虛擬dom createElement（）與JSX 寫法；

參考：https://cn.vuejs.org/v2/guide/render-function.html

vue-router 的使用

全局路由和組件路由分別有哪些？
命名路由的使用
- 參考：https://www.cnblogs.com/qdhxhz/p/9011797.html
如何實現組件的按需加載？

簡述 vuex 的構成及各部分功能（state、action、getter、mutation、module、plugins（很少用到））

vuex 提供的Map方法有哪些？
vuex 在常規業務中處理哪些數據？
- 登錄信息、baseCode（碼表）、路由信息、菜單信息等全局狀態；
如何實現數據的持久化（頁面刷新，如何保持store倉庫數據不變）？
- 利用localstorge 或者session 在瀏覽器中做緩存；
- 借助于vuex-persist 控件，實現store持久化；
- 參考：https://www.cnblogs.com/wang-sai-sai/p/11076833.html

你還了解哪些狀態管理的解決方案

早期的flux;
react中官方推薦使用 redux；
vuex中官方推薦使用 vuex；
mobx，mobx-vue與mobx-react（mobx-*在react中使用較多,推薦深入學習下）；
Rematch（很少用到）
++自行百度搜索查看原理++

solt 語法的具體實現？

vue-router 前置鉤子函數中next（）有哪些用法？

簡述webpack 的實現原理（基本構成、流程概括）？

參考：http://www.lxweimin.com/p/8dd5885bfb66

webpack 中plugin與loader 的區別？

參考：https://www.cnblogs.com/tangjiao/p/10429645.html

vue 中v-for 在遍歷數組和對象時，循環參數（item、index、value、name、index）代表什么？

//data 
object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
 items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
//循環數組
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>    
//循環對象
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-for 中添加key的作用是什么？

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素；
參考：https://cn.vuejs.org/v2/api/#key

v-if 與v-show 的區別及在哪些情況下使用？

參考：http://www.lxweimin.com/p/7af8554d8f08

$set( )、$ nextTick( ) 的作用是什么？

vue3 與 vue2 相比有哪些改動？

原理及api的變化兩方面闡述
- Object.defineProperty -----> Proxy;
- Data 、Method、 LifeCycle、 Computed、 Components
- 參數：http://www.lxweimin.com/p/b1fb5d549fcd

Vue element-ui 鍵盤回車事件表單自動提交造成頁面刷新問題（使用element-ui 有沒實際的經驗）

參考：https://weiku.co/article/297/

項目搭建做哪些工作？（結合實際來說）

需求了解、原型圖、設計圖；
vue-cli改造（環境配置、常用css、js等腳本文件編寫）；
請求封裝、路由設置、組件封裝、服務部署（打包構建）；

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

前端面試概要（Vue開發）

前端面試概要（Vue開發）

JS 篇

閉包

內存溢出的常見方式

防抖與節流

請求的取消

WebSocket 與http

websocket的api與心跳機制（重要）

flash 即將過期，有什么代替方案？

Function的命名區別

JS類型判斷的方法

Promise 的實現原理

async 函數

實現異步改為同步的方式有哪些

ES6 新增特性有哪些

簡述打開一個新頁面時，瀏覽器如何實現頁面渲染

HTTP 三次握手簡述

https 為什么是安全的（http與https對比著說）？

JS 繼承與原型、原型鏈

this指向問題

對象創建的方式有哪些，有什么區別（對象原型鏈問題）

大體積文件上傳（分片上傳的實現）

敏捷開發模式（了解其概念）

CSS 篇

css 權重問題

css @import 與link 引入有什么不同，哪種方式更優？

less 與scss 的使用

回流與重繪的概念

布局

VUE 篇

實現原理；

傳參方式

頁面緩存keep-alive 的實現

如何實現組件的強制刷新功能;

vue管理平臺鑒權如何設置？

Vue 語法忽略盲區（vue、vue-router、vuex、vue-cli、webpack）

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

前端面試概要（Vue開發）

JS 篇

閉包

內存溢出的常見方式

防抖與節流

請求的取消

WebSocket 與http

websocket的api與 心跳機制（重要）

flash 即將過期，有什么代替方案？

Function的命名區別

JS類型判斷的方法

Promise 的實現原理

async 函數

實現異步改為同步的方式有哪些

ES6 新增特性有哪些

簡述打開一個新頁面時，瀏覽器如何實現頁面渲染

HTTP 三次握手簡述

https 為什么是安全的（http與https對比著說）？

JS 繼承與原型、原型鏈

this指向問題

對象創建的方式有哪些，有什么區別（對象原型鏈問題）

大體積文件上傳（分片上傳的實現）

敏捷開發模式（了解其概念）

CSS 篇

css 權重問題

css @import 與link 引入有什么不同，哪種方式更優？

less 與scss 的使用

回流與重繪的概念

布局

VUE 篇

實現原理；

傳參方式

頁面緩存keep-alive 的實現

如何實現組件的強制刷新功能;

vue管理平臺鑒權如何設置？

Vue 語法忽略盲區（vue、vue-router、vuex、vue-cli、webpack）

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

websocket的api與心跳機制（重要）