當Vue2遇到Composition API，它們之前到底能擦出怎樣的火花？
前言
Composition API是什么?也稱為組合式 API。如果你第一次聽到這個詞，請認真讀完這篇文章。
官網(wǎng)有這樣一段解釋：
通過創(chuàng)建 Vue 組件，我們可以將界面中重復的部分連同其功能一起提取為可重用的代碼段。僅此一項就可以使我們的應用在可維護性和靈活性方面走得相當遠。然而，我們的經(jīng)驗已經(jīng)證明，光靠這一點可能并不夠，尤其是當你的應用變得非常大的時候——想想幾百個組件。處理這樣的大型應用時，共享和重用代碼變得尤為重要。
我們之前創(chuàng)建組件更多地是使用OptionAPI(data、computed、methods、watch) ，但是，當我們的組件開始變得更大時，邏輯關(guān)注點的列表也會增長。尤其對于那些一開始沒有編寫這些組件的人來說，這會導致組件難以閱讀和理解。
如果能夠?qū)⑼粋€邏輯關(guān)注點相關(guān)代碼收集在一起會更好。而這正是組合式 API 使我們能夠做到的。
提到組合式API，我們可能更多地想到在Vue3中使用。但是目前國內(nèi)大部分Vue項目都還是Vue2項目，如果遷移到Vue3，可能還需要花費一定的精力。你在此處可能會有一個疑問：Vue2項目可以遷移到Vue3嗎?答案是可以的。如果你想知道怎么操作，可以點擊下方鏈接:
- https://github.com/vuejs/vue-next/tree/master/packages/vue-compat
但是，遷移之前需要你主要幾點問題，官方這樣解釋：
雖然我們努力使遷移構(gòu)建盡可能模仿 Vue 2 的行為，但仍有一些限制可能會阻止您的應用程序有資格升級：
- 依賴 Vue 2 內(nèi)部 API 或未記錄行為的依賴項。最常見的情況是在 上使用私有屬性VNodes。如果您的項目依賴于Vuetify、Quasar或ElementUI等組件庫，最好等待它們的 Vue 3 兼容版本。
- Internet Explorer 11 支持：Vue 3 已正式放棄支持 IE11 的計劃。如果您仍然需要支持 IE11 或更低版本，則必須繼續(xù)使用 Vue 2。
- 服務器端渲染：遷移構(gòu)建可用于 SSR，但遷移自定義 SSR 設(shè)置要復雜得多。總的想法是替換vue-server-renderer用@vue/server-renderer。Vue 3 不再提供捆綁渲染器，建議將 Vue 3 SSR 與Vite一起使用。如果您正在使用Nuxt.js，那么等待 Nuxt 3 可能會更好。
可以看到，從Vue2遷移到Vue3肯定需要一定的成本，那么有什么辦法讓我在Vue2也可以用到Composition API。其實，現(xiàn)在已經(jīng)出了解決方案。你可以上網(wǎng)搜下這樣一個庫@vue/composition-api，這個庫是專門為Vue使用Composition-api而生，目前是發(fā)布候選版。
安裝與使用
NPM
- npm install @vue/composition-api
- # or
- yarn add @vue/composition-api
SFC
必須通過vue.use()將@vue/composition-api作為插件安裝，然后才能使用composition-api編寫組件。所以，請這樣。一般在你的項目文件夾中的main.js編輯如下：
- import Vue from 'vue'
- import VueCompositionAPI from '@vue/composition-api'
- Vue.use(VueCompositionAPI)
然后，在組件中這樣使用。
- import {reactive, toRefs} from '@vue/composition-api'
- export default {
- name: 'HelloWorld',
- props: {
- msg: String
- },
- setup(props){
- const obj = reactive({
- name:'maomin',
- age:18
- });
- console.log(props.msg);
- return {
- ...toRefs(obj)
- }
- }
- }
當你遷移到Vue 3時，只要將@vue/compositionapi替換為vue，你的代碼就可以正常工作了。
另外，你需要注意的是，如果你在使用TypeScript，為了正確推斷Vue組件選項中的類型，需要使用defineComponent定義組件。
- import { defineComponent } from '@vue/composition-api'
- export default defineComponent({
- // type inference enabled
- })
CDN
如果你想使用CDN，同樣也有辦法。在vue之后包含@vue/compositionapi，它將自動安裝自己。
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
- <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.13"></script>
這時，@vue/composition-api將暴露于全局變量window.VueCompositionAPI。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <p>{{num}}</p>
- <div>{{obj.page}}</div>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
- <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.0.0-rc.13"></script>
- <script>
- const { ref, reactive } = VueCompositionAPI
- new Vue({
- el: '#app',
- setup() {
- const num = ref(0);
- const obj = reactive({
- page: 1,
- pageSize: 10
- })
- return {
- num,
- obj
- }
- }
- })
- </script>
- </body>
- </html>
結(jié)語
@vue/composition-api支持所有現(xiàn)代瀏覽器和IE11+。你可以在Vue2項目使用它，然后在合適的時機無縫銜接到Vue3項目。
下面是@vue/composition-apigithub網(wǎng)址：
- https://github.com/vuejs/composition-api
另外，關(guān)于CompositionApi的用法還有很多，可以查看下方的官方文檔：
- https://v3.cn.vuejs.org/guide/composition-api-introduction.html
本文轉(zhuǎn)載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端歷劫之路公眾號。
