1.vue中 key 值的作用
使用key來給每個節點做一個唯一標識
key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，
否則vue只會替換其內部屬性而不會觸發過渡效果。
2.Vue 組件中 data 為什么必須是函數？
在 new Vue() 中，data 是可以作為一個對象進行操作的，然而在 component 中，data 只能以函數的形式存在，不能直接將對象賦值給它。
當data選項是一個函數的時候，每個實例可以維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的。
3.vuex的State特性是？
一、Vuex就是一個倉庫，倉庫里面放了很多對象。其中state就是數據源存放地，對應於與一般Vue對象里面的data
二、state里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新
三、它通過mapState把全局的 state 和 getters 映射到當前組件的 computed 計算屬性中
4.介紹一下Vue的響應式系統
Vue為MVVM框架，當數據模型data變化時，頁面視圖會得到響應更新，其原理對data的getter/setter方法進行攔截（Object.defineProperty或者Proxy），利用發布訂閱的設計模式，在getter方法中進行訂閱，在setter方法中發布通知，讓所有訂閱者完成響應。
在響應式系統中，Vue會為數據模型data的每一個屬性新建一個訂閱中心作為發布者，而監聽器watch、計算屬性computed、視圖渲染template/render三個角色同時作為訂閱者，對於監聽器watch，會直接訂閱觀察監聽的屬性，對於計算屬性computed和視圖渲染template/render，如果內部執行獲取了data的某個屬性，就會執行該屬性的getter方法，然后自動完成對該屬性的訂閱，當屬性被修改時，就會執行該屬性的setter方法，從而完成該屬性的發布通知，通知所有訂閱者進行更新。
5.computed與watch的區別
計算屬性computed和監聽器watch都可以觀察屬性的變化從而做出響應，不同的是：
計算屬性computed更多是作為緩存功能的觀察者，它可以將一個或者多個data的屬性進行復雜的計算生成一個新的值，提供給渲染函數使用，當依賴的屬性變化時，computed不會立即重新計算生成新的值，而是先標記為臟數據，當下次computed被獲取時候，才會進行重新計算並返回。
而監聽器watch並不具備緩存性，監聽器watch提供一個監聽函數，當監聽的屬性發生變化時，會立即執行該函數。
6.介紹一下Vue的生命周期
beforeCreate：是new Vue()之后觸發的第一個鈎子，在當前階段data、methods、computed以及watch上的數據和方法都不能被訪問。
created：在實例創建完成后發生，當前階段已經完成了數據觀測，也就是可以使用數據，更改數據，在這里更改數據不會觸發updated函數。可以做一些初始數據的獲取，在當前階段無法與Dom進行交互，如果非要想，可以通過vm.$nextTick來訪問Dom。
beforeMount：發生在掛載之前，在這之前template模板已導入渲染函數編譯。而當前階段虛擬Dom已經創建完成，即將開始渲染。在此時也可以對數據進行更改，不會觸發updated。
mounted：在掛載完成后發生，在當前階段，真實的Dom掛載完畢，數據完成雙向綁定，可以訪問到Dom節點，使用$refs屬性對Dom進行操作。
beforeUpdate：發生在更新之前，也就是響應式數據發生更新，虛擬dom重新渲染之前被觸發，你可以在當前階段進行更改數據，不會造成重渲染。
updated：發生在更新完成之后，當前階段組件Dom已完成更新。要注意的是避免在此期間更改數據，因為這可能會導致無限循環的更新。
beforeDestroy：發生在實例銷毀之前，在當前階段實例完全可以被使用，我們可以在這時進行善后收尾工作，比如清除計時器。
destroyed：發生在實例銷毀之后，這個時候只剩下了dom空殼。組件已被拆解，數據綁定被卸除，監聽被移出，子實例也統統被銷毀。
7.為什么組件的data必須是一個函數
一個組件可能在很多地方使用，也就是會創建很多個實例，如果data是一個對象的話，對象是引用類型，一個實例修改了data會影響到其他實例，所以data必須使用函數，為每一個實例創建一個屬於自己的data，使其同一個組件的不同實例互不影響。
8.組件之間是怎么通信的
父子組件通信
父組件 -> 子組件：prop
子組件 -> 父組件：
emit
獲取組件實例：使用
children，$refs.xxx，獲取到實例后直接獲取屬性數據或調用組件方法
兄弟組件通信
Event Bus：每一個Vue實例都是一個Event Bus，都支持emit，可以為兄弟組件的實例之間new一個Vue實例，作為Event Bus進行通信。
Vuex：將狀態和方法提取到Vuex，完成共享
跨級組件通信
使用provide/inject
Event Bus：同兄弟組件Event Bus通信
Vuex：將狀態和方法提取到Vuex，完成共享
9.Vue事件綁定原理說一下
每一個Vue實例都是一個Event Bus，當子組件被創建的時候，父組件將事件傳遞給子組件，子組件初始化的時候是有
emit觸發函數，而對於原生native事件，使用addEventListener綁定到真實的DOM元素上。
10.vue的優點是什么？
低耦合。視圖（View）可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計。
可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫
11.Vue與Angular以及React的區別？
1.與AngularJS的區別
相同點：
都支持指令：內置指令和自定義指令。
都支持過濾器：內置過濾器和自定義過濾器。
都支持雙向數據綁定。
都不支持低端瀏覽器。
不同點：
1.AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。
2.在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢。
Vue.js使用基於依賴追蹤的觀察並且使用異步隊列更新。所有的數據都是獨立觸發的。 對於龐大的應用來說，這個優化差異還是比較明顯的。
2.與React的區別
相同點：
1.React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用。
2.中心思想相同：一切都是組件，組件實例之間可以嵌套。
3.都提供合理的鈎子函數，可以讓開發者定制化地去處理需求。
4.都不內置AJAX，Route等功能到核心包，而是以插件的方式加載。 5.在組件開發中都支持mixins的特性。
不同點：
React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會對渲染出來的結果做臟檢查。
Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。
12.什么是vue的計算屬性？
在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，盡量采取計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；⑥相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。
13.vue等單頁面應用（spa）及其優缺點
優點： Vue的目標是通過盡可能簡單的 API實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好；即第一次就將所有的東西都加載完成，因此，不會導致頁面卡頓。
缺點： 不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。
14.active-class是哪個組件的屬性？嵌套路由怎么定義？
vue-router模塊的router-link組件的屬性。
嵌套路由：
嵌套路由顧名思義就是路由的多層嵌套。
重構router/index.js的路由配置，需要使用children數組來定義子路由 ，路由定義：
{
path: '/me', name: 'Me', component: Me, children: [ { path: 'collection', name: 'Collection', component: Collection }, { path: 'trace', name: 'Trace', component: Trace } ] } 以“/”開頭的嵌套路徑會被當作根路徑，所以子路由上不用加“/”;
在生成路由時，主路由上的path會被自動添加到子路由之前，所以子路由上的path不用在重新聲明主路由上的path了。
在外層路由組件中，如下寫法。
<template> <div class="me"> <div class="tabs"> <ul> <!--<router-link :to="{name: 'Default'}" tag="li" exact>默認內容</router-link>--> <router-link :to="{name: 'Collection'}" tag="li" >我的收藏</router-link> <router-link :to="{name: 'Trace'}" tag="li">我的足跡</router-link> </ul> </div> <div class="content"> <router-view></router-view> </div> </div> </template> 由於篇幅有限，只能分享部分面試題，更多面試題及答案可以【點擊我】閱讀下載哦~無償分享給大家，算是一個感恩回饋吧
15.pwa是什么？
漸進式網頁應用，PWA 應該具有一下特性：
漸進式：能確保每個用戶都能打開網頁響應式：PC，手機，平板，不管哪種格式，網頁格式都能完美適配
2.離線應用：支持用戶在沒網的條件下也能打開網頁，這里就需要 Service Worker 的幫助
3.APP 化：能夠像 APP 一樣和用戶進行交互
4.常更新：一旦 Web 網頁有什么改動，都能立即在用戶端體現出來
5.安全：安全第一，給自己的網站加上一把綠鎖–HTTPS
6.可搜索：能夠被引擎搜索到
7.推送：做到在不打開網頁的前提下，推送新的消息
8.可安裝：能夠將 Web 想 APP 一樣添加到桌面
9.可跳轉：只要通過一個連接就可以跳轉到你的 Web 頁面
16.slot是什么？有什么作用？原理是什么？
slot又名插槽，是Vue的內容分發機制，組件內部的模板引擎使用slot元素作為承載分發內容的出口。插槽slot是子組件的一個模板標簽元素，而這一個標簽元素是否顯示，以及怎么顯示是由父組件決定的。
slot又分三類，默認插槽，具名插槽和作用域插槽。
默認插槽：又名匿名查抄，當slot沒有指定name屬性值的時候一個默認顯示插槽，一個組件內只有有一個匿名插槽。
具名插槽：帶有具體名字的插槽，也就是帶有name屬性的slot，一個組件可以出現多個具名插槽。
作用域插槽：默認插槽、具名插槽的一個變體，可以是匿名插槽，也可以是具名插槽，該插槽的不同點是在子組件渲染作用域插槽時，可以將子組件內部的數據傳遞給父組件，讓父組件根據子組件的傳遞過來的數據決定如何渲染該插槽。
實現原理：當子組件vm實例化時，獲取到父組件傳入的slot標簽的內容，存放在vm.
slot.default，具名插槽為vm.
slot中的內容進行替換，此時可以為插槽傳遞數據，若存在數據，則可稱該插槽為作用域插槽。
17.Vue模板渲染的原理是什么？
vue中的模板template無法被瀏覽器解析並渲染，因為這不屬於瀏覽器的標准，不是正確的HTML語法，所有需要將template轉化成一個JavaScript函數，這樣瀏覽器就可以執行這一個函數並渲染出對應的HTML元素，就可以讓視圖跑起來了，這一個轉化的過程，就成為模板編譯。
模板編譯又分三個階段，解析parse，優化optimize，生成generate，最終生成可執行函數render。
parse階段：使用大量的正則表達式對template字符串進行解析，將標簽、指令、屬性等轉化為抽象語法樹AST。
optimize階段：遍歷AST，找到其中的一些靜態節點並進行標記，方便在頁面重渲染的時候進行diff比較時，直接跳過這一些靜態節點，優化runtime的性能。
generate階段：將最終的AST轉化為render函數字符串。
18.template預編譯是什么？
對於 Vue 組件來說，模板編譯只會在組件實例化的時候編譯一次，生成渲染函數之后在也不會進行編譯。因此，編譯對組件的 runtime 是一種性能損耗。
而模板編譯的目的僅僅是將template轉化為render function，這個過程，正好可以在項目構建的過程中完成，這樣可以讓實際組件在 runtime 時直接跳過模板渲染，進而提升性能，這個在項目構建的編譯template的過程，就是預編譯。
19.那template和jsx的有什么分別？
對於 runtime 來說，只需要保證組件存在 render 函數即可，而我們有了預編譯之后，我們只需要保證構建過程中生成 render 函數就可以。
在 webpack 中，我們使用vue-loader編譯.vue文件，內部依賴的vue-template-compiler模塊，在 webpack 構建過程中，將template預編譯成 render 函數。
與 react 類似，在添加了jsx的語法糖解析器babel-plugin-transform-vue-jsx之后，就可以直接手寫render函數。
所以，template和jsx的都是render的一種表現形式，不同的是：
JSX相對於template而言，具有更高的靈活性，在復雜的組件中，更具有優勢，而 template 雖然顯得有些呆滯。但是 template 在代碼結構上更符合視圖與邏輯分離的習慣，更簡單、更直觀、更好維護。
20.說一下什么是Virtual DOM
Virtual DOM 是 DOM 節點在 JavaScript 中的一種抽象數據結構，之所以需要虛擬DOM，是因為瀏覽器中操作DOM的代價比較昂貴，頻繁操作DOM會產生性能問題。虛擬DOM的作用是在每一次響應式數據發生變化引起頁面重渲染時，Vue對比更新前后的虛擬DOM，匹配找出盡可能少的需要更新的真實DOM，從而達到提升性能的目的。
21.介紹一下Vue中的Diff算法
在新老虛擬DOM對比時
首先，對比節點本身，判斷是否為同一節點，如果不為相同節點，則刪除該節點重新創建節點進行替換
如果為相同節點，進行patchVnode，判斷如何對該節點的子節點進行處理，先判斷一方有子節點一方沒有子節點的情況(如果新的children沒有子節點，將舊的子節點移除)
比較如果都有子節點，則進行updateChildren，判斷如何對這些新老節點的子節點進行操作（diff核心）。
匹配時，找到相同的子節點，遞歸比較子節點
在diff中，只對同層的子節點進行比較，放棄跨級的節點比較，使得時間復雜從O(n^3)降低值O(n)，也就是說，只有當新舊children都為多個子節點時才需要用核心的Diff算法進行同層級比較。
22.key屬性的作用是什么
在對節點進行diff的過程中，判斷是否為相同節點的一個很重要的條件是key是否相等，如果是相同節點，則會盡可能的復用原有的DOM節點。所以key屬性是提供給框架在diff的時候使用的，而非開發者。
23.說說Vue2.0和Vue3.0有什么區別
重構響應式系統，使用Proxy替換Object.defineProperty，使用Proxy優勢：
可直接監聽數組類型的數據變化
監聽的目標為對象本身，不需要像Object.defineProperty一樣遍歷每個屬性，有一定的性能提升
可攔截apply、ownKeys、has等13種方法，而Object.defineProperty不行
直接實現對象屬性的新增/刪除
新增Composition API，更好的邏輯復用和代碼組織
重構 Virtual DOM
模板編譯時的優化，將一些靜態節點編譯成常量
slot優化，將slot編譯為lazy函數，將slot的渲染的決定權交給子組件
模板中內聯事件的提取並重用（原本每次渲染都重新生成內聯函數）
代碼結構調整，更便於Tree shaking，使得體積更小
使用Typescript替換Flow
24.為什么要新增Composition API，它能解決什么問題
Vue2.0中，隨着功能的增加，組件變得越來越復雜，越來越難維護，而難以維護的根本原因是Vue的API設計迫使開發者使用watch，computed，methods選項組織代碼，而不是實際的業務邏輯。
另外Vue2.0缺少一種較為簡潔的低成本的機制來完成邏輯復用，雖然可以minxis完成邏輯復用，但是當mixin變多的時候，會使得難以找到對應的data、computed或者method來源於哪個mixin，使得類型推斷難以進行。
所以Composition API的出現，主要是也是為了解決Option API帶來的問題，第一個是代碼組織問題，Compostion API可以讓開發者根據業務邏輯組織自己的代碼，讓代碼具備更好的可讀性和可擴展性，也就是說當下一個開發者接觸這一段不是他自己寫的代碼時，他可以更好的利用代碼的組織反推出實際的業務邏輯，或者根據業務邏輯更好的理解代碼。
第二個是實現代碼的邏輯提取與復用，當然mixin也可以實現邏輯提取與復用，但是像前面所說的，多個mixin作用在同一個組件時，很難看出property是來源於哪個mixin，來源不清楚，另外，多個mixin的property存在變量命名沖突的風險。而Composition API剛好解決了這兩個問題。
25.都說Composition API與React Hook很像，說說區別
從React Hook的實現角度看，React Hook是根據useState調用的順序來確定下一次重渲染時的state是來源於哪個useState，所以出現了以下限制
不能在循環、條件、嵌套函數中調用Hook
必須確保總是在你的React函數的頂層調用Hook
useEffect、useMemo等函數必須手動確定依賴關系
而Composition API是基於Vue的響應式系統實現的，與React Hook的相比
聲明在setup函數內，一次組件實例化只調用一次setup，而React Hook每次重渲染都需要調用Hook，使得React的GC比Vue更有壓力，性能也相對於Vue來說也較慢
Compositon API的調用不需要顧慮調用順序，也可以在循環、條件、嵌套函數中使用
響應式系統自動實現了依賴收集，進而組件的部分的性能優化由Vue內部自己完成，而React Hook需要手動傳入依賴，而且必須必須保證依賴的順序，讓useEffect、useMemo等函數正確的捕獲依賴變量，否則會由於依賴不正確使得組件性能下降。
雖然Compositon API看起來比React Hook好用，但是其設計思想也是借鑒React Hook的。
26.SSR有了解嗎？原理是什么？
在客戶端請求服務器的時候，服務器到數據庫中獲取到相關的數據，並且在服務器內部將Vue組件渲染成HTML，並且將數據、HTML一並返回給客戶端，這個在服務器將數據和組件轉化為HTML的過程，叫做服務端渲染SSR。
而當客戶端拿到服務器渲染的HTML和數據之后，由於數據已經有了，客戶端不需要再一次請求數據，而只需要將數據同步到組件或者Vuex內部即可。除了數據意外，HTML也結構已經有了，客戶端在渲染組件的時候，也只需要將HTML的DOM節點映射到Virtual DOM即可，不需要重新創建DOM節點，這個將數據和HTML同步的過程，又叫做客戶端激活。
使用SSR的好處：
有利於SEO：其實就是有利於爬蟲來爬你的頁面，因為部分頁面爬蟲是不支持執行JavaScript的，這種不支持執行JavaScript的爬蟲抓取到的非SSR的頁面會是一個空的HTML頁面，而有了SSR以后，這些爬蟲就可以獲取到完整的HTML結構的數據，進而收錄到搜索引擎中。
白屏時間更短：相對於客戶端渲染，服務端渲染在瀏覽器請求URL之后已經得到了一個帶有數據的HTML文本，瀏覽器只需要解析HTML，直接構建DOM樹就可以。而客戶端渲染，需要先得到一個空的HTML頁面，這個時候頁面已經進入白屏，之后還需要經過加載並執行 JavaScript、請求后端服務器獲取數據、JavaScript 渲染頁面幾個過程才可以看到最后的頁面。特別是在復雜應用中，由於需要加載 JavaScript 腳本，越是復雜的應用，需要加載的 JavaScript 腳本就越多、越大，這會導致應用的首屏加載時間非常長，進而降低了體驗感。
由於篇幅有限，只能分享部分面試題，更多面試題及答案可以【點擊我】閱讀下載哦~無償分享給大家，算是一個感恩回饋吧
27.ajax和axios、fetch的區別？
ajax
傳統 Ajax 指的是 XMLHttpRequest（XHR）， 最早出現的發送后端請求技術，隸屬於原始js中，核心使用XMLHttpRequest對象，多個請求之間如果有先后關系的話，就會出現回調地獄。
juery.ajax
$.ajax({
type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); JQuery ajax 是對原生XHR的封裝，除此以外還增添了對JSONP的支持,舉出幾個缺點
本身是針對MVC的編程,不符合現在前端MVVM的浪潮
基於原生的XHR開發，XHR本身的架構不清晰。
JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）
不符合關注分離（Separation of Concerns）的原則
配置和調用方式非常混亂，而且基於事件的異步模型不友好
axios
axios({
method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，它本身具有以下特征：
1.從瀏覽器中創建 XMLHttpRequest
2.支持 Promise API
3.客戶端支持防止CSRF
4.提供了一些並發請求的接口（重要，方便了很多的操作）
5.從 node.js 創建 http 請求
6.攔截請求和響應
7.轉換請求和響應數據
8.取消請求
9.自動轉換JSON數據
fetch
try { let response = await fetch(url); let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); } fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise對象。Fetch是基於promise設計的。Fetch的代碼結構比起ajax簡單多了，參數有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch的優點：
1.符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象里
2.更好更方便的寫法
3.語法簡潔，更加語義化
基於標准 Promise 實現，支持 async/await
同構方便，使用 isomorphic-fetch
4.更加底層，提供的API豐富（request, response）
5.脫離了XHR，是ES規范里新的實現方式
28.說下對 Virtual DOM 算法的理解
包括幾個步驟：
1、用 JavaScript 對象結構表示 DOM 樹的結構，然后用這個樹構建一個真正的 DOM 樹，插到文檔當中；
2、當狀態變更的時候，重新構造一棵新的對象樹，然后用新的樹和舊的樹進行比較，記錄兩棵樹差異；
3、把 2 所記錄的差異應用到步驟 1 所構建的真正的 DOM 樹上，視圖就更新了。
Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）。
29.解釋單向數據流和雙向數據綁定
單向數據流：顧名思義，數據流是單向的。數據流動方向可以跟蹤，流動單一，追查問題的時候可以更快捷。缺點就是寫起來不太方便。要使 UI 發生變更就必須創建各種 action 來維護對應的 state。
雙向數據綁定：數據之間是相通的，將數據變更的操作隱藏在框架內部。優點是在表單交互較多的場景下，會簡化大量與業務無關的代碼。缺點就是無法追蹤局部狀態的變化，增加了出錯時 debug 的難度。
30.Vue如何去除URL中的#
vue-router 默認使用 hash 模式，所以在路由加載的時候，項目中的 URL 會自帶 “#”。如果不想使用 “#”， 可以使用 vue-router 的另一種模式 history：new Router ({ mode : 'history', routes: [ ]})
需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 “404” 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 “index.html” 頁面。