當(dāng)Vue2遇到Composition API，它們之前到底能擦出怎樣的火花？
前言
Composition API是什么?也稱為組合式 API。如果你第一次聽(tīng)到這個(gè)詞，請(qǐng)認(rèn)真讀完這篇文章。
官網(wǎng)有這樣一段解釋：
通過(guò)創(chuàng)建 Vue 組件，我們可以將界面中重復(fù)的部分連同其功能一起提取為可重用的代碼段。僅此一項(xiàng)就可以使我們的應(yīng)用在可維護(hù)性和靈活性方面走得相當(dāng)遠(yuǎn)。然而，我們的經(jīng)驗(yàn)已經(jīng)證明，光靠這一點(diǎn)可能并不夠，尤其是當(dāng)你的應(yīng)用變得非常大的時(shí)候——想想幾百個(gè)組件。處理這樣的大型應(yīng)用時(shí)，共享和重用代碼變得尤為重要。
我們之前創(chuàng)建組件更多地是使用OptionAPI(data、computed、methods、watch) ，但是，當(dāng)我們的組件開始變得更大時(shí)，邏輯關(guān)注點(diǎn)的列表也會(huì)增長(zhǎng)。尤其對(duì)于那些一開始沒(méi)有編寫這些組件的人來(lái)說(shuō)，這會(huì)導(dǎo)致組件難以閱讀和理解。
如果能夠?qū)⑼粋€(gè)邏輯關(guān)注點(diǎn)相關(guān)代碼收集在一起會(huì)更好。而這正是組合式 API 使我們能夠做到的。
提到組合式API，我們可能更多地想到在Vue3中使用。但是目前國(guó)內(nèi)大部分Vue項(xiàng)目都還是Vue2項(xiàng)目，如果遷移到Vue3，可能還需要花費(fèi)一定的精力。你在此處可能會(huì)有一個(gè)疑問(wèn)：Vue2項(xiàng)目可以遷移到Vue3嗎?答案是可以的。如果你想知道怎么操作，可以點(diǎn)擊下方鏈接:
- https://github.com/vuejs/vue-next/tree/master/packages/vue-compat
但是，遷移之前需要你主要幾點(diǎn)問(wèn)題，官方這樣解釋：
雖然我們努力使遷移構(gòu)建盡可能模仿 Vue 2 的行為，但仍有一些限制可能會(huì)阻止您的應(yīng)用程序有資格升級(jí)：
- 依賴 Vue 2 內(nèi)部 API 或未記錄行為的依賴項(xiàng)。最常見(jiàn)的情況是在 上使用私有屬性VNodes。如果您的項(xiàng)目依賴于Vuetify、Quasar或ElementUI等組件庫(kù)，最好等待它們的 Vue 3 兼容版本。
- Internet Explorer 11 支持：Vue 3 已正式放棄支持 IE11 的計(jì)劃。如果您仍然需要支持 IE11 或更低版本，則必須繼續(xù)使用 Vue 2。
- 服務(wù)器端渲染：遷移構(gòu)建可用于 SSR，但遷移自定義 SSR 設(shè)置要復(fù)雜得多?？偟南敕ㄊ翘鎿Qvue-server-renderer用@vue/server-renderer。Vue 3 不再提供捆綁渲染器，建議將 Vue 3 SSR 與Vite一起使用。如果您正在使用Nuxt.js，那么等待 Nuxt 3 可能會(huì)更好。
可以看到，從Vue2遷移到Vue3肯定需要一定的成本，那么有什么辦法讓我在Vue2也可以用到Composition API。其實(shí)，現(xiàn)在已經(jīng)出了解決方案。你可以上網(wǎng)搜下這樣一個(gè)庫(kù)@vue/composition-api，這個(gè)庫(kù)是專門為Vue使用Composition-api而生，目前是發(fā)布候選版。
安裝與使用
NPM
- npm install @vue/composition-api
- # or
- yarn add @vue/composition-api
SFC
必須通過(guò)vue.use()將@vue/composition-api作為插件安裝，然后才能使用composition-api編寫組件。所以，請(qǐng)這樣。一般在你的項(xiàng)目文件夾中的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)
- }
- }
- }
當(dāng)你遷移到Vue 3時(shí)，只要將@vue/compositionapi替換為vue，你的代碼就可以正常工作了。
另外，你需要注意的是，如果你在使用TypeScript，為了正確推斷Vue組件選項(xiàng)中的類型，需要使用defineComponent定義組件。
- import { defineComponent } from '@vue/composition-api'
- export default defineComponent({
- // type inference enabled
- })
CDN
如果你想使用CDN，同樣也有辦法。在vue之后包含@vue/compositionapi，它將自動(dòng)安裝自己。
- <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>
這時(shí)，@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é)語(yǔ)
@vue/composition-api支持所有現(xiàn)代瀏覽器和IE11+。你可以在Vue2項(xiàng)目使用它，然后在合適的時(shí)機(jī)無(wú)縫銜接到Vue3項(xiàng)目。
下面是@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)載自微信公眾號(hào)「前端歷劫之路」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端歷劫之路公眾號(hào)。
