最近,Vue官方发布了 Composition API RFC。有关于Vue3.0 Function Base组件相关讨论正如火如荼。虽然Vue3.0还未发布,可是 Vue官方发布了关于 Composition API的官方插件,使广大用户能够在Vue2.x中享受 Function Base 带来的新体验。下面我会在一个简单的demo中介绍Composition API使用方法。vue
yarn add @vue/composition-api
复制代码
等待composition-api包安装完成后,咱们在项目入口文件中加入Composition API。react
import Vue from "vue"
import CompositionApi from "@vue/composition-api"
Vue.use(CompositionApi)
复制代码
按照官方给出的说法,setup函数是一个新的Vue组件选项,是用于在组件中使用Composition API的入口。api
setup函数在组件初始化了props以后,created以前调用,这时候咱们才能经过setup来传递props。dom
reactive
函数接受一个对象,并返回该对象的代理,经过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引入的新概念。做用是使访问响应式的变量不依赖于实例的this
。若是使用了ref
,咱们访问响应式的变量时使用.value
而不是从this
中获取,其底层是采用reactive
方法实现。性能
import {ref} from "@vue/composition-api"
export default {
setup() {
const count = ref(0)//count初始值为0,会相应变化
count.value = 10;//设置count值为10,使用.value形式
return {
count//必须将count return 回去
}
}
}
复制代码
可使用导入的onXXX
的形式注册生命周期函数,举个例子:学习
import {onCreated,onMounted} from "@vue/composition-apai"
export default {
setup() {
onMounted(()=>{
console.log('mounted被触发')
})
///...其余相似
}
}
复制代码
注意:如下生命周期函数用
setup
函数替代:ui
在Composition API中,咱们使用普通的函数定义方法,这样能够最大程度的增长复用性。例如:this
<template>
<button @click="add">click me!</button>
</template>
<script>
export default {
setup() {
function add() {
console.log('add被触发')
}
return {
add//必须将函数return
}
}
}
</script>
复制代码
定义props
和原来的方式同样,props
会经过参数的形式传入到setup
函数中:spa
export default {
props:{
name:String
},
setup(props) {
console.log(props.name)
}
}
复制代码
计算属性可使用Composition API提供的computed
函数进行定义:
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
监听咱们能够采用Composition API提供的watch
函数实现:
import {watch,ref} from "@vue/composition-apai"
export default {
setup() {
const count = ref(100);
watch(()=>count.vlaue,()=>{
console.log('count数值发生变化了')
})
const.value = 200;
return {
count
}
}
}
复制代码
在Composition API中使用ref
特性获取组件实例或者dom节点,举个例子说明:
<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
}
}
}
复制代码
<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>
复制代码
下图是运行效果:
通过以上实践,总结Composition API如下特色:
优势:
缺点: