日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 前言

Composition API是什么?也稱為組合式 API。如果你第一次聽到這個(gè)詞，請(qǐng)認(rèn)真讀完這篇文章。

為遵義等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及遵義網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、遵義網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎ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)。最常見的情況是在 上使用私有屬性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ù)雜得多。總的想法是替換vue-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)安裝自己。

這時(shí)，@vue/composition-api將暴露于全局變量window.VueCompositionAPI。

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
        
{{num}}
 
  
  
  
  
        
{{obj.page}}