web前端技術有哪些Vue面試題

這篇文章主要介紹“web前端技術有哪些Vue面試題”，在日常操作中，相信很多人在web前端技術有哪些Vue面試題問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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 來代替 "http://localhost:8082"

        target:'http://localhost:8082', //源地址

        changeOrigin:true, //改變源

        pathRewrite:{

            '^/api':'http://localhost:8082' //路徑重寫

        }

    }

},

修改完之后的跨越請求就可以直接寫成 /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('http://localhost:8082/user',params).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 設計模式的。

到此，關于“web前端技術有哪些Vue面試題”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！