Vue和React面試知識點

ES6新添加兩個數據類型

1.數據類型Set集合：set常用於去重操作

2.數據類型Map：map可以避免鍵值必須為字符串的限制,其鍵值可以為對象、數組等

3.Symbol類型：在用相同的字符串對對象屬性名或方法進行命名時會發生命名沖突，而使用symbol產生的名字是不同的

ES6新增的一些特性：

1）let聲明變量和const聲明常量，兩個都有塊級作用域

2）模板字符串
　　模板字符串是增強版的字符串，用反引號（`）標識，可以當作普通字符串使用，也可以用來定義多行字符串

3）解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值

4）for of循環
for...of循環可以遍歷數組、Set和Map結構、某些類似數組的對象、對象，以及字符串

5）import、export導入導出
ES6標准中，Js原生支持模塊(module)。將JS代碼分割成不同功能的小塊進行模塊化，將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共接口部分，然后通過模塊的導入的方式可以在其他地方使

6）... 展開運算符
　　可以將數組或對象里面的值展開；還可以將多個值收集為一個變量

7）class 類的繼承
　　ES6中不再像ES5一樣使用原型鏈實現繼承，而是引入Class這個概念

8）async、await
　　使用 async/await, 搭配promise,可以通過編寫形似同步的代碼來處理異步流程, 提高代碼的簡潔性和可讀性
　　async 用於申明一個 function 是異步的，而 await 用於等待一個異步方法執行完成

9）promise
　　Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理、強大

10）Proxy代理
　　使用代理（Proxy）監聽對象的操作，然后可以做一些相應事情

var、let、const之間的區別

var聲明變量可以重復聲明，而let不可以重復聲明

var是不受限於塊級的，而let是受限於塊級

var會與window相映射（會掛一個屬性），而let不與window相映射

var可以在聲明的上面訪問變量，而let有暫存死區，在聲明的上面訪問變量會報錯

const聲明之后必須賦值，否則會報錯

const定義不可變的量，改變了就會報錯

const和let一樣不會與window相映射、支持塊級作用域、在聲明的上面訪問變量會報錯

forEach、for in、for of三者區別

forEach更多的用來遍歷數組

for in 一般常用來遍歷對象或json

for of數組對象都可以遍歷，遍歷對象需要通過和Object.keys()

for in循環出的是key，for of循環出的是value

什么是Async/Await?

• async/await是寫異步代碼的新方式，以前的方法有回調函數和Promise。
• async/await是基於Promise實現的，它不能用於普通的回調函數。
• async/await與Promise一樣，是非阻塞的。
• async/await使得異步代碼看起來像同步代碼，這正是它的魔力所在。

狀態碼

2XX 成功

• 200 OK，表示從客戶端發來的請求在服務器端被正確處理
• 204 No content，表示請求成功，但響應報文不含實體的主體部分
• 206 Partial Content，進行范圍請求

3XX 重定向

• 301 moved permanently，永久性重定向，表示資源已被分配了新的 URL
• 302 found，臨時性重定向，表示資源臨時被分配了新的 URL
• 303 see other，表示資源存在着另一個 URL，應使用 GET 方法定向獲取資源
• 304 not modified，表示服務器允許訪問資源，但因發生請求未滿足條件的情況
• 307 temporary redirect，臨時重定向，和302含義相同

4XX 客戶端錯誤

• 400 bad request，請求報文存在語法錯誤
• 401 unauthorized，表示發送的請求需要有通過 HTTP 認證的認證信息
• 403 forbidden，表示對請求資源的訪問被服務器拒絕
• 404 not found，表示在服務器上沒有找到請求的資源

5XX 服務器錯誤

• 500 internal sever error，表示服務器端在執行請求時發生了錯誤
• 503 service unavailable，表明服務器暫時處於超負載或正在停機維護，無法處理請求

html表單提交方式除了post 、get還有哪些

html表單提交method就是get、post請求兩種。,但是從http動作的角度來看，除了get、post，還有delete、put等

前提：單頁面和多頁面的區別

每一次頁面跳轉的時候，后台服務器都會給返回一個新的html文檔，這種類型的網站也就是多頁網站，也叫做多頁應用。

各數據的轉換

1. 數組轉字符串：.join() 將數組中所有元素放到一個字符串中，並用指定的分隔符進行分割

2. 字符串轉數組：.split() 將字符串以指定的分隔符分割成數組

3.字符串轉json對象：JSON.parse(jsonstr);

4.json對象轉json字符串：JSON.stringify(jsonObj);

 

第一次進入頁面的時候會請求一個 html文件，刷新清除一下。切換到其他組件，此時路徑也相應變化，但是並沒有新的 html文件請求，頁面內容也變化了。
原理是： JS會感知到 url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然后將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應用，每次跳轉的時候不需要再請求html文件了。

 

一、對於MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數據模型，也可以在Model中定義數據修改和操作的業務邏輯。
View 代表UI 組件，它負責將數據模型轉化成UI 展現出來。
ViewModel 監聽模型數據的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
在MVVM架構下，View 和 Model 之間並沒有直接的聯系，而是通過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數據的變化會同步到Model中，而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。

二、VUE和react生命周期

VUE：

• beforeCreate  已經完成實例
• created   Data已經完成
• beforeMount data和模板已經生成還沒有完成掛載
• mounted  data和虛擬DOM掛載完成
• beforeUpdate
• updated 數據更新，此鈎子函數在服務器一開始渲染的時候不被調用
• beforeDestroy 實例銷毀
• destroyed  實例銷毀

react:

• 初始化階段：

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

• 運行中狀態：

  • componentWillReceiveProps:組件將要接收到屬性的時候調用
  • shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（可以返回 false，接收數據后不更新，阻止 render 調用，后面的函數不會被繼續執行了）
  • componentWillUpdate:組件即將更新不能修改屬性和狀態
  • render:組件重新描繪
  • componentDidUpdate:組件已經更新

• 銷毀階段：

  • componentWillUnmount:組件即將銷毀

二、Vue和react各自父子之間通信

VUE父子之間通信

• 父組件傳給子組件：子組件通過props方法接受數據;
• 子組件傳給父組件：$emit方法傳遞參數

react父子之間通信

• 父組件傳給子組件：子組件通過props方法接受數據;
• 子組件向父組件通訊，同樣也需要父組件向子組件傳遞 props 進行通訊，只是父組件傳遞的，是作用域為父組件自身的函數，子組件調用該函數，將子組件想要傳遞的信息，作為參數，傳遞到父組件的作用域中

三、vuex和redux講解

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

• state：存儲狀態（變量）
• getters：計算state，我們在組件中使用 $sotre.getters.fun()
• mutations：修改狀態，並且是同步的。在組件中使用$store.commit('',params)。
• actions：異步操作。提交mutations，在組件中使用是$store.dispath('')
• modules：模塊化store

redux:管理狀態，用戶通過界面組件 觸發ActionCreator，攜帶Store中的舊State與Action 流向Reducer,Reducer返回新的state，這是同步，Reducer里面只能放純函數

處理異步的需要中間件：redux-thunk或者redux-saga

redux-thunk

缺點：

• (1).一個異步請求的action代碼過於復雜，且異步操作太分散，相對比saga只要調用一個call方法就顯得簡單多了。
• (2).action形式不統一，如果不一樣的異步操作，就要寫多個了。
• 優點：學習成本低

edux-saga:
優點：

• （1）集中處理了所有的異步操作，異步接口部分一目了然(有提供自己的方法)
• （2）action是普通對象，這跟redux同步的action一模一樣({type:XXX})
• （3）通過Effect，方便異步接口的測試
• （4）通過worker和watcher可以實現非阻塞異步調用，並且同時可以實現非阻塞調用下的事件監聽
• （5） 異步操作的流程是可以控制的，可以隨時取消相應的異步操作。

缺點：學習成本高。

四、vue-router和redux講解

vue-router:實現單頁面前端路由,提供了兩種方式：Hash模式和History模式。

• 1.Vue使用插件，即調用Vue的use方法；

// router.js 
Vue.use(Router);

• 2.實例化router，並配置router的配置對象，含routes路由；

// router.js 
export default new Router({
mode:"hash",
routes:[
{
path:"/hello",
component:HelloWorld
},
{
path:"/",
component:VuexTest
},
{
path:"/form",
component:Form
}
]
})

• 3.在vue實例上配置router實例；

// main.js
import router from "./config/router";
new Vue({
router,
render: h => h(App),
}).$mount('#app')

• 4.使用

<template>
<div id="app">
<router-link to="/">home</router-link>|
<router-link to="/form">form</router-link>|
<router-link to="/hello">HelloWorld</router-link>
<router-view></router-view>
</div>
</template>

 React Router 提供三種類型組件，分別是路由組件(router components)，路由匹配組件(route matching components)，以及導航組件(navigation components).

你使用以上的任何一個組件都必須要引入一個名為 react-router-dom 的文件

import { BrowserRouter, Route, Link } from 'react-router-dom'

• 1.路由 (Routers)

• ReactDOM.render((
  <BrowserRouter>
  <App/>
  </BrowserRouter>
  ), holder)

• 2. 路由匹配（Route Matching）

• import { Route, Switch } from 'react-router-dom'
  <Route path='/about' component={About}/> // renders <About/>

• 3. 路由渲染參數

• <Link to='/about'>關於</Link>

五、vue和react區別

相同點：
React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鈎子函數，可以讓開發者定制化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。
不同點：
React采用的Virtual DOM會對渲染出來的結果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。

六、vue常見問題和react常見問題

VUE：

• 1.css只在當前組件起作用
• 答：在style標簽中寫入scoped即可 例如：<style scoped></style>
• 2.v-if 和 v-show 區別
• 答：v-if按照條件是否渲染，v-show是display的block或none；
• 3.$route和$router的區別
• 答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鈎子函數等。
• 4.vue幾種常用的指令
• 答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
• 5.v-on 可以綁定多個方法嗎？
• 答：可以
• 6.vue中 key 值的作用？
• 答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。

REACT:

• 1.React 中 refs 的作用是什么？
• Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。我們可以為元素添加 ref 屬性然后在回調函數中接受該元素在 DOM 樹中的句柄，該值會作為回調函數的第一個參數返回
• 2.何為受控組件(controlled component)
• 在 HTML 中，類似 <input>, <textarea> 和 <select>，這樣的元素就被稱為"受控元素"。
• 3.React 中有三種構建組件的方式
• React.createClass()、ES6 class 和無狀態函數。