我練習專案眼中的 vue

sunseekers發表於2019-03-03
Vue

因為畢業設計開始了 vue 的學習之路，曾寫過一些入門的 vue 小白學習文章系列（2018 我所瞭解的 Vue 知識大全（一））。如今已經工作半年了，這一次想說說我我平時練習專案中的 vue ，我習慣採用 ES6 書寫,僅供參考，如果有可以改進的希望能夠學習到，下次我說說我在工作中的 vue

練習的 參考專案，在專案中對於註釋我自己還是很滿意的哈哈哈

  1. 在註冊，提交訂單，新增按鈕請求介面，為了防止使用者的重複提交我們前端可以進行簡單處理(函式節流或者標誌位開關)
//函式節流，當一個函式被反覆呼叫的時候，他只會執行一次，函式柯里化，呼叫一個函式，返回另一個函式
export function debounce(func,delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}
複製程式碼
  1. 我們在子元件裡面定義了一個方法，在父元件的兄弟元素中呼叫，使他改變子元件裡面某些性質，或者傳遞資料(ps:可能描述有一點不對)，在父元件的兄弟元素裡面呼叫子元件，好像有點意思，我們要怎麼去實現呢？？

vue 中有一個 ref 特性，為了該元件賦予一個 ID 引用，可以通過引用可以獲取到子元件裡面的內容,但是我們要注意 $refs 只會在元件渲染完成之後生效，並且他們不是響應式的，避免在模板或者計算屬性中訪問 $refs

我練習專案眼中的 vue
我練習專案眼中的 vue

在父元件中的兄弟元素中通過 this.$refs.searchBox.setQuery(query) 進行引用詳細見 search 元件92行和 search-box 元件的33行

  1. 在我們請求介面的時候，最好進行邊界條件處理(異常處理)，避免因為介面導致頁面無響應假死(player的322行)
getLyric() {//獲取歌詞格式化
  this.currentSong.getLyric().then((lyric) => {
    if (this.currentSong.lyric !== lyric) {
      return
    }
    this.currentLyric = new Lyric(lyric, this.handleLyric)//當前歌曲的歌詞
    if (this.playing) {//當我們歌曲在播放的時候，才會有歌詞，
      this.currentLyric.play()
    }
  }).catch(() => {//異常處理，清理
    this.currentLyric = null
    this.playingLyric = ``
    this.currentLineNum = 0
  })
},
複製程式碼

異常處理，邊界處理，我們前端應該要考慮，我們永遠都不知道使用者會怎麼進行操作

  1. mapMutations 是對 mutations 做一層封裝，在 methods，用擴充套件運算子，就可以做一個物件的對映，對映一個方法名
我練習專案眼中的 vue
  1. vue 中，在 data，prop，computed 裡面定義的資料會自動給她們新增一個 set和 get方法，用來實時監測資料的變化，然後響應到DOM 中，如果我們不需要監測變化，只是獲取資料用來暫時儲存，我們可以直接在方法中定義使用
我練習專案眼中的 vue
  1. 在同一個元件裡面如果有兩個地方用到同樣一段程式碼，我們可以抽象出來用一個公共的方法，如果是兩個或者多個元件用到大量相同的一長段程式碼，我們可以用 mixin抽象出來（元件裡面有的同名的方法會覆蓋 mixin 裡面的方法，因為元件裡面的東西優先順序更高）
我練習專案眼中的 vue
我練習專案眼中的 vue

專案書寫建議

  1. 我們的基礎元件(子元件)中，沒有任何邏輯處理，基礎元件值負責派發事件，告訴父元件或者外部元件有個事件被觸發了，以及告訴外部，他所知道的所有資訊，所有的業務邏輯處理都在父元件進行，由外部觸發事件
  1. 為了今後程式碼向後可擴充套件性，我們不在具體的方法中寫入具體的數字,最好通過 const 常量來引入。我們在引入子元件的時候，最好子元件裡面都是抽象的東西，通過父元件去傳遞 suggest 元件的40行
  1. 在 vue-cli 構建工具中，如果要上傳空檔案到 Github 上面需要一個 .gitkeep 檔案，否則空檔案是不會上傳到 github上面的
  1. 給 vuex定義資料的時候首先要想到我們需要什麼資料，相關最底層資料=>state

getter 資料的對映，通常是一個函式，類似計算屬性，可以根據 state 計算出一些屬性，也可以是一些複雜的判斷邏輯

mutation，定義我們修改資料的邏輯，mutation-types 定義我們mutation 需要哪些動作即函式名

  1. 專案命名規範，可以讓我們不經過大腦思考就知道這個檔案是幹什麼的，這個函式有什麼用。管理，儘可以的使得程式碼解耦性強，易於管理，易於查詢，易於分享。變數命名語義化，可減少註釋，清晰易懂
  1. 在 vue 的使用中，如果 data 中的鍵和 methods 物件中定義的函式名稱相同，會有警告提示，因為會出現物件覆蓋物件的情況，所以不允許出現這樣的情況。優先順序關係：props 優先順序 > data 優先順序 > methods 優先順序
  1. 在 vue2.0以上的版本，最終渲染都是通過 render 函式，如果寫的是template 屬性，則需要編譯成 render 函式(生命週期圖可以看出)

期待我的續更吧，或許寫的有點糟糕，我是初學者，如有錯誤之處，請多多請教（sunseekers_）。掘金談技術，公眾號談生活（sunseekers）

相關文章