前端面試問題集（部分）

一、vue框架開發(fā)項(xiàng)目用到了哪些技術(shù)

vue + vuex + vue-router + axios + es6 + webpack

二、vuex 有什么作用

vuex用于程序開發(fā)的狀態(tài)管理，它采用集中式存儲(chǔ)，管理應(yīng)用的所有組件的狀態(tài)，每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。
使用：
1、在main.js中引入vuex：import Vuex from 'vuex'，
然后掛載使用它：Vue.use(Vuex)
2、在main.js中加入：var store = new vuex.Store(){
state:{
count:0
}}

三、請(qǐng)求后臺(tái)數(shù)據(jù)是如何請(qǐng)求的

用axios，請(qǐng)求后臺(tái)資源的模塊。npm install axios -S裝好，然后發(fā)送的是跨域，需在配置文件中config/index.js進(jìn)行設(shè)置。后臺(tái)如果是Tp5則定義一個(gè)資源路由。js中使用import進(jìn)來，然后.get或.post。如果成功返回在.then函數(shù)中，失敗則是在.catch函數(shù)中。

四、vue路由怎么創(chuàng)建和使用
  • 在index.js中引入import vue-router
  • 引入路由頁面：import 路由頁面
  • 掛載使用：Vue.use(Router)
  • 創(chuàng)建路由實(shí)例：export default new Router
  • 在路由實(shí)例中進(jìn)行路由路徑配置：routes[{
    path:Home ,name: ,component: },{},{}]
  • 子路由：children:[{path: ,component: },{},{}]
五、vue組件間怎么傳值
  • 父組件向子組件傳遞數(shù)據(jù)：
    只需要在子組件通過v-bind傳入一個(gè)值，在子組件中，通過props接收，即可完成數(shù)據(jù)的傳遞
  • 子向父傳輸數(shù)據(jù)：
    子組件定義一個(gè)事件來觸發(fā)，
    父組件需要用到emit函數(shù)來傳參數(shù)。
六、vue組件怎么引用
  1. 編寫子組件
  2. 在需要使用的父組件中通過import引入
  3. 在vue的components中注冊(cè)
  4. 在模板中使用
七、mvvm開發(fā)模式介紹一下

module+view+viewModule，在MVVM的框架下視圖和模型是不能直接通信的。它們通過ViewModel來通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。

八、vue中跨域如何處理

  • vue的webpack文件中配置跨域：在根目錄下config的index.js文件中配置，changeOrigin:true //是否跨域
    target：目標(biāo)接口域名

  • 開發(fā)環(huán)境下，如何做好跨域配置

    首先跨域我們要配置的文件有：config下的index.js

      dev: {

      proxyTable: {

          '/api': {

                  target: 'http://10.1.5.11:8080/',//設(shè)置你調(diào)用的接口域名和端口號(hào)

                  changeOrigin: true, //跨域

                  pathRewrite: {

                             '^/api': '/' //這里理解成用‘/api’代替target里面的地址，

                              后面組件中我們掉接口時(shí)直接用api代替

                              比如我要調(diào)用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，

                              直接寫‘/api/xxx/duty?time=2017-07-07 14:57:22’即可

                              在開發(fā)環(huán)境顯示地址：http://localhost:9600//api/xxx/duty?time=2017-07-07 14:57:22

                                  } }

config/dev.env.js：

module.exports = merge(prodEnv, {

                                NODE_ENV: '"development"',//開發(fā)環(huán)境

                                API_HOST:"/api/"

                                })
  • 生產(chǎn)環(huán)境中最好的辦法是后端在服務(wù)器端口加個(gè)代理，效果類似開發(fā)時(shí)webpack的代理。

axios發(fā)送get post請(qǐng)求問題
發(fā)送post請(qǐng)求時(shí)一般都要設(shè)置Content-Type，發(fā)送內(nèi)容的類型，application/json指發(fā)送json對(duì)象但是要提前JSON.stringify()一下。application/xxxx-form指發(fā)送？
a=b&c=d格式，可以用qs.stringify()的方法格式化一下，qs在安裝axios后會(huì)自動(dòng)安裝，只需要組件里import一下即可。
const postData=JSON.stringify(this.formCustomer);
'Content-Type':'application/json'}

const postData=Qs.stringify(this.formCustomer);//過濾成？&=格式
'Content-Type':'application/xxxx-form'}

九、如何判斷用戶的登錄狀態(tài)

vuex + localstorage （用于長期登錄+判斷用戶是否已登錄+適合長期保存在本地的數(shù)據(jù)）

十、頁面已經(jīng)更新，但是數(shù)據(jù)沒有變化，瀏覽器緩存如何處理
  • 其實(shí)解決這個(gè)問題很簡單，緩存是通過文件名標(biāo)記緩存的內(nèi)容的。在你更新了網(wǎng)站的css文件內(nèi)容后，在更換一下css的文件名就可以了。如原先html中的css調(diào)用語句如下：

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>

改一下css文件名：

<link rel="stylesheet" href="styleV2.css" type="text/css" media="screen"/>

  • 給css/js文件加個(gè)版本號(hào)
    第一種方法修改css/js后改文件名確實(shí)麻煩，所以我們可以加載css/js語句中加入版本號(hào)（即css/js鏈接中？后面的內(nèi)容）就可以了。如原先的HTML中的css調(diào)用語句如下：

<link rel="stylesheet" href="css/style.css?v=201708" />
將css文件的版本號(hào)改成新的：

<link rel="stylesheet" href="css/style.css?v=201709" />

十一、用戶如果一直提交數(shù)據(jù)，怎么辦

可以將提交的按鈕狀態(tài)更改，提交之后按鈕變?yōu)椴豢捎谩?/p>

十二、get和post請(qǐng)求方式區(qū)別
  • get 用的是瀏覽器的url地址傳輸，傳輸數(shù)據(jù)有限，內(nèi)容公開，不安全
  • post 用的是請(qǐng)求體傳輸，比較安全，傳輸?shù)臄?shù)據(jù)也比較大
十三、git如何處理版本沖突和新建合并分支
  • 處理沖突：
    先把云上的pull下來，然后在本地合并修改之后，再commit，再push到云上。
  • 創(chuàng)建合并分支：
  1. git branch xxx （創(chuàng)建分支）
  2. git checkout xxx （檢出）
  3. git merge （合并分支）
十四、數(shù)據(jù)雙向綁定實(shí)現(xiàn)和原理

用v-module實(shí)現(xiàn)的，VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)方法重新定義了對(duì)象獲取屬性值(get)和設(shè)置屬性值(set)的操作來實(shí)現(xiàn)的。

十五、webpack有什么作用，配置
  • 可以自動(dòng)編譯TypeScript為JavaScript
  • webpack-cli/vue-cli 自動(dòng)生成配置文件
  • webpack是一個(gè)模塊打包器，強(qiáng)調(diào)的是一個(gè)前端模塊化方案，更側(cè)重模塊打包，我們可以把開發(fā)中的所有資源都看成是模塊，通過loader和plugin對(duì)資源進(jìn)行處理。
  • webpack打包原理：把所有依賴打包成一個(gè) bundle.js 文件，通過代碼分割成單元片段并按需加載。
十六、es6的一些寫法
  • let和const：使用let來聲明一個(gè)值會(huì)被改變的變量，而使用const來聲明一個(gè)值不會(huì)被改變的變量，也可以稱之為常量。
  • 可省略 :function，更簡便，
  • 箭頭函數(shù)中，它沒有自己的this，函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。
  • 模板字符串：是為了解決使用+號(hào)拼接字符串的不便利而出現(xiàn)的。 使用 `` 將整個(gè)字符串包裹起來，而在其中使用 ${} 來包裹一個(gè)變量或者一個(gè)表達(dá)式。
  • 來看看ES6的函數(shù)默認(rèn)值寫法：
    function add(x = 20, y = 30) {
    return x + y;
    }
    console.log(add());
  • 在ES6中用...來表示展開運(yùn)算符，它可以將數(shù)組方法或者對(duì)象進(jìn)行展開。例如：
    const arr1 = [1, 2, 3];
    const arr2 = [...arr1, 10, 20, 30];
    這樣，arr2 就變成了[1, 2, 3, 10, 20, 30];
十七、H5 的一些新特性

  • 新增了一些語義化標(biāo)簽：header、footer、nav、aside、article、audio、video等

  • 媒體查詢 @media 可以做出響應(yīng)式頁面

  • 新表單元素的引入（智能表單，對(duì)自動(dòng)輸入的內(nèi)容做基本的校驗(yàn)）：input：type=number（數(shù)字）、email（郵箱）、url（地址）、range（滑塊）、date（日期）等，placeholder（占位符）、require（必填項(xiàng)）。

  • 本地存儲(chǔ)：webstorage：sessionStorage和localStorage

  1. sessionStorage（會(huì)話期間有效，關(guān)閉瀏覽器窗口就失效，容量5M，不同頁面或標(biāo)簽頁面間無法共享，適用于敏感賬號(hào)一次性登錄）
  2. localStorage（本地存儲(chǔ)永久有效，多窗口共享，容量5M，用于長期登錄+判斷用戶是否已登錄+適合長期保存在本地的數(shù)據(jù)）
  • 獲取地理位置的api：Window.navigator.geolocation.getCurrentPosition(success,error)
十八、Html的語義化

1、在沒有css的渲染下，依然能夠清晰的看出頁面的結(jié)構(gòu)，方便開發(fā)人員開發(fā)。
2、語義化更有可讀性，便于團(tuán)隊(duì)開發(fā)和維護(hù)。
3、便于seo，便于搜索引擎的搜索。

十九、cookie、sessionSttorage、localStory區(qū)別
  • 數(shù)據(jù)存儲(chǔ)大小
    cookie：4kb
    webStorge：5mb
  • 數(shù)據(jù)存儲(chǔ)有效期限
    cookie：根據(jù)自己的設(shè)置時(shí)間
    sessionStorage：關(guān)閉窗口后失效
    localStorage：永久有效除非js刪除或者瀏覽器刪除
  • 作用域
    cookie和localStorage是在同源窗口，同一個(gè)瀏覽器共享的，sessionStorage只在同一個(gè)標(biāo)簽頁共享。
二十、從輸入網(wǎng)址到頁面加載發(fā)生了什么

大概分為以下過程
DNS解析
TCP連接
發(fā)送HTTP請(qǐng)求
服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文
瀏覽器解析渲染頁面
連接結(jié)束

二十一、圖片很多如何進(jìn)行優(yōu)化

可以進(jìn)行懶加載或者是分頁加載。

二十二、移動(dòng)端適配怎么配置

viewport，三個(gè)屬性
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一：什么是閉包？閉包的用處？ （1）閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 9,744評(píng)論 1贊 52
  • vue是什么？ vue是構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的web界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)...
    九四年的風(fēng)閱讀 8,746評(píng)論 2贊 131
  • 1、active-class是哪個(gè)組件的屬性？嵌套路由怎么定義？答：vue-router模塊的router-lin...
    jane819閱讀 1,779評(píng)論 0贊 15
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,187評(píng)論 0贊 1
  • vue-cli搭建項(xiàng)目 確保安裝了node與npm 再目標(biāo)文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,278評(píng)論 1贊 22