vue 同步加载_2019 前端面试题汇总(主要为 Vue)
畢業(yè)之后就在一直合肥小公司工作,沒有老司機、沒有技術(shù)氛圍,在技術(shù)的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷茫看不到任何希望。于是乎,我果斷辭職,在新年開工之際來到杭州,這里的互聯(lián)網(wǎng)公司應(yīng)該是合肥的幾十倍吧。。。。
剛來3天,面試了幾家公司,有些規(guī)模比較小,有些是創(chuàng)業(yè)公司,也有些已經(jīng)發(fā)展的不錯了;今天把最近的面試題目做個匯總,也給自己復(fù)個盤,由于我的技術(shù)棧主要為Vue,所以大部分題目都是Vue開發(fā)相關(guān)的。
1. 談?wù)勀銓VVM開發(fā)模式的理解
MVVM分為Model、View、ViewModel三者。
- Model:代表數(shù)據(jù)模型,數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義;
- View:代表UI視圖,負責(zé)數(shù)據(jù)的展示;
- ViewModel:負責(zé)監(jiān)聽Model中數(shù)據(jù)的改變并且控制視圖的更新,處理用戶交互操作;
Model和View并無直接關(guān)聯(lián),而是通過ViewModel來進行聯(lián)系的,Model和ViewModel之間有著雙向數(shù)據(jù)綁定的聯(lián)系。因此當(dāng)Model中的數(shù)據(jù)改變時會觸發(fā)View層的刷新,View中由于用戶交互操作而改變的數(shù)據(jù)也會在Model中同步。
這種模式實現(xiàn)了Model和View的數(shù)據(jù)自動同步,因此開發(fā)者只需要專注對數(shù)據(jù)的維護操作即可,而不需要自己操作dom。
2. Vue 有哪些指令?
v-html、v-show、v-if、v-for等等。
3. v-if 和 v-show 有什么區(qū)別?
v-show 僅僅控制元素的顯示方式,將 display 屬性在 block 和 none 來回切換;而v-if會控制這個 DOM 節(jié)點的存在與否。當(dāng)我們需要經(jīng)常切換某個元素的顯示/隱藏時,使用v-show會更加節(jié)省性能上的開銷;當(dāng)只需要一次顯示或隱藏時,使用v-if更加合理。
4. 簡述Vue的響應(yīng)式原理
當(dāng)一個Vue實例創(chuàng)建時,vue會遍歷data選項的屬性,用 Object.defineProperty將它們轉(zhuǎn)為getter/setter并且在內(nèi)部追蹤相關(guān)依賴,在屬性被訪問和修改時通知變化。 每個組件實例都有相應(yīng)的watcher程序?qū)嵗?#xff0c;它會在組件渲染的過程中把屬性記錄為依賴,之后當(dāng)依賴項的setter被調(diào)用時,會通知watcher重新計算,從而致使它關(guān)聯(lián)的組件得以更新。
5. Vue中如何在組件內(nèi)部實現(xiàn)一個雙向數(shù)據(jù)綁定?
假設(shè)有一個輸入框組件,用戶輸入時,同步父組件頁面中的數(shù)據(jù)。
具體思路:父組件通過props傳值給子組件,子組件通過 $emit 來通知父組件修改相應(yīng)的props值,具體實現(xiàn)如下:
import Vue from 'vue'const component = { ?props: ['value'], ?template: ` ? ?可以看到,當(dāng)輸入數(shù)據(jù)時,父子組件中的數(shù)據(jù)是同步改變的:
我們在父組件中做了兩件事,一是給子組件傳入props,二是監(jiān)聽input事件并同步自己的value屬性。那么這兩步操作能否再精簡一下呢?答案是可以的,你只需要修改父組件:
template: ` ? ?v-model 實際上會幫我們完成上面的兩步操作。
6. Vue中如何監(jiān)控某個屬性值的變化?
比如現(xiàn)在需要監(jiān)控data中, obj.a 的變化。Vue中監(jiān)控對象屬性的變化你可以這樣:
watch: { ? ? ?obj: { ? ? ?handler (newValue, oldValue) { ? ? ? ?console.log('obj changed') ? ? ?}, ? ? ?deep: true ? ?} ?}deep屬性表示深層遍歷,但是這么寫會監(jiān)控obj的所有屬性變化,并不是我們想要的效果,所以做點修改:
watch: { ? 'obj.a': { ? ? ?handler (newName, oldName) { ? ? ? ?console.log('obj.a changed') ? ? ?} ? } ?}還有一種方法,可以通過computed 來實現(xiàn),只需要:
computed: { ? ?a1 () { ? ? ?return this.obj.a ? ?}}利用計算屬性的特性來實現(xiàn),當(dāng)依賴改變時,便會重新計算一個新值。
7. Vue中給data中的對象屬性添加一個新的屬性時會發(fā)生什么,如何解決?
示例:
? ? ? ? ? ? ? ? ? ?{{value}} ? ? ? ? ? ? ?添加obj.b ?點擊button會發(fā)現(xiàn), obj.b 已經(jīng)成功添加,但是視圖并未刷新:
原因在于在Vue實例創(chuàng)建時, obj.b 并未聲明,因此就沒有被Vue轉(zhuǎn)換為響應(yīng)式的屬性,自然就不會觸發(fā)視圖的更新,這時就需要使用Vue的全局api—— $set():
addObjB () { ? ? ?// this.obj.b = 'obj.b' ? ? ?this.$set(this.obj, 'b', 'obj.b') ? ? ?console.log(this.obj) ? ?}$set() 方法相當(dāng)于手動的去把 obj.b 處理成一個響應(yīng)式的屬性,此時視圖也會跟著改變了:
8. delete和Vue.delete刪除數(shù)組的區(qū)別
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值。
? ?var a=[1,2,3,4] ? ?var b=[1,2,3,4] ? ?delete a[1] ? ?console.log(a) ? ?this.$delete(b,1) ? ?console.log(b)9.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問題?
- 將公用的JS庫通過script標(biāo)簽外部引入,減小 app.bundel 的大小,讓瀏覽器并行下載資源文件,提高下載速度;
- 在配置 路由時,頁面和組件使用懶加載的方式引入,進一步縮小 app.bundel 的體積,在調(diào)用某個組件時再加載對應(yīng)的js文件;
- 加一個首屏loading圖,提升用戶體驗;
10. 前端如何優(yōu)化網(wǎng)站性能?
1)、減少 HTTP 請求數(shù)量
在瀏覽器與服務(wù)器進行通信時,主要是通過 HTTP 進行通信。瀏覽器與服務(wù)器需要經(jīng)過三次握手,每次握手需要花費大量時間。而且不同瀏覽器對資源文件并發(fā)請求數(shù)量有限(不同瀏覽器允許并發(fā)數(shù)),一旦 HTTP 請求數(shù)量達到一定數(shù)量,資源請求就存在等待狀態(tài),這是很致命的,因此減少 HTTP 的請求數(shù)量可以很大程度上對網(wǎng)站性能進行優(yōu)化。
CSS Sprites
國內(nèi)俗稱CSS精靈,這是將多張圖片合并成一張圖片達到減少HTTP請求的一種解決方案,可以通過CSS的background屬性來訪問圖片內(nèi)容。這種方案同時還可以減少圖片總字節(jié)數(shù)。
合并 CSS 和 JS 文件
現(xiàn)在前端有很多工程化打包工具,如:grunt、gulp、webpack等。為了減少 HTTP 請求數(shù)量,可以通過這些工具再發(fā)布前將多個CSS或者多個JS合并成一個文件。
采用 lazyLoad
俗稱懶加載,可以控制網(wǎng)頁上的內(nèi)容在一開始無需加載,不需要發(fā)請求,等到用戶操作真正需要的時候立即加載出內(nèi)容。這樣就控制了網(wǎng)頁資源一次性請求數(shù)量。
2)、控制資源文件加載優(yōu)先級
瀏覽器在加載HTML內(nèi)容時,是將HTML內(nèi)容從上至下依次解析,解析到link或者script標(biāo)簽就會加載href或者src對應(yīng)鏈接內(nèi)容,為了第一時間展示頁面給用戶,就需要將CSS提前加載,不要受 JS 加載影響。
一般情況下都是CSS在頭部,JS在底部。
3)、利用瀏覽器緩存
瀏覽器緩存是將網(wǎng)絡(luò)資源存儲在本地,等待下次請求該資源時,如果資源已經(jīng)存在就不需要到服務(wù)器重新請求該資源,直接在本地讀取該資源。
4)、減少重排(Reflow)
基本原理:重排是DOM的變化影響到了元素的幾何屬性(寬和高),瀏覽器會重新計算元素的幾何屬性,會使渲染樹中受到影響的部分失效,瀏覽器會驗證 DOM 樹上的所有其它結(jié)點的visibility屬性,這也是Reflow低效的原因。如果Reflow的過于頻繁,CPU使用率就會急劇上升。
減少Reflow,如果需要在DOM操作時添加樣式,盡量使用 增加class屬性,而不是通過style操作樣式。
5)、減少 DOM 操作
6)、圖標(biāo)使用 IconFont 替換
11. 網(wǎng)頁從輸入網(wǎng)址到渲染完成經(jīng)歷了哪些過程?
大致可以分為如下7步:
12. jQuery獲取的dom對象和原生的dom對象有何區(qū)別?
js原生獲取的dom是一個對象,jQuery對象就是一個數(shù)組對象,其實就是選擇出來的元素的數(shù)組集合,所以說他們兩者是不同的對象類型不等價。
原生DOM對象轉(zhuǎn)jQuery對象:
var box = document.getElementById('box');var $box = $(box);jQuery對象轉(zhuǎn)原生DOM對象:
var $box = $('#box');var box = $box[0];13. jQuery如何擴展自定義方法
(jQuery.fn.myMethod=function () { ? ? ? alert('myMethod');})// 或者:(function ($) { ? ? ? ?$.fn.extend({ ? ? ? ? ? ? myMethod : function () { ? ? ? ? ? ? ? ? ?alert('myMethod'); ? ? ? ? ? ? } ? ? ? ?})})(jQuery)使用:
$("#div").myMethod();目前來看公司面試的問題還是比較基礎(chǔ)的,但是對于某些只追求會用并不研究其原理的同學(xué)來說可能就沒那么容易了。所以大家不僅要追求學(xué)習(xí)的廣度,更要追求深度。
OK,希望自己能早日拿到心儀的offer.
總結(jié)
以上是生活随笔為你收集整理的vue 同步加载_2019 前端面试题汇总(主要为 Vue)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
 
                            
                        - 上一篇: java从基础到入门_Java从入门到入
- 下一篇: bv值是什么意思_BVR电线是什么意思B
