1.HTML&CSS：
????flex布局，垂直居中，清除浮動(dòng)，BFC，三欄布局，兩欄布局，動(dòng)畫，盒模型，h5新特性
2.javaScript：
????繼承，原型鏈，this指向，設(shè)計(jì)模式，call，apply，bind，new實(shí)現(xiàn)，防抖截流，
????es6新特性
????ecent，loop，promise使用及實(shí)現(xiàn)
????pomise并行執(zhí)行和順序執(zhí)行
????閉包，垃圾回收和內(nèi)存泄漏
? ? 深淺拷貝
????數(shù)組方法，亂序，排序，數(shù)組扁平化
????事件委托，事件監(jiān)聽，事件模型
3.Vue：
? ? 1.雙向綁定原理
? ? vue2 Object.defineProperty get劫持 set改變 ，有一個(gè)弊端就是無法監(jiān)聽到數(shù)組內(nèi)部數(shù)據(jù)的變化（當(dāng)然也可以通過arr=arr.concat([])）
? ? vue3 Es6的語法Proxy
? ? 2.vue computed原理
????你給 computed 設(shè)置的 get 和 set 函數(shù)，會(huì)跟 Object.defineProperty 關(guān)聯(lián)起來，所以 Vue 能捕捉到 讀取computed 和 賦值computed 的操作
????讀取computed 時(shí)，會(huì)執(zhí)行你設(shè)置的 get 函數(shù)，但是并沒有這么簡(jiǎn)單，因?yàn)檫€有一層緩存的操作賦值 computed 時(shí)，會(huì)執(zhí)行你設(shè)置的 set 函數(shù)
? ? 這個(gè)就比較簡(jiǎn)單，會(huì)直接把 set 賦值給 Object.defineProperty - set
? ? 3.vue編譯器結(jié)構(gòu)圖
? ? 4.vue的生命周期
? ? 5.vue的組件通訊
? ? ? ? ? ? 不相關(guān)的兩個(gè)組件之間的通訊
? ? ? ? ? ? ? ? 1.在main.js中掛載Vue.prototype.$EventBus = new Vue()
? ? ? ? ? ? ? ? 2.A組件
```
?<template>
? ? ????????????????<div class="wrap">
? ? ? ? ????????????????<div>我是組件A</div>
? ? ? ? ????????????????<button @click="sendMsg">發(fā)送</button>
? ? ????????????????</div>
? ? ? ? ? ? ? ? ?</template>
????????????????<script>
? ? ????????????export default {
? ? ? ????????????????? name: "A",
? ? ? ? ????????????????methods:{
? ? ? ? ? ? ? ? ? ? ? ? ????sendMsg(){
? ? ? ? ? ? ? ???????????????? ????this.$EventBus.$emit('sendMsg',"這是組件A發(fā)送的消息！")
? ? ? ? ? ? ? ? ? ? ? ? ?????}
? ? ? ? ????????????????}
? ? ????????????????}
????????????????</script>
```
? ? ? ? ? ? 3.B組件
```
<template>
? ? ????????????<div>
? ? ? ? ????????????<div>我是組件B</div>
? ? ????????????</div>
????????????</template>
????????????<script>
? ????????????? export default {
? ? ? ? ????????????name: "B",
? ? ? ????????????? mounted(){
? ? ? ? ? ? ????????????this.$EventBus.$on('sendMsg',(msg)=>{
? ? ? ? ? ? ? ????????????? console.log(msg);//這是組件A發(fā)送的消息！
? ? ? ? ? ? ????????????})
? ? ? ? ????????????},
? ? ????????????}
????????????</script>
```
????????????父?jìng)髯樱?/p>
????????? ? 1.子組件：綁定，子組件里用props接收?
? ????????? 2.子組件上ref=‘name’,父組件this.$refs.name.fn(),可傳參數(shù)
????????????子傳父：
? ? ????????1.子組件上綁定方法@fn=‘dada’，父組建內(nèi)寫上data(val){}，val即使子組件的傳參，子組件this.$emit(‘fn’,payload)
?? ?????????2.子組件this.$parent.fn()調(diào)用父組件的方法
? ? ? ? ? ? 父子組件執(zhí)行生命周期
????????????????????加載渲染過程
????????????????父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
? ? ? ? ? ? ? ? ? ? 子組件更新過程
? ? ? ? ?????????父beforeUpdate->子beforeUpdate->子updated->父updated
????????????????????父組件更新過程
? ? ? ? ? ? ?????父beforeUpdate->父updated
????????????????????銷毀過程
? ? ? ? ? ? ?????父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
????6.mvvm模式和mvc模式理解
????????????mvc：model數(shù)據(jù)層，view視圖層，control控制層
?????????????1.view -- model層關(guān)聯(lián)密切: view層請(qǐng)求model層數(shù)據(jù)進(jìn)行頁(yè)面渲染;當(dāng)model層數(shù)據(jù)發(fā)生變化的時(shí)候,view需要再次重新請(qǐng)求model
? ? ? ? ? ? ?數(shù)據(jù)進(jìn)行渲染;...
????????????2.Controller: 接收用戶行為,進(jìn)行邏輯處理后,數(shù)據(jù)發(fā)生改變; 每次改變都要發(fā)送給Model層,然后Model改變,進(jìn)而view改變.
? ??????????mvvm： model數(shù)據(jù)層，view視圖層，vm viewmodel?
????????????view和model是相互獨(dú)立的,通過vm(viewmodel)這個(gè)連接的對(duì)象或者說橋梁來實(shí)現(xiàn)同步響應(yīng)式的變化; 當(dāng)model發(fā)生數(shù)據(jù)改變,view層
????????????會(huì)自動(dòng)同步,同理當(dāng)view操作數(shù)據(jù)改變后,model層也會(huì)同步 MVVM設(shè)計(jì)模式:實(shí)現(xiàn)view model同步的原理:Object.defineProperty()定義
????????????的set和get函數(shù)
????7.vue dom diff
????????????vue虛擬dom生成一個(gè)和原dom相同的dom樹，當(dāng)需要改變dom操作時(shí)候，先把虛擬dom樹進(jìn)行改變，繼而虛擬dom樹和真實(shí)的dom
????????????做比較，比較出不通的地方再改變真實(shí)dom，只做了不同部分的dom改變。
????8.vuex
????9.vue-router
4.react：
????1.dom-diff
? ? ? ? 在有key的情況下，遍歷新的集合；判斷新集合中的節(jié)點(diǎn)在舊集合的位置是否大于之前訪問過的舊節(jié)點(diǎn)的最大位置
? ? 2.列表key屬性
? ? 3.jsx原理
????????????????一.JSX 是 JavaScript 語言的一種語法擴(kuò)展，長(zhǎng)得像 HTML，但并不是 HTML。
? ? ????????????二.React.js 可以用 JSX來描述你的組件長(zhǎng)什么樣的。
????????????? ? 三.JSX 在編譯的時(shí)候會(huì)變成相應(yīng)的 JavaScript 對(duì)象描述。
????????????? ? 四.react-dom?負(fù)責(zé)把這個(gè)用來描述UI 信息的 JavaScript 對(duì)象變成 DOM 元素，并且渲染到頁(yè)面上。
4.react-router原理
? ? 目前react-router在項(xiàng)目中已經(jīng)有大量實(shí)踐，其優(yōu)點(diǎn)可以總結(jié)如下
????????風(fēng)格: 與React融為一體,專為react量身打造，編碼風(fēng)格與react保持一致，例如路由的配置可以通過component來實(shí)現(xiàn)
????????簡(jiǎn)單: 不需要手工維護(hù)路由state，使代碼變得簡(jiǎn)單
????????強(qiáng)大: 強(qiáng)大的路由管理機(jī)制，體現(xiàn)在如下方面
????????路由配置: 可以通過組件、配置對(duì)象來進(jìn)行路由的配置
????????路由切換: 可以通過<Link>?Redirect進(jìn)行路由的切換
????????路由加載: 可以同步記載，也可以異步加載，這樣就可以實(shí)現(xiàn)按需加載
????????使用方式: 不僅可以在瀏覽器端的使用，而且可以在服務(wù)器端的使用????
5.redux原理
? 6.生命周期? ? ? ? ? ? ?
7.react setState 異步
????????1.setState?不會(huì)立刻改變React組件中state的值.
????????2.setState 通過觸發(fā)一次組件的更新來引發(fā)重繪.
????????3.多次 setState 函數(shù)調(diào)用產(chǎn)生的效果會(huì)合并。
????????重繪指的就是引起 React 的更新生命周期函數(shù)4個(gè)函數(shù)：
????????????shouldComponentUpdate（被調(diào)用時(shí)this.state沒有更新；如果返回了false，生命周期被中斷，雖然不調(diào)用之后的函數(shù)了，但是state
????????????仍然會(huì)被更新）
????????????componentWillUpdate（被調(diào)用時(shí)this.state沒有更新）
????????????render（被調(diào)用時(shí)this.state得到更新）
????????????componentDidUpdate
8.react組件通信
? ? 父?jìng)髯樱鹤咏M件上：綁定值，子組件內(nèi)用props接收
????子傳父：父組件傳給子組件一個(gè)方法，子組件props中接收到方法，調(diào)用此方法也可傳值
9.hooks
http://www.itdecent.cn/p/d22e581df1e4
5.性能優(yōu)化：
? ? ? ? 1.Code Splitting
? ? ? ? 2.shouldComponentUpdate避免重復(fù)渲染
? ? ? ? 3.使用不可突變數(shù)據(jù)結(jié)構(gòu)
? ? ? ? 4.組件盡可能的進(jìn)行拆分、解耦
? ? ? ? 5.列表類組件優(yōu)化
? ? ? ? 6.bind函數(shù)優(yōu)化
? ? ? ? 7.不要濫用props
? ? ? ? 8.ReactDOMServer進(jìn)行服務(wù)端渲染組件
6.網(wǎng)絡(luò)：
????瀏覽器緩存
? ? 前端跨域
? ? ? ? 1、 通過jsonp跨域
????????2、 document.domain + iframe跨域
????????3、 location.hash + iframe
????????4、window.name+ iframe跨域
????????5、 postMessage跨域
????????6、 跨域資源共享（CORS）
????????7、 nginx代理跨域
????????8、 nodejs中間件代理跨域
????????9、 WebSocket協(xié)議跨域
????????HTTP1, HTTP2, HTTPS、瀏覽從輸入網(wǎng)址到回車發(fā)生了什么、前端跨域、瀏覽器緩存、cookie, session, token, localstorage, sessionstorage、狀態(tài)碼、TCP連接(三次握手, 四次揮手)
