最近,Vue官方发布了 Composition API RFC。有关于Vue3.0 Function Base组件相关讨论正如火如荼。虽然Vue3.0还未发布,但是 Vue官方发布了关于 Composition API的官方插件,使广大用户可以在Vue2.x中享受 Function Base 带来的新体验。下面我会在一个简单的demo中介绍Composition API使用方法。
安装和使用
1 | yarn add @vue/composition-api |
等待composition-api包安装完成后,我们在项目入口文件中加入Composition API。1
2
3import Vue from "vue"
import CompositionApi from "@vue/composition-api"
Vue.use(CompositionApi)
setup函数
按照官方给出的说法,setup函数是一个新的Vue组件选项,是用于在组件中使用Composition API的入口。
setup函数在组件初始化了props之后,created之前调用,这时候我们才能通过setup来传递props。
绑定数据(data)
ref
是CompositionAPI引入的新概念。作用是使访问响应式的变量不依赖于实例的this
。如果使用了ref
,我们访问响应式的变量时使用.value
而不是从this
中获取。1
2
3
4
5
6
7
8
9
10import {ref} from "@vue/composition-apai"
export default {
setup() {
const count = ref(0)//count初始值为0,会相应变化
count.value = 10;//设置count值为10,使用.value形式
return {
count//必须将count return 回去
}
}
}
绑定生命周期函数
可以使用导入的onXXX
的形式注册生命周期函数,举个例子:1
2
3
4
5
6
7
8
9
10
11
12import {onCreated,onMounted} from "@vue/composition-apai"
export default {
setup() {
onCreated(()=>{
console.log('created被触发')
})
onMounted(()=>{
console.log('mounted被触发')
})
///...其他类似
}
}
绑定方法(methods)
在Composition API中,我们使用普通的函数定义方法,这样可以最大程度的增加复用性。例如:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<template>
<button @click="add">click me!</button>
</template>
<script>
export default {
setup() {
function add() {
console.log('add被触发')
}
return {
add//必须将函数return
}
}
}
</script>
外部属性(props)
定义props
和原来的方式一样,props
会通过参数的形式传入到setup
函数中:
1 | export default { |
计算属性(computed)
计算属性可以使用Composition API提供的computed
函数进行定义:1
2
3
4
5
6
7
8
9
10
11
12
13import {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
监听我们可以采用Composition API提供的watch
函数实现:1
2
3
4
5
6
7
8
9
10
11
12
13import {watch,ref} from "@vue/composition-apai"
export default {
setup() {
const count = ref(100);
watch(()=>count.vlaue,()=>{
console.log('count数值发生变化了')
})
const.value = 200;
return {
count
}
}
}
实例属性($refs)
在Composition API中使用ref
特性获取组件实例或者dom节点,举个例子说明:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<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节点对象
return {
btn,
helloWorld
}
}
}
综合例子
1 | <template> |
下图是运行效果:
总结
经过以上实践,总结Composition API以下特点:
优点:
- 使用简洁,方便,代码量小
- 函数特性,复用性强
- 容易做类型推导,方便IDE做出语法提示
缺点:
- 需要额外加载composition-api包文件,增加了打包后的文件体积,对网页性能有一定影响
- 增加了一定的学习成本