前端知識總結

2021-09-24 08:10:48 字數 2010 閱讀 6929

非原創,是自己在找資料的時候的一些彙總,自己的一些總結

1、談談你對mvvm開發模式的理解?

mvvm分為model、view、viewmodel三者。

model:代表資料模型,資料和業務邏輯都在model層中定義;

view:代表ui檢視,負責資料的展示;

viewmodel:負責監聽model中資料的改變並且控制檢視的更新,處理使用者互動操作;

model和view並無直接關聯,而是通過viewmodel來進行聯絡的,model和viewmodel之間有著雙向資料繫結的聯絡。因此當model中的資料改變時會觸發view層的重新整理,view中由於使用者互動操作而改變的資料也會在model中同步。 這種模式實現了model和view的資料自動同步,因此開發者只需要專注對資料的維護操作即可,而不需要自己操作dom。

2、v-if 和 v-show 有什麼區別?

v-show 僅僅控制元素的顯示方式,將 display 屬性在 block 和 none 來回切換;而v-if會控制這個 dom 節點的存在與否。當我們需要經常切換某個元素的顯示/隱藏時,使用v-show會更加節省效能上的開銷;當只需要一次顯示或隱藏時,使用v-if更加合理。

3、vue中如何在元件內部實現乙個雙向資料繫結?

假設有乙個輸入框元件,使用者輸入時,同步父元件頁面中的資料。 具體思路:父元件通過props傳值給子元件,子元件通過 $emit 來通知父元件修改相應的props值,具體實現如下:

4、delete和vue.delete刪除陣列的區別?

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。 vue.delete 直接刪除了陣列 改變了陣列的鍵值。

5、如何優化spa應用的首屏載入速度慢的問題?

加乙個首屏loading圖,提公升使用者體驗;

6、多頁面應用跟單頁面spa應用的區別

為什麼多頁應用的首屏時間快?

首屏時間叫做頁面首個螢幕的內容展現的時間,當我們訪問頁面的時候,伺服器返回乙個html,頁面就會展示出來,這個過程只經歷了乙個http請求,所以頁面展示的速度非常快。

為什麼搜尋引擎優化效果好(seo)?

搜尋引擎在做網頁排名的時候,要根據網頁內容才能給網頁權重,來進行網頁的排名。搜尋引擎是可以識別html內容的,而我們每個頁面所有的內容都放在html中,所以這種多頁應用,seo排名效果好。 但是它也有缺點,就是切換慢 因為每次跳轉都需要發出乙個http請求,如果網路比較慢,在頁面之間來回跳轉時,就會發現明顯的卡頓。

為什麼頁面切換快?

頁面每次切換跳轉時,並不需要做html檔案的請求,這樣就節約了很多http傳送時延,我們在切換頁面的時候速度很快。

缺點:首屏時間慢,seo差

有這些缺點,為什麼還要使用vue呢?

vue還提供了一些其它的技術來解決這些缺點,比如說伺服器端渲染技術(我是ssr),通過這些技術可以完美解決這些缺點,解決完這些問題,實際上單頁面應用對於前端來說是非常完美的頁面開發解決方案。

基於vue的spa單頁面應用開發-載入效能篇,參考下面鏈結

7、vue中的nexttick

vue中的nexttick涉及到vue中dom的非同步更新,感覺很有意思,特意了解了一下。其中關於nexttick的原始碼涉及到不少知識,很多不太理解,暫且根據自己的一些感悟介紹下nexttick。

從圖中可以得知:msg1和msg3顯示的內容還是變換之前的,而msg2顯示的內容是變換之後的。其根本原因是因為vue中dom更新是非同步的(詳細解釋在後面)。

前端知識總結

一.關於設定div寬度和高度的問題 1 如果要以百分比設定元素 div 的尺寸,必要以父元素的尺寸作為參考,如果父元素沒有設定尺寸,那麼子元素 div 尺寸自然不會生效。2 所以如果設定div的高度為100 那麼他的參考元素就是是body,那麼如何設定body的尺寸呢?3 在怪異模式下,body可以...

前端知識總結

基本資料型別 number 數字 數字可以帶小數點也可以不帶 nan infinity null 表示變數的值為空,可以通過將變數的值設定為null來清空變數。string 字串可以是引號中的任意文字。雙引號單引號都可以。也可以使用es6的模板字串 boolean true或false undefi...

WEB前端知識總結

1 css3中設定max width 為讓更好適應螢幕 2 position absolute 讓元素脫離,z index屬性可以改變堆疊順序 3 如何讓元素透明 background color transparent 4 設定透明度 opacity 0.5 5 後台頁面可以使用bootstrap...