1. setup 函数
在组件中，可以使用 setup 函数来设置组件的逻辑，包括数据、方法等。setup 函数在组件创建之前执行。
<script>
export default {
setup() {
// 在这里设置组件的逻辑
},
};
</script>
2. reactive 和 ref
reactive 和 ref 是用于创建响应式数据的函数。reactive 用于创建包含多个属性的响应式对象，而 ref 用于创建单个值的响应式对象。
<script>
import { reactive, ref } from 'vue';
export default {
setup() {
const user = reactive({
name: 'John',
age: 30,
});
const count = ref(0);
return {
user,
count,
};
},
};
</script>
3. computed
computed 用于创建计算属性。
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
return {
count,
doubleCount,
};
},
};
</script>
4. watch 和 watchEffect
watch 用于监听数据的变化，而 watchEffect 在依赖的响应式数据发生变化时自动运行。
<script>
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
const count = ref(0);
// 使用 watch 监听 count 变化
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
// 使用 watchEffect 在依赖变化时执行
watchEffect(() => {
console.log(`count is: ${count.value}`);
});
return {
count,
};
},
};
</script>
这是 Composition API 的一些基本用法，它可以帮助你更好地组织和管理组件代码。此外，Composition API 还提供了一些其他功能，比如 toRefs、onMounted、onUnmounted 等，具体可参考官方文档：[Vue 3 Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html)。
转载请注明出处：http://www.zyzy.cn/article/detail/12989/Vue3