插件vue-function-api 提供 Vue3.0 中的组件逻辑复用机制,帮助开发者开发下一代 vue 应用程序，允许开发者利用 Vue3.0 的响应性 API 建设未来 Vue 生态。

安装

npm

npm install vue-function-api --save

yarn

yarn add vue-function-api

CDN

<script src="https://unpkg.com/vue-function-api/dist/vue-function-api.umd.js"></script>

通过全局变量 window.vueFunctionApi 来使用。

使用

必须显式地通过 Vue.use( ) 来安装 vue-function-api:

import Vue from 'vue'
import { plugin } from 'vue-function-api'
Vue.use(plugin)

安装插件后，您就可以使用新的函数式 API来书写组件了。

示例

Todo App Compare with Vue2 API

1.https://codesandbox.io/s/todo-example-6d7ep

CodePen Live Demo

2.https://codepen.io/liximomo/pen/dBOvgg

Single-File Component

<template>
 <div>
 <span>count is {{ count }}</span>
 <span>plusOne is {{ plusOne }}</span>
 <button @click="increment">count++</button>
 </div>
</template>
<script>
 import Vue from 'vue';
 import { value, computed, watch, onMounted } from 'vue-function-api'
 export default {
 setup() {
 // reactive state
 const count = value(0);
 // computed state
 const plusOne = computed(() => count.value + 1);
 // method
 const increment = () => {
 count.value++;
 };
 // watch
 watch(
 () => count.value * 2,
 val => {
 console.log(`count * 2 is ${val}`);
 }
 );
 // lifecycle
 onMounted(() => {
 console.log(`mounted`);
 });
 // expose bindings on render context
 return {
 count,
 plusOne,
 increment,
 };
 },
 };
</script>

API

setup

? setup(props: Props, context: Context): Object|undefined

组件现在接受一个新的 setup 选项，在这里我们利用函数 api 进行组件逻辑设置。

setup() 中不可以使用 this 访问当前组件实例, 我们可以通过 setup 的第二个参数 context 来访问 vue2.x API 中实例上的属性。

Example:

const MyComponent = {
 props: {
 name: String
 },
 setup(props) {
 console.log(props.name)
 }
}

value

? value(value: any): Wrapper

value 函数为组件声明一个响应式属性，我们只需要在 setup 函数中返回 value 的返回值即可。

Example:

import { value } from 'vue-function-api'
const MyComponent = {
 setup(props) {
 const msg = value('hello')
 const appendName = () => {
 msg.value = `hello ${props.name}`
 }
 return {
 msg,
 appendName
 }
 },
 template: `<div @click="appendName">{{ msg }}</div>`
}
import { value } from 'vue-function-api'
const MyComponent = {
 setup(props) {
 const msg = value('hello')
 const appendName = () => {
 msg.value = `hello ${props.name}`
 }
 return {
 msg,
 appendName
 }
 },
 template: `<div @click="appendName">{{ msg }}</div>`
}

state

? state(value: any)

与 Vue.observable 等价。

Example:

import { state } from 'vue-function-api'
const object = state({
 count: 0
})
object.count++

computed

? computed(getter: Function, setter?: Function): Wrapper

与 vue 2.x computed property 行为一致。

Example:

import { value, computed } from 'vue-function-api'
const count = value(0)
const countPlusOne = computed(() => count.value + 1)
console.log(countPlusOne.value) // 1
count.value++
console.log(countPlusOne.value) // 2

watch

? watch(source: Wrapper | () => any, callback: (newVal, oldVal), options?: WatchOption): Function
? watch(source: Array<Wrapper | () => any>, callback: ([newVal1, newVal2, ... newValN], [oldVal1, oldVal2, ... oldValN]), options?: WatchOption): Function

watch 允许我们在相应的状态发生改变时执行一个回调函数。

返回值 Function 一个可调用的函数来停止 watch。

effect-cleanup 当前并不支持。

WatchOption

两个案例：

lifecycle

? onCreated(cb: Function)
? onBeforeMount(cb: Function)
? onMounted(cb: Function)
? onXXX(cb: Function)

支持 2.x 中除 beforeCreated 以外的所有生命周期函数，额外提供 onUnmounted。

Example:

全部特性在这里（都是函数）

provide, inject

? provide(value: Object)
? inject(key: string | symbol)

与 2.x 中的 provide 和 inject 选项行为一致。

Example:

Context

Context 对象中的属性是 2.x 中的 vue 实例属性的一个子集。完整的属性列表：

parent
root
refs
slots
attrs
emit

四时宝库

程序员的知识宝库

vue3.0慢慢浮出水面，让我们快速学习vue3.0的语法特性和使用方式

导航

安装

使用

示例

API