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

导航

②CodePen Live Demo

③Single-File Component

4.API

①setup

②value

③state

④computed

⑤watch

⑥lifecycle

⑦provide, inject

安装

npm install vue-function-api --save

yarn

yarn add vue-function-api

CDN

通过全域性变数 window.vueFunctionApi 来使用。

使用

import Vue from vue

import { plugin } from vue-function-api

Vue.use(plugin)

安装外挂后，您就可以使用新的函式式 API来书写元件了。

示例

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

CodePen Live Demo

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

Single-File Component

count is {{ count }}

plusOne is {{ plusOne }}

count++

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,

};

},

};

API

▸ setup(props: Props, context: Context): Objectundefined

元件现在接受一个新的 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: `{{ msg }}`

}

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: `{{ msg }}`

}

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 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 例项属性的一个子集。完整的属性列表：

parentrootrefsslotsattrsemit