最近劲赠，Vue官方發(fā)布了 Composition API RFC。有關(guān)于Vue3.0 Function Base組件相關(guān)討論正如火如荼橄仍。雖然Vue3.0還未發(fā)布诬垂，但是 Vue官方發(fā)布了關(guān)于 Composition API的官方插件，使廣大用戶可以在Vue2.x中享受 Function Base 帶來的新體驗慷彤。下面我會在一個簡單的demo中介紹Composition API使用方法娄蔼。
安裝和使用
yarn add @vue/composition-api
等待composition-api包安裝完成后，我們在項目入口文件中加入Composition API底哗。
import Vue from "vue"
import CompositionApi from "@vue/composition-api"
Vue.use(CompositionApi)
setup函數(shù)
按照官方給出的說法岁诉，setup函數(shù)是一個新的Vue組件選項，是用于在組件中使用Composition API的入口跋选。
setup函數(shù)在組件初始化了props之后涕癣，created之前調(diào)用，這時候我們才能通過setup來傳遞props野建。
綁定數(shù)據(jù)(data)
reactive函數(shù)接受一個對象属划，并返回該對象的代理，通過reactive這種方式我們可以綁定代理對象候生。
import {reactive} from "@vue/composition-api"
export default {
setup(props) {
let vue = react({version:'2.x'})
vue.version = '3.x'
}
return {
vue
}
}
ref是CompositionAPI引入的新概念同眯。作用是使訪問響應(yīng)式的變量不依賴于實例的this。如果使用了ref唯鸭，我們訪問響應(yīng)式的變量時使用.value而不是從this中獲取,其底層是采用reactive方法實現(xiàn)须蜗。
import {ref} from "@vue/composition-api"
export default {
setup() {
const count = ref(0)//count初始值為0，會相應(yīng)變化
count.value = 10;//設(shè)置count值為10，使用.value形式
return {
count//必須將count return 回去
}
}
}
綁定生命周期函數(shù)
可以使用導(dǎo)入的onXXX的形式注冊生命周期函數(shù)明肮，舉個例子：
import {onCreated,onMounted} from "@vue/composition-apai"
export default {
setup() {
onMounted(()=>{
console.log('mounted被觸發(fā)')
})
///...其他類似
}
}
注意:以下生命周期函數(shù)用
setup函數(shù)替代：
- beforeCreated
- created
綁定方法(methods)
在Composition API中菱农，我們使用普通的函數(shù)定義方法，這樣可以最大程度的增加復(fù)用性柿估。例如：
<template>
<button @click="add">click me!</button>
</template>
<script>
export default {
setup() {
function add() {
console.log('add被觸發(fā)')
}
return {
add//必須將函數(shù)return
}
}
}
</script>
外部屬性(props)
定義props和原來的方式一樣循未，props會通過參數(shù)的形式傳入到setup函數(shù)中：
export default {
props:{
name:String
},
setup(props) {
console.log(props.name)
}
}
計算屬性(computed)
計算屬性可以使用Composition API提供的computed函數(shù)進(jìn)行定義：
import {computed,ref} from "@vue/composition-apai"
export default {
setup() {
const a = ref(0)
const b = ref(1);
const total = computed(()=>a.value+b.value)
return {
a,
b,
totla
}
}
}
這樣我們就定義好了一個計算屬性total，total.value = a.value + b.value秫舌。
偵聽器(watch)
在組件中添加watch監(jiān)聽我們可以采用Composition API提供的watch函數(shù)實現(xiàn)：
import {watch,ref} from "@vue/composition-apai"
export default {
setup() {
const count = ref(100);
watch(()=>count.vlaue,()=>{
console.log('count數(shù)值發(fā)生變化了')
})
const.value = 200;
return {
count
}
}
}
實例屬性($refs)
在Composition API中使用ref特性獲取組件實例或者dom節(jié)點的妖，舉個例子說明：
<template>
<div>
<hello-world ref="helloWold"></hello-world>
<button ref="btn"></button>
</div>
</template>
import {ref} from "@vue/composition-api"
export default {
setup() {
const helloWorld = ref(null);//helloworld組件實例
const btn = ref(null);//button dom節(jié)點對象
return {
btn,
helloWorld
}
}
}
綜合例子
<template>
<div>
<button @click="increment" ref="btn">{{titleCount}}</button>
</div>
</template>
<script>
import {onMounted,computed,ref,watch} from "@vue/composition-api"
export default {
props:{
prefix:String
},
setup(props) {
const btn = ref(null);
const count = ref(0);
const title = ref(`${props.prefix},vue composition api`);
const titleCount = computed(()=>title.value +':'+ count.value)
onMounted(()=>{
alert('mounted')
})
watch(()=>count.value,()=>alert('count改變了:'+count.value))
function increment() {
// eslint-disable-next-line no-console
count.value++;
// eslint-disable-next-line no-console
console.log(btn.value);
}
return {
btn,
increment,
title,
count,
titleCount
}
}
}
</script>
下圖是運(yùn)行效果：
總結(jié)
經(jīng)過以上實踐，總結(jié)Composition API以下特點：
優(yōu)點：
- 使用簡潔足陨，方便嫂粟，代碼量小
- 函數(shù)特性，復(fù)用性強(qiáng)
- 容易做類型推導(dǎo)墨缘，方便IDE做出語法提示
缺點：
- 需要額外加載composition-api包文件星虹，增加了打包后的文件體積，對網(wǎng)頁性能有一定影響
- 增加了一定的學(xué)習(xí)成本
