面向未来编程(Future-Oriented Programming)，vue-function-api 提供 Vue3 中的组件逻辑复用机制帮助开发者开发下一代 vue 应用程序，允许开发者利用 Vue3 的响应性 API 建设未来 Vue 生态。
npm
npm install vue-function-api --saveyarn
yarn add vue-function-apiCDN
<script src="https://unpkg.com/vue-function-api/dist/vue-function-api.umd.js"></script>通过全局变量 window.vueFunctionApi 来使用。
CodePen
在线示例，fork 后进行测试或 bug 反馈。
您必须显式地通过 Vue.use() 来安装 vue-function-api:
import Vue from 'vue'
import { plugin } from 'vue-function-api'
Vue.use(plugin)安装插件后，您就可以使用新的函数式 API来书写组件了。
<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>▸ 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: 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(value: any)
与 Vue.observable 等价。
Example:
import { state } from 'vue-function-api'
const object = state({
count: 0
})
object.count++▸ 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(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 当前并不支持。
| Name | Type | Default | Description |
|---|---|---|---|
| lazy | boolean |
false |
与 2.x watch 中的 immediate 选项含义相反. |
| deep | boolean |
false |
与 2.x 相同 |
| flush | "pre" | "post" | "sync" |
"post" |
"post": render 后触发; "pre": render 前触发, "sync": 同步触发 |
Example:
watch(
// getter
() => count.value + 1,
// callback
(value, oldValue) => {
console.log('count + 1 is: ', value)
}
)
// -> count + 1 is: 1
count.value++
// -> count + 1 is: 2Example(Multiple Sources):
watch(
[valueA, () => valueB.value],
([a, b], [prevA, prevB]) => {
console.log(`a is: ${a}`)
console.log(`b is: ${b}`)
}
)▸ onCreated(cb: Function)
▸ onBeforeMount(cb: Function)
▸ onMounted(cb: Function)
▸ onXXX(cb: Function)
支持 2.x 中除 beforeCreated 以外的所有生命周期函数，额外提供 onUnmounted。
Example:
import { onMounted, onUpdated, onUnmounted } from 'vue-function-api'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
}
}▸ provide(value: Object)
▸ inject(key: string | symbol)
与 2.x 中的 provide 和 inject 选项行为一致。
Example:
import { provide, inject } from 'vue-function-api'
const CountSymbol = Symbol()
const Ancestor = {
setup() {
// providing a value can make it reactive
const count = value(0)
provide({
[CountSymbol]: count
})
}
}
const Descendent = {
setup() {
const count = inject(CountSymbol)
return {
count
}
}
}Context 对象中的属性是 2.x 中的 vue 实例属性的一个子集。完整的属性列表：
- parent
- root
- refs
- slots
- attrs
- emit
以下内容引自 尤雨溪知乎专栏
一个包装对象只有一个属性：value ，该属性指向内部被包装的值。
我们知道在 JavaScript 中，原始值类型如 string 和 number 是只有值，没有引用的。如果在一个函数中返回一个字符串变量，接收到这个字符串的代码只会获得一个值，是无法追踪原始变量后续的变化的。
因此，包装对象的意义就在于提供一个让我们能够在函数之间以引用的方式传递任意类型值的容器。这有点像 React Hooks 中的 useRef —— 但不同的是 Vue 的包装对象同时还是响应式的数据源。有了这样的容器，我们就可以在封装了逻辑的组合函数中将状态以引用的方式传回给组件。组件负责展示（追踪依赖），组合函数负责管理状态（触发更新）：
setup() {
const valueA = useLogicA() // valueA 可能被 useLogicA() 内部的代码修改从而触发更新
const valueB = useLogicB()
return {
valueA,
valueB
}
}包装对象也可以包装非原始值类型的数据，被包装的对象中嵌套的属性都会被响应式地追踪。用包装对象去包装对象或是数组并不是没有意义的：它让我们可以对整个对象的值进行替换 —— 比如用一个 filter 过的数组去替代原数组：
const numbers = value([1, 2, 3])
// 替代原数组，但引用不变
numbers.value = numbers.value.filter(n => n > 1)如果你依然想创建一个没有包装的响应式对象，可以使用 state API（和 2.x 的 Vue.observable() 等同）：
import { state } from 'vue'
const object = state({
count: 0
})
object.count++当包装对象被暴露给模版渲染上下文，或是被嵌套在另一个响应式对象中的时候，它会被自动展开 (unwrap) 为内部的值。
比如一个包装对象的绑定可以直接被模版中的内联函数修改：
const MyComponent = {
setup() {
return {
count: value(0)
}
},
template: `<button @click="count++">{{ count }}</button>`
}当一个包装对象被作为另一个响应式对象的属性引用的时候也会被自动展开：
const count = value(0)
const obj = state({
count
})
console.log(obj.count) // 0
obj.count++
console.log(obj.count) // 1
console.log(count.value) // 1
count.value++
console.log(obj.count) // 2
console.log(count.value) // 2以上这些关于包装对象的细节可能会让你觉得有些复杂，但实际使用中你只需要记住一个基本的规则：只有当你直接以变量的形式引用一个包装对象的时候才会需要用 .value 去取它内部的值 —— 在模版中你甚至不需要知道它们的存在。
vue-function-api会一直保持与Vue3.x的兼容性，当3.0发布时，您可以无缝替换掉本库。vue-function-api的实现只依赖Vue2.x本身，不伦Vue3.x的发布与否，都不会影响您正常使用本库。- 由于
Vue2.x的公共 API 限制，vue-function-api无法避免的会产生一些额外的内存负载。如果您的应用并不工作在极端内存环境下，无需关心此项。