Vue的使用技巧是什麼,學習難度怎麼樣?

Vue的使用技巧是什麼?Web前端學習難度怎麼樣?Vue是一套用於構建用戶界面的漸進式框架,是前端工程師必須要掌握的知識點。在學完HTML和CSS樣式以及JS基礎知識後,很多人會反應Vue學習難度大,下面就給大家講解幾個有用的Vue使用技巧。
在這裏插入圖片描述
1、狀態分享

隨着組件的細化,你會遇到多組件狀態共享的情況,Vue可以解決這類問題,但如果應用不夠大,爲避免代碼繁瑣冗餘,最好不要使用它。今天我們介紹的是 vue.js 2.6新增加的 Observable API,通過使用這個api我們可以應對一些簡單的跨組件數據狀態共享的情況。

首先我們將在組件外創建一個store,然後在App.vue組件裏面使用 store.js 提供的store和mutation方法,同理其它組件也可以這樣使用,從而實現多個組件共享數據狀態。

2、去除多餘的樣式

隨着項目越來越大,書寫的不注意,不自然的就會產生一些多餘的CSS。一旦項目大了以後,多餘的CSS會越來越多,導致包越來越大,從而影響項目運行性能,所以有必要在正式環境去除掉這些多餘的CSS。你可以藉助purgecss,它支持 CLI、JavascriptApi、Webpack 等多種方式使用,通過這個庫,我們可以很容易的去除掉多餘的CSS。

3、長列表性能優化

Vue會通過object.defineProperty對數據進行劫持,來實現視圖響應數據的變化,然而有些時候我們的組件就是純粹的數據展示,不會有任何改變,我們就不需要 Vue來劫持我們的數據。在大量數據展示的情況下,這能夠明顯的減少組件初始化的時間,那如何禁止Vue劫持我們的數據呢?你可以通過object.freeze方法來凍結一個對象,一旦被凍結的對象就再也不能被修改。在這裏插入圖片描述
點此鏈接:自己是一名從事了多年開發的web前端老程序員,今年年初我花了一個月整理了一份最適合2020年學習的前端學習乾貨,想分享給每一位喜歡前端的小夥伴
需要說明的是,這裏只是凍結users的值,引用不會被凍結,當我們需要reactive數據的時候,我們可以重新給users賦值。

4、函數式組件

函數式組件,即無狀態,無法實例化,內部沒有任何生命週期處理方法,非常輕量,因而渲染性能高,特別適合用來只依賴外部數據傳遞而變化的組件。

寫法如下:

在 template標籤裏面標明 functional ;

只接受 props值;

不需要 script標籤。

當然,關於Vue的使用技巧還有很多,比如監聽組件的生命週期、屬性事件傳遞、作用域插槽等。如果你想快遞進入前端行列,選擇專業的學習是很好的方式!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章