Vue Composition API体验

最近，Vue官方发布了 Composition API RFC。有关于Vue3.0 Function base组件相关讨论正如火如荼。虽然Vue3.0还未发布，但是 Vue官方发布了关于 Composition API的官方插件，使广大用户可以在Vue2.x中享受 Function base 带来的新体验。下面我会在一个简单的demo中介绍Composition API使用方法。

安装

yarn add @vue/compostion-api


等待composition-api包安装完成后，我们在项目入口文件中加入Composition API。
import Vue from "vue"
import CompositionApi from "@vue/compostion-apai"
Vue.use(CompositionApi)

setup
按照官方给出的说法，setup函数是一个新的Vue组件选项，是用于在组件中使用Composition API的入口。

setup函数在组件初始化了props之后，created之前调用，这时候我们才能通过setup来传递props。

ref
ref是CompositionAPI引入的新概念。作用是使访问响应式的变量不依赖于实例的this。如果使用了ref，我们访问响应式的变量时使用.value而不是从this中获取。
import {ref} from "@vue/compostion-apai"
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/compostion-apai"
export default {
    setup() {
 onCreated(()=>{
     console.log('created被触发')    
 })
 onMounted(()=>{
     console.log('mounted被触发')
 })
 ///...其他类似
    }
}

methods
在Composition API中，我们使用普通的函数定义方法，这样可以最大程度的增加复用性。例如：



props
定义props和原来的方式一样，props会通过参数的形式传入到setup函数中：
export default {
    props:{
 name:String
    },
    setup(props) {
 console.log(props.name)
    }
}

computed
计算属性可以使用Composition API提供的computed函数进行定义：
import {computed,ref} from "@vue/compostion-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监听我们可以采用Compostion API提供的watch函数实现：
import {watch,ref} from "@vue/compostion-apai"
export default {
    setup() {
 const count = ref(100);
 watch(()=>count.vlaue,()=>{
     console.log('count数值发生变化了')
 })
 const.value = 200;
 return {
     count
 }
    }
}

获取Vue组件实例或者dom节点
在Composition API中使用ref特性获取组件实例或者dom节点，举个例子说明：

import {ref} from "@vue/composition-api"
export default {
    setup() {
 const helloWorld = ref(null);//helloworld组件实例
 const btn = ref(null);//button dom节点对象
 return {
     btn,
     helloWorld
 }
    }
}

综合例子





总结
经过以上实践，总结Composition API以下特点：
使用简洁，方便，代码量小
函数特性，复用性强
容易做类型推导，方便IDE做出语法提示

Vue Composition API体验

Vue.js相关栏目本月热门文章