排名不分先後

最近好像都是隻發了一些生活類，吐槽的一些 blog，不更新點技術相關的 可能有人會覺得 這傢伙肯定又在偷懶了。

那麼 好 我要開始裝逼了

類空指向

就是類似於空指標的一種錯誤方式 不會在 console 上報錯 非常難找的問題

resp.data.user.avatar

//如果這個user是null的話 這麼呼叫不會報錯 也不會向下執行 非常坑

//如果你想判斷這個avatar的話 要這麼做

if(resp.data.user && resp.data.user.avatar){
 //do...
}

ES6 箭頭函式

箭頭函式和非箭頭函式也是有很大區別的

//普通匿名函式寫法
api()
.then(function(resp){
 this.count()
 //注意這個this 不是能正常使用的 count會是個undefined
})


//ES6 箭頭函式
api()
.then(resp => {
 this.count()
 //這裡沒毛病
})

vuetify

這是一個基於 Google Material 設計語言的 UI 框架，可以在 Vue.js 執行。

只是安裝方式有點特殊，並且它的外掛安裝方式也很特殊。

例如 vuetify 的 dialog

import VuetifyDialog from 'vuetify-dialog'
import vuetify from './plugins/vuetify';

Vue.use(VuetifyDialog,{
 context: {
 vuetify
 }
})

這就導致你寫 UI 的時候 要面向 Google 程式設計。（雖說其他後端語言也差不多 笑）

vue-cli

如果你是要新建立一個專案，並且這個專案規模不是特別大。

我非常推薦你使用 vue-cli 建立，說簡單點兒 這會提升 b 格。

廢話少說 上圖

vue create your_project_name

vue ui

vue ui 會開啟一個視覺化頁面 像是上圖那樣。

然後在裡面匯入由 vue-cli 建立的專案就可以和上圖一樣了 :)

非同步和同步

其實之前有個非常蠢的想法。

就是在使用者輸完表單之後，立即和伺服器進行驗證，然後將結果重新整理到 UI 上。

但是這個重新整理 UI 需要一個同步操作。

我就一個勁的折騰怎麼去搞定將 axios 的非同步操作變成同步。

如果是之前的 jQuery 就非常簡單麼 只需要將裡面的 aysnc 屬性改掉就可以了。

但是你每次發請求 瀏覽器都會在 console 上提示 不推薦 XHR 同步請求。

為啥呢，因為瀏覽器裡面頁面是單執行緒的，如果你的請求是同步的，那麼就會導致每個請求都會讓頁面卡住一定的時間。

所以我最後還是改成了逐步驗證的方式 讓所有的請求都是非同步操作的。

執行和部署

如果你本地開發

執行 serve(有些專案是 dev) 會開放一個埠號 讓你訪問使用者介面，並進行接近實時的 UI 調整。

如果你是要部署到線上 需要先執行 build 會在輸出目錄裡面生成靜態檔案。

再把這些檔案部署到伺服器上 像是：

• nginx
• caddy

這裡我非常推薦 caddy，它是一個基於 golang 開發的伺服器，部署輕量化，並且帶有管理 api，非常良好的支援 Http2，並且 支援 http3。

TIPS

這裡只記錄一些剛開始玩的專案，在後面的開發裡，還會遇到更多問題。
例如頁面之間的重新整理，等等等等。

所以很快就會有下一章的。

希望能幫到你。

以上就是學習 Vue.js 遇到的那些坑的詳細內容，更多關於學習 Vue.js 遇到的坑的資料請關注我們其它相關文章！