好程式設計師web前端培訓分享Vue面試題1.

　　好程式設計師 web前端培訓分享 Vue面試題1. 什麼是 MVVM？

　　 MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。Model 層代表資料模式，也可以在 Model 中定義資料修改和操作的業務邏輯；View 代表 UI 元件，它負責將資料模型轉化為 UI 展現出來，ViewModel 是一個同步 View 和 Model 的物件。

2. 父元件向子元件傳值的方法？

父元件傳遞的資料子元件用 props 方法接收。

子元件透過兩種方式接收：可以傳遞任何型別（陣列，物件，各種資料型別等等）

·  props:[‘title’,‘likes’,‘isPublished’,‘author’]；

·  props:{title:String,likes:Number}

3. 子元件向父元件傳值的方法？

子元件向父元件傳值用 this.$emit(key,value) ，父元件接收的時候需要在父元件中建立的子元件的標籤中繫結 Key，格式:@Key=“方法名”，父元件宣告這個方法，方法帶引數，這個引數就是子元件傳遞的 Value。

4. Vuex 是什麼？哪種功能場景使用它？

Vuex 是專門為 Vue.js 設計的狀態管理模式，它採用集中式儲存管理 Vue 應用中所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

當專案龐大的時候使用它：

·  需要動態的註冊響應式資料；

·  需要名稱空間 namespace 來管理組織我們的資料；

·  希望透過外掛，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性？

·  state：基本資料

·  getters：從基本資料派生的資料

·  mutations：提交更改資料的方法，同步！

·  actions：像一個裝飾器，包裹 mutations，使之可以非同步。

·  modules：模組化 Vuex。

6. 如何讓 CSS 旨在當前元件中起作用？

當前元件的 < style>標籤修改為< style scoped>

7. 請列舉出3個 Vue 中常見的生命週期鉤子函式。

·  beforeCreate：Vue 例項的掛載元素 $el 和資料物件 data 都為未定義，還未初始化。

·  created：vue 例項的資料物件 data 有值了，$el 沒有。

·  beforeMount：vue 例項的 $el 和 data 都初始化了，但還是虛擬的 dom 節點，具體的 data.filter 還未替換掉。

·  mounted：vue 例項掛載完成，data.filter 成功渲染

·  beforeUpdate：data 更新時觸發。

·  updated：data 更新時觸發。

·  beforeDestroy：元件銷燬時觸發。

·  destroyed：元件銷燬時觸發，vue 例項解除了事件監聽以及 dom 的繫結（無響應了），但 DOM 節點依舊存在。

8. Vue 生命週期總共有幾個階段？

·  beforeCreate 建立前

·  created 建立後

·  beforeMount 載入前

·  mounted 載入後

·  beforeUpdate 更新前

·  updated 更新後

·  beforeDestroy 銷燬前

·  destroyed 銷燬後

9. 說出至少 4 種 Vue 當中的指令和它的用法？

·  v-html：渲染文字（能解析 HTML 標籤）

·  v-text：渲染文字（統統解析成文字）

·  v-bing：繫結資料

·  v-once：只繫結一次

·  v-model：繫結模型

·  v-on：繫結事件

·  v-if v-shou：條件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

·  npm install：下載 node_modules 資源包的命令

·  npm run dev：啟動 vue-cli 開發環境的 npm 命令

·  npm run build：vue-cli 生成生產環境部署資源的 npm 命令

11. 請說出 vue-cli 工程中每個資料夾和檔案的用處。

·  build 資料夾：存放 webpack 的相關配置以及指令碼檔案，在實際開發過程中只會偶爾用到 webpack.base.conf.js，配置 less、babel 等。

·  config 資料夾：常用到此資料夾下的 config.js (index.js) 配置開發環境的埠號，是否開啟熱載入或者設定生產環境的靜態資源相對路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。

·  node_modules：存放 npm install 命令下載的開發環境和生產環境的各種依賴。

·  src資料夾 ：工程專案的原始碼以及資源、包括頁面圖片、路由元件、路由配置、vuex、入口檔案等。

·  其他檔案：定義的一些專案資訊，說明等等。

12. vue-router 路由的兩種模式。

·  hash 模式：

# 後面的 hash 值的變化，並不會導致瀏覽器向伺服器發出請求，瀏覽器不發出請求，也就不會重新整理瀏覽器，每次 hash 值的變化會觸發 hashchange 事件。

·  history 模式：

利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向後端傳送請求。

13. 如何解決 Vue 中的 ajax 跨域問題？

找到 config 資料夾中的 index.js 檔案：

修改 proxyTable: {

    '/api':{    //使用 /api 來代替 "

        target:' //源地址

        changeOrigin:true, //改變源

        pathRewrite:{

            '^/api':' //路徑重寫

        }

    }

},

修改完之後的跨越請求就可以直接寫成 /api/login 等等了。

14. Vue 打包命令是什麼？Vue 打包後會生成哪些檔案？

·  npm run build ：Vue 打包命令

·  Vue 打包後會在當前工作目錄下生成一個 dist 資料夾，資料夾中會有 static 靜態檔案以及 index.html 初始頁面。

15. Vue 如何最佳化首屏載入速度？

·  非同步路由載入

·  不打包庫檔案

·  關閉 sourcemap

·  開啟 gzip 壓縮

16. scss 是什麼？

SCSS 是 Sass 3 引入的新語法，其語法完全相容 CSS3，並且繼承了 Sass 的強大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮排，SCSS 對空白符號不敏感。

17. axios 是什麼？怎麼使用？

axios 是一個基於 promise 的 HTTP 庫，可以傳送 get，post 請求，正是由於 Vue、React 的出現，促使了 axios 輕量級庫的出現

特定：

·  可以在瀏覽器中傳送 XMLHttpRequest 請求

·  可以在 node.js 傳送 http 請求

·  支援 Promise API

·  攔截請求和響應

·  轉換請求和響應

·  轉換請求資料和響應資料

·  能夠取消請求

·  自動轉化 JSON 格式

·  客戶端支援保護安全免受 XSRF 攻擊

如何使用：

·  npm install --save axios 安裝axios

·  在入口 main.js 中匯入 axios

import Axios from 'axios'

 

Vue.propertype.$axios = Axios;

·  使用 axios 傳送 get 請求

this.$axios.get('/user?stu_id=1002').then(function(resp) {

    console.log(resp);

}).catch(function(err) {

    console.log(err);

});

·  使用 axios 傳送 post 請求 post原生請求在後端是接收不到引數的，所有有兩種解決方案，這裡只寫一種！第二種解決方案是用 QS。

var params = new URLSearchParams();

    params.append('name','孫悟空');

    params.append('age',22);

    let that = this;

    this.$axios.post(').then(function(resp) {

    console.log(resp.data.users);

    that.ausers = data.data.users;

}).catch(function(err) {

    console.log(err);

});

18. vue-router 是什麼？它有哪些元件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度整合，讓構建單頁面應用變得易如反掌。包含的功能有：

·  巢狀的路由、是圖示

·  模組化的、基於元件的路由配置

·  路由引數、查詢、萬用字元

·  基於 Vue.js 過度系統的檢視過渡效果

·  細粒度的導航控制

·  帶有自動啟用的 CSS class 的連線

·  HTML 5 歷史模式或 hash 模式，在 IE9 中自動降級

·  自定義的捲軸行為

vue-router 元件：

·  < router-link to=""> 路由的路徑

·  < router-link :to="{name:’‘l路由名’}"> 命名路由

·  < router-view> 路由的顯示

19. 怎麼定義 vue-router 的動態路由？怎麼獲取傳遞過來的動態引數？

在 router 目錄下的 index.js 檔案中，對 path 屬性加上 /:id。使用 router 物件的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架 （jQuery）的區別是什麼？哪些場景適合？

·  Vue 是資料驅動，透過資料來顯示檢視層而不是節點操作。

·  處理資料互動的時候挺適合 MVVM 設計模式的。