vue3.0慢慢浮出水面 让我们快速学习vue3.0的语法特性和使用方式
外挂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
安装
npmnpm 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 API1.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▸ 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) // 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
