VUE 3 COMPOSITION API
CHEAT SHEET（中⽂版）
<template>
以下情况适于使用 Composition API：
<div>
组件过大，且应该以逻辑关注点
<p>Spaces Left: {{ spacesLeft }}
out of {{ capacity }}</p>
（或特性）的维度被管理时。
<h2>Attending</h2>
<ul>
AND / OR
<li
v-for="(name, index) in attending" :key="index">
作为Mixins或Scoped Slots的代替，
{{ name }}
代码须提取出来以在多组件间
复用。
</li>
</ul>
AND / OR
<button @click="increaseCapacity()">Increase Capacity</button>
在TypeScript中类型安全很重
要
时。
</div>
</template>
如果正在用 Vue 2 且已经设置好了 Composition API 插件：
<script>
import { ref, computed } from "vue";
export default {
import { ref, computed } from
"@vue/composition-api";
setup() {
Reactive Reference
const capacity = ref(4);
const attending = ref(["Tim", "Bob",
"Joe"]);
const spacesLeft = computed(() =>
{
return capacity.value
- attending.value.length;
});
将基
本类型包裹在对象中，以跟踪其变化
Computed Property
通过调用 .value 访问一个 Reactive Reference 的值
function increaseCapacity() {
capacity.value++;
}
用函数声明方法，相当于原
`Methods`
return { capacity, attending, spacesLeft, increaseCapacity };
}
};
可被 template 访问的各种对象和函数
</script>
也可以写成：
CAN ALSO BE WRITTEN AS:
import { reactive, computed, toRefs }
from "vue";
export default {
调用 reactive() 以使对象变为反应式的
setup() {
const event = reactive({
capacity: 4,
attending: ["Tim",
"Bob", "Joe"],
spacesLeft: computed(() => { return event.capacity - event.attending.length; })
});
function increaseCapacity() {
因为对象是
反应式的，所以用不着
.value
event.capacity++;
return { ...toRefs(event),
increaseCapacity };
用 toRefs() 将反应式对象变回普
通对象
}
}
};
Watch the Vue 3 Essentials course on VueMastery.com
VUE 3 COMPOSITION API
CHEAT SHEET（中⽂版）
TO ORGANIZE BY FEATURE:
根据特性划分：
Watch the Vue 3 Essentials course at
VueMastery.com, taught by Gregg Pollack.
<template> … </template>
</script>
export default {
setup() {
const productSearch = useSearch(
const resultSorting = useSorting({
)
The setup() method
})
setup() 晚于 beforeCreate 和 created 两个钩⼦函数被调用，
且不能访问 `this`
return { productSearch, resultSorting }
}
setup() 的第一个参数：
props
}
function useSearch(getResults) {
export default {
props: {
props 是
反应式的，
}
name: String
},
可以被 watch 监视
function useSorting({ input, options }) {
setup(props) {
watch(() => {
}
</script>
console.log(`name is: ` + props.name)
})
}
提取共用代码：
}
<template> … </template>
</script>
context
setup() 的第二个参数：
import useSearch from '@use/search'
import useSorting from '@use/sorting'
export default {
setup(props, context) {
context.attrs;
context.slots;
context.parent;
context.root;
context.emit;
}
setup() {
之前用 this 访问的那些属性，
const productSearch = useSearch(
const resultSorting = useSorting({
)
现在用 context 暴
露出来
})
return { productSearch, resultSorting }
}
在 setup() 内部声明：
life-cycle hooks
}
setup() {
</script>
onMounted(() => { ... });
onUpdated(() => { ... });
onUnmounted(() => { ... });
use/search.js
}
export default function useSearch(getResults) {
直
接在 setup() 内部编码或调用函数，
⽽不再用 beforeCreate / created 等钩⼦
}
use/sorting.js
export default function useSorting({ input, options }) {
}