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

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

导航

1. 安装
2. 使用
3. 示例

①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++

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 }}

`}

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

两个案例：

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