Vue3中的大熱門——其他技術

全局安裝/配置API更改

在Vue2.x中對全局屬性和全局API函數是這麼玩的


Vue3中的大熱門——其他技術


現在,讓我們看看它如何在Vue 3中運行:


Vue3中的大熱門——其他技術

您可能已經注意到,每個配置都限於使用定義的某個Vue應用程序createApp。

它可以使您的代碼更易於理解,並且不易出現由第三方插件引起的意外問題。當前,如果某些第三方解決方案正在修改Vue對象,則可能會以意想不到的方式(尤其是全局混合)影響您的應用程序,而Vue 3則無需擔心。


Fragment


如果您創建一個Vue組件,則它只能有一個根節點。

這意味著無法創建這樣的組件:


Vue3中的大熱門——其他技術

原因是代表任何Vue組件的Vue實例都需要綁定到單個DOM元素中。創建具有多個DOM節點的組件的唯一方法是通過創建不具有基礎Vue實例的功能組件。

當前,Vue 2中可以使用vue-fragments庫,而在Vue 3中,您可以立即使用它!vue-fragments參考寫法


Vue3中的大熱門——其他技術

Suspense


其可以幫助我們更簡易的使用異步請求及處理Loading組件的展示


Vue3中的大熱門——其他技術

Suspense可以掛起Loading內容將一直顯示到Suspended-component完全渲染為止。掛起可以等待,直到該組件被下載(如果這是一個異步組件),或者在setup功能上執行一些異步操作。


多個v-model


V模型是一種指令,可用於在給定組件上實現雙向綁定。我們可以傳遞反應性屬性並從組件內部對其進行修改。

看看v-model:


Vue3中的大熱門——其他技術

將以上示例重寫為以下語法將具有完全相同的效果:


Vue3中的大熱門——其他技術

假如我們希望用v-model同樣給該元素添加 change事件、變更checked值進行綁定的話。不幸的是,v-model每個組件只能有一個組件。

在Vue 3中這不會成為問題!您將能夠提供v-model屬性名稱,並根據需要擁有任意數量的屬性。在下面,您可以v-model在表單組件中找到兩個的示例:


Vue3中的大熱門——其他技術

Portals


Portals是特殊的組件,用於在當前組件之外呈現某些內容。如果父組件有overflow: hidden 或 z-index 樣式,子組件作為模態框、彈出窗口以及通常顯示在頁面頂部的組件的時候,可能會因為z-index不足,被其他元素覆蓋,有了Portals就可以放心了!

對於每個Portals,我們需要指定它的目標目標,在其中將呈現Portals內容。在下面,您可以看到portal-vue庫的實現,Vue 2中可以這麼用:


Vue3中的大熱門——其他技術

Vue 3將附加對portals的開箱即用支持!


新的自定義指令API


自定義指令API在Vue 3中將略有變化,以更好地與組件生命週期保持一致。這項更改將使API更加直觀,從而使新手更容易理解和學習API。

這是當前的自定義指令API:

Vue3中的大熱門——其他技術

……這就是Vue 3中的樣子。

Vue3中的大熱門——其他技術

即使這是一項重大更改,也應該使用Vue兼容性構建輕鬆涵蓋。

Vue3中的大熱門——其他技術


分享到:


相關文章: