建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“vue前臺面試題有哪些”，在日常操作中，相信很多人在vue前臺面試題有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue前臺面試題有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站制作、網(wǎng)站建設、環(huán)縣網(wǎng)絡推廣、小程序制作、環(huán)縣網(wǎng)絡營銷、環(huán)縣企業(yè)策劃、環(huán)縣品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供環(huán)縣建站搭建服務，24小時服務熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
1.vue性能優(yōu)化的幾種方案
1.正確的選擇v-if和v-show的使用，v-if有更高的切換消耗，v-show有更高的初始消耗
2.路由懶加載：當頁面很多，組件很多的時候，SPA頁面在初次加載的時候，就會變的很慢。這是由于vue初次加載的時候把可能一開始看不見的組件也一次加載了，這個時候就需要對頁面進行優(yōu)化，就需要異步組件了。
3.緩存：spa頁面采用keep-alive緩存組件
4.圖片懶加載：提高頁面加載速度，不在可視區(qū)域內的圖片先不加載，只有滾動到可視區(qū)域的時候才加載。一般借助外部插件如 vue-lazyload。使用只要要npm install vue-lazyload而后頁面引入即用。
5.SEO優(yōu)化： ssr服務端渲染
6.打包優(yōu)化：對于少量過大的包采取cdn引入文件的方式而不是直接下載到本地。
2.v-show和v-if誰的性能更高
v-show本質就是通過控制css中的display設置為none，控制隱藏，只會編譯?次；v-if是動態(tài)的向DOM樹內增加或者者刪除DOM元素，若初始值為false，就不會編譯了。?且v-if不停的銷毀和創(chuàng)立?較消耗性能。所以假如要頻繁切換那么v-show性能更高，假如不是頻繁切換，v-if性能更高
3.vue之間的數(shù)據(jù)傳遞
父到子：props
子到父：$emit自己設置事件
復雜組件的傳遞：通過vuex
4.單文件組件中如何讓樣式只在當前組件生效
在組件中的style前面加上scoped
5.vue中的生命周期（鉤子函數(shù)）
共有8+2個鉤子函數(shù) 基本的有8個，keep-alive中有2個
beforeCreate（創(chuàng)立前） / created（創(chuàng)立后） / beforeMount（掛載前） / mounted（掛載后） beforeUpdate（升級前）/ updated（升級后） /beforeDestroy（銷毀前）/ destroyed（銷毀后）
其中第一次加載頁面會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子
另外在keep-alive中，vue新添加了兩個鉤子函數(shù)
activated：由于使用了keep-alive的組件會被緩存，所以created,mounted這種的鉤子函數(shù)只會執(zhí)行一次， 假如我們的子組件需要在每次加載的時候進行某些操作，可以使用activated鉤子觸發(fā)。
deactivated：組件被移除時使用。
6.vue父子組件生命周期的執(zhí)行順序
加載渲染過程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子組件升級過程
父beforeUpdate->子beforeUpdate->子updated->父updated
父組件升級過程
父beforeUpdate->父updated
銷毀過程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
7.在vue中如何獲取DOM元素
給元素增加ref屬性 通過this.$refs.domName獲取
8.key的作用
需要使用key來給每個節(jié)點做一個唯一標識，Diff算法即可以正確的識別此節(jié)點。
作用主要是為了高效的升級虛擬DOM。
9.$nextTick的使用場景（作用）
由于vue中數(shù)據(jù)升級是異步的，當你修改了data的值而后馬上獲取這個dom元素的值，是不能獲取到升級后的值，
你需要使用$nextTick這個回調，讓修改后的data值渲染升級到dom元素之后在獲取，才能成功。
10.v-if和v-for的優(yōu)先級
v-if 與 v-for 一起使用時，v-for 具備比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中。所以，不推薦v-if和v-for同時使用。假如非要一起用，可以把v-if放到外層元素，或者者不用v-if，先在計算屬性中挑選出數(shù)據(jù)，而后在v-for
11.v-model的原理
vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結合 發(fā)布訂閱模式的方式來實現(xiàn)的， 也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化，視圖跟著變化，視圖變化，數(shù)據(jù)也隨之發(fā)生改變；
核心：關于VUE雙向數(shù)據(jù)綁定，其核心是 Object.defineProperty()方法。
12.什么是mvvm
MVVM 將數(shù)據(jù)雙向綁定（data-binding）作為核心思想，View 和 Model 之間沒有聯(lián)絡，它們通過 ViewModel 這個橋梁進行交互。
Model 和 ViewModel 之間的交互是雙向的，因而 View 的變化會自動同步到 Model，而 Model 變化也會立即反映到 View 上顯示。
當客戶操作 View，ViewModel 感知到變化，而后通知 Model 發(fā)生相應改變；反之當 Model 發(fā)生改變，ViewModel 也能感知到變化，使 View 作出相應升級。
13.如何優(yōu)化SPA應用的首屏加載速度慢的問題
將公用的JS庫通過script標簽外部引入，減小app.bundel的大小，讓瀏覽器并行下載資源文件，提高下載速度；
在配置 路由時，頁面和組件使用懶加載的方式引入，進一步縮小 app.bundel 的體積，在調用某個組件時再加載對應的js文件；
加一個首屏 loading 圖，提升客戶體驗；
14.vue路由的兩種模式，hash與history的區(qū)別
hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算）。
比方這個 URL：ABC Home Page - ABC.com 的值為 #/hello。它的特點在于：hash 盡管出現(xiàn)在 URL 中，但不會被包括在 HTTP 請求中，對后臺完全沒有影響，因而改變 hash 不會重新加載頁面。
history —— 利用了 HTML5 History Interface 中新添加的 pushState() 和 replaceState() 方法。（需要特定瀏覽器支持）
這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的 功能。只是當它們執(zhí)行修改時，盡管改變了當前的 URL，但瀏覽器不會立即向后臺發(fā)送請求。
因而可以說，hash 模式和 history 模式都屬于瀏覽器自身的特性，Vue-Router 只是利用了這兩個特性（通過調用瀏覽器提供 的接口）來實現(xiàn)前臺路由。
注意?。?！history模式下，前臺的url必需和實際向后臺發(fā)起請求的url 一致，如http://www.abc.com/book/id 。假如后臺缺少對/book/id 的路由解決，將返回404錯誤。刷新也會報404由于會實際去請求數(shù)據(jù)。 （需要后臺進行配置。vue官網(wǎng)有詳情）
15.如何處理vuex數(shù)據(jù)刷新丟失的問題
由于store里的數(shù)據(jù)是保存在運行內存中的,當頁面刷新時，頁面會重新加載vue實例，store里面的數(shù)據(jù)就會被重新賦值
如何處理：
一種是state里的數(shù)據(jù)一律是通過請求來觸發(fā)action或者mutation來改變(不推薦，當vuex數(shù)據(jù)很多項目很大的時候不適用)
一種是將state里的數(shù)據(jù)保存一份到本地存儲(localStorage、sessionStorage、cookie）中 （推薦）
16.vue中如何實現(xiàn)跨域訪問
1.開發(fā)環(huán)境：配置vue.config.js proxy代理商
2.生產環(huán)境：配置nginx代理商
到此，關于“vue前臺面試題有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)站名稱：vue前臺面試題有哪些
瀏覽路徑：http://fisionsoft.com.cn/article/jjgpoc.html
