使用Vue.js場遇到的問題有哪些

本篇文章給大家分享的是有關使用Vue.js場遇到的問題有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

類空指向

就是類似于空指針的一種錯誤方式 不會在 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。

以上就是使用Vue.js場遇到的問題有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。