插件vue-function-api 提供 Vue3.0 中的组件逻辑复用机制,帮助开发者开发下一代 vue 应用程序,允许开发者利用 Vue3.0 的响应性 API 建设未来 Vue 生态。
导航
- 安装
- 使用
- 示例
①Todo App Compare with Vue2 API
②CodePen Live Demo
③Single-File Component
4.API
①setup
②value
③state
④computed
⑤watch
⑥lifecycle
⑦provide, inject
安装
npm
npm install vue-function-api --save
yarn
yarn add vue-function-api
CDN
通过全局变量 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
count is {{ count }} plusOne is {{ plusOne }} count++
![63287310bd47fe2d02a6976965b3364d.png](https://i-blog.csdnimg.cn/blog_migrate/ad3d2d6392095c2d667eab1312f2f732.jpeg)
![1a2411032072234bbdf454e71efbb495.png](https://i-blog.csdnimg.cn/blog_migrate/a6e6392c2443dccf3d0c3673764c2adf.jpeg)
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: `
{{ 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 }}
`}
![83ca97f2638c8127852bb9947515a2f2.png](https://i-blog.csdnimg.cn/blog_migrate/1a983aa5682a40c44fdd4e2366e04f19.jpeg)
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) // 1count.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
![4e31e4118e23b4ddd13321c438f28670.png](https://i-blog.csdnimg.cn/blog_migrate/18d2a7ffb47cdd5592b93239ddfe3e71.jpeg)
两个案例:
![ae640045a246163755018d023af5ae24.png](https://i-blog.csdnimg.cn/blog_migrate/4977ff6f9e7ea48cb6f7e808249bc316.jpeg)
lifecycle
▸ onCreated(cb: Function)
▸ onBeforeMount(cb: Function)
▸ onMounted(cb: Function)
▸ onXXX(cb: Function)
支持 2.x 中除 beforeCreated 以外的所有生命周期函数,额外提供 onUnmounted。
Example:
![cf76ddaae4fea540b70e54ac7e306e5d.png](https://i-blog.csdnimg.cn/blog_migrate/a37457dc83365b1a17aa2c8e25a84c09.jpeg)
全部特性在这里(都是函数)
![6c9f82d05173660afee70b0071ccb431.png](https://i-blog.csdnimg.cn/blog_migrate/1abf01ec0074ad186819e235565458d8.jpeg)
provide, inject
▸ provide(value: Object)
▸ inject(key: string | symbol)
与 2.x 中的 provide 和 inject 选项行为一致。
Example:
![5e7cbc5356013fcfa08ee954a3b50fdc.png](https://i-blog.csdnimg.cn/blog_migrate/508af46e45e0b80a69addf9b23f6ef1f.jpeg)
Context
Context 对象中的属性是 2.x 中的 vue 实例属性的一个子集。完整的属性列表:
- parent
- root
- refs
- slots
- attrs
- emit