嘿！
在這篇文章中，我想分享一下我最近試用Vue 3 Beta版本的經驗，特別是有關您計劃將現有Vue 2應用程式遷移到升級版本Vue 3時可能要注意的一些注意事項！
下面的列表將幫助您邁向Vue 3最佳實踐，並避免在Vue 2中遷移到Vue 3時可能遇到麻煩的一些用例。
讓我們繼續！
避免使用Vue事件總線
簡短總結：不要使用\$on/$once/$off API，因為它會在Vue公司3被棄用。
如果您聽說過事件總線，那麼當您遇到需要為從孩子向父母發送事件或從孩子向父母發送事件的快捷方式的情況下，它是Vue開發中的常用術語。您只需在瀏覽器中搜索「事件事件總線」，就會發現很多說明它的文章。
需要注意的一件事是，這不是Vue recommended 推薦的官方方法。我之所以這麼說，是因為您可能永遠不會在Vue官方文檔中看到Event Bus。最接近的參考來自Vue 1.x的遷移指南，該指南在此處稱為「 eventHub」，建議您改用Vuex。
在簡單的情況下，該模式可以代替$ dispatch和$ broadcast，但是對於更複雜的情況，建議使用專用的狀態管理層，例如Vuex。
您也可以查看RFC文檔，以了解為什麼他們不推薦它。
由於事件總線概念實際上是一種發布-訂閱模式，這是編程中的一種常用方法，因此您實際上仍然可以使用該概念，但是可以使用mitt之類的不同庫。
這是事件總線以及如何重構它的示例：
// Vue 2 example of event busimport Vue from'vue';const eventBus = new Vue();// subscribeeventBus.$on('sandwich-made', () => console.log('sandwich made!'));// publisheventBus.$emit('sandwich-made');// Refactor to use 3rd party library like mittimport mitt from'mitt';const eventBus = mitt();// subscribeeventBus.on('sandwich-made', () => console.log('sandwich made!'));// publisheventBus.emit('sandwich-made');將Filter函數重構為Method
根據RFC docs，過濾器將被刪除。
Filter在那裡可以幫助您「格式化」您的值，例如：大寫，添加貨幣，短url等。也許它也受到Angular Filter的啟發。看起來不錯，因為您可以在模板語法中實現它。例如，下面是一個toCurrency將貨幣格式添加到價格整數值的過濾器：
<divclass="currency">{{ price | toCurrency }}</div>注意：價格值為25，然後過濾toCurrency為$ 25.00
儘管它看起來不錯，但是請記住，它實際上是一個「語法糖」，因為在運行時，toCurrency只要更新價格，它就始終會運行以格式化價格。
如果你重構toCurrency作為method替代，它會被寫成這樣：
<divclass="currency">{{ toCurrency(price) }}</div>Vue腳本中的重構僅是將函數從filter移至method：
// before{filter: { toCurrency (value) {return`$${value.toFixed(2)}` } }}// after{methods: { toCurrency (value) {return`$${value.toFixed(2)}` } }}涼！但是，如果將filter登記為全局過濾器怎麼辦？
Vue.filter('toCurrency', function (value) {return`$${value.toFixed(2)}`})在這種情況下，我建議您刪除上面的全局過濾器代碼，並將過濾器功能移到首先成為可以共享的純輔助功能。例如：
// helper/filter.jsexportfunctiontoCurrency (value) {return`$${value.toFixed(2)}`}然後，您可以將輔助函數導入到需要使用它的組件中。例如：
// price-component.vueimport { toCurrency } from'./helper/filter'// your vue object{methods: { toCurrency }}注意：只是toCurrency可以使用；）感謝ES6對象屬性的簡寫
將組件重構model為.sync
根據RFC文檔，Vue 3將棄用modelVue組件中的選項，並將其替換sync為multiple model。
如果您model在組件中使用了選項來設置雙向數據綁定，則可以將其重構為.sync。例子如下：
// BEFORE// parent component<child-component v-model="visible"/>// the model option in the child component's Vue object<script>{model: {prop: 'visible',event: 'change' }}</script>重構使用.sync：
// AFTER// parent component<child-componentv-bind:visible.sync="visible"/>// delete the model option in the child component's Vue object當您需要升級到Vue 3的時候，您只需將重命名為.sync即可v-model：
// Vue 3// parent component<child-componentv-model:visible="visible"/>容易擠檸檬！
警惕使用第三方插件
與其他框架一樣，Vue框架的魅力在於，它為社區提供了創建自己的插件的API。
但是在Vue 3中，將進行重大更改，這將使某些插件不再兼容。一個主要的變化是，插件的安裝和應用程式的初始化將與原始Vue實例保持不變。例如：
BEFORE, in Vue 2Vue.use(myPlugin);new Vue({/* your vue initialization */});// AFTER, in Vue 3const app = createApp(); // new method to initialize Vueapp.use(myPlugin); 在插件的作者對其進行升級之前，最有可能無法重構代碼以使用Vue 3中的插件。因此，這意味著，如果您打算進行遷移，則應考慮使用第三方插件，因為這將成為阻止程序。
檢查您正在使用的插件的問題或路線圖，以查看它們是否計劃升級以支持Vue3。這是將支持Vue 3的插件的示例：
Bootstrap VueVue MultiselectVuetify如果您使用過的插件還沒有升級到Vue 3的計劃，則可以通過要求該問題的作者支持Vue 3甚至參與其中的升級來幫助您做出貢獻。
使用@vue/composition-api寫您的組件
我非常感謝Vue社區提供的@vue/composition-api。它不僅可以供開發人員使用Composition API進行動手操作，而且還提供API，它將成為Vue 3中的核心方法。
例如，defineComponent。它將成為在Vue 3中編寫Vue組件的新標準，並且您已經可以在Vue 2應用程式中使用它了！
要使用它，請安裝@vue/composition-api並更換Vue對象組件啟動。例如：
// BEFOREimport Vue from'vue';exportdefault Vue.extend({name: 'my-component',/* your component props, data, methods, etc. */});只需替換它即可使用defineComponent：
// AFTERimport { defineComponent } from'@vue/composition-api';exportdefault defineComponent({name: 'my-component',/* your component props, data, methods, etc. */});你問有什麼區別？幾乎沒有區別，這就是它的美！您的組件應與往常一樣工作，並添加了「props」，現在您可以重構組件以使用Composition API，如果您希望：
// Refactor to use setup()import { defineComponent } from'@vue/composition-api';exportdefault defineComponent({name: 'my-component', setup (props) {/* your component props, data, methods, etc. */ }});注意：如果您喜歡Typescript，我敢肯定您會喜歡composition API，因為它將有助於改善組件的輸入。;）
更重要的是
還會有另一個重大變化，例如:
渲染功能API更改將作用域內的插槽統一為僅插槽要刪除的keyCode修飾符內聯模板將被刪除但是，如果您不經常使用它，並且您認為可以輕鬆地對其進行重構，則取決於您決定是早晚進行更改。
摘要
我希望本文能幫助您為升級到Vue 3做好準備。作為Vue開發人員，我很高興看到它的到來，因為它使用更好的API來處理反應性，更多的Typescript支持以及開發中的更好做法。
如果我錯過了要定義的任何API或說明，請告訴我們，感謝您的反饋。謝謝，祝你有美好的一天！