你必學的Vue.js的進階教程

語言: CN / TW / HK

點擊關注“八戒技術團隊”,閲讀更多技術乾貨

Vue.js 以其簡單易用的特點而被廣泛使用, 本篇文章將會重點介紹在 Vue.js 應用中的一些 API 使用方法和使用場景,希望能給你帶來一些幫助。

vm.$root 的使用

$root 是 vm 的一個屬性,指向當前 Vue 組件樹的根組件,通過 $root 屬性,我們可以獲取根組件上掛載的屬性或者方法。 面通過兩個例子來具體説明。

例子 1 : SSR 端數據請求的實現

在 Vue 的應用中,我們需要方便地使用 axios 的 API,在每個 Vue 的組件中,能夠通過 vm.$axios 方便地使用 axios 庫進行數據的請求。相信這個問題大家都不陌生,一行代碼就可以解決了,在 Vue 的原型上掛載一個 $axios 的屬性。

這行代碼已經可以很好地滿足我們的需求了,但是在 SSR 渲染時卻不能正常運行。 因為在 SSR 的渲染過程中,axios 的代碼是運行在 Server 端,Node 端的 axios 發起請求時,已經沒有本次瀏覽器端請求過來的 header 信息,特別是 cookie 相關的數據,將會導致登錄驗證等接口校驗的失敗。

這種情況下,$root 就可以派上用場了,我們可以基於瀏覽器端的 header 信息去初始化一個 axios實例,並將其掛在到本次 SSR的根組件上,這樣所有的子組件就都可以通過 $root 使用了。更進一步,我們可以基於 defineProperty 來實現 vm.$axios 的調用。

例子 2: 動態化加載子組件

在 SSR 的應用中,所有的代碼都被打包到 Server bundle 和 Client bundle 中,在普通的應用這不是一個問題,但對於需要動態加載遠端第三方組件的場景來説,就無法實現了,因為 Server Render 沒有提供相關的接口,當然我們可以把動態化的組件一股腦全部掛載到 Vue 的全局 components 中去,但這並不是一個比較好的解決辦法。

在這個場景下,我們可以使用 $root 來解決這個問題。 看一段簡單的代碼。

我們將動態加載的組件註冊在 SSR 端的根組件上,在具體的組件中,我們可以通過訪問 $root 獲取到具體 component 引用,動態地註冊這個組件。

vm.$scopedSlots

基於 scopedSlots 我們可以實現強大的組件複用能力, scopedSlots 可以在 template 模版或者 render 函數中使用。 scopedSlots 提供默認的顯示內容,當調用者沒有初始化這個插槽時,將會使用默認的內容來渲染,默認的內容其實就是返回的一個 VNode 節點。

下面顯示一個 scopedSlot 默認內容的 render 函數定義:

該 render 函數對應的 template 模版為

scopedSlots 的例子,基於 scopeSlots 實現一個聲明式的數據獲取組件。在這個例子中,我們基於 scopeSlots 實現了一個聲明式組件,提供了 loader, allLoaded, 數據渲染的插槽。

使用也很簡單

scopedSlots 提供了在父組件中使用子組件數據的能力,基於此我們可以實現行為和展現的分離。子組件進行統一的行為處理(如數據獲取等),在父組件中依賴子組件的數據和行為,進行差異化的 UI 展現或交互處理。

vm.$listeners

vm.$props

vm.$scopedSlots

$listeners 和 $props 是專為實現高階組件而存在的,通過這兩個屬性,我們可以很容易地在 Vue 裏實現高階組件。

render 函數

大部分情況下 render 函數都可以使用 template 來替代,但是有一種情況下,我們必須使用 render 函數,那就是當你什麼都不渲染的時候。 這常常發生在我們需要自定義渲染情況下,比如我們需要把數據通過 canvas 來進行渲染,這個時候 Vue 默認的渲染器就不是必須的了,但是 Vue 的組件裏又必須有渲染相關的定義,這時我們可以通過 render 函數返回一個空值來實現,在 created 或者 mounted 等生命週期函數中處理我們的自定義渲染邏輯。

基於自定義的 render,我們可以實現類似聲明式的 canvas 組件,形如以下的定義。

結語

針對 Vue.js 的進階的用法就介紹到這裏,如果你有其他想要了解的,歡迎留言。

希望以上內容能對有需要的人有所幫助

歡迎大家一起探討交流

請點擊下方名片關注我們