在Vue 3中，常用的知识点和API有：
- Composition API: 使用
setup函数来配合ref, reactive, computed和watch等函数。
import { ref, reactive, computed, watch, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({ message: 'Hello' });
const doubledCount = computed(() => count.value * 2);
watch(count, (newValue, oldValue) => {
console.log(`The new count is ${newValue}, old count was ${oldValue}`);
});
onMounted(() => {
console.log('Component is mounted!');
});
return {
count,
state,
doubledCount
};
}
};
- Teleport: 使用
<Teleport>组件将子组件的内容传送到DOM中的其他位置。
<Teleport to="#some-other-element-id">
<div>This will be teleported</div>
</Teleport>
- Fragments: 使用
<!>标签来创建不需要额外DOM节点的组件。
<template>
<!>
<div>Part 1</div>
<div>Part 2</div>
<!>
</template>
- Emits: 使用
emit函数来触发自定义事件。
import { defineComponent } from 'vue';
export default defineComponent({
setup(props, { emit }) {
function doSomething() {
emit('custom-event', 'some argument');
}
return { doSomething };
}
});
- Custom Renderer API: 可以创建自定义渲染器来集成Vue到非Web平台。
import { createRenderer } from 'vue';
const { render, createApp } = createRenderer({
patchProp,
insert,
remove,
// ...
});
const app = createApp(rootComponent);
app.mount(rootContainer);
- Provide/Inject: 父组件提供数据，子组件注入使用。
<!-- ParentComponent.vue -->
<script setup>
import { provide } from 'vue';
provide('message', 'Hello from parent');
</script>
<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';
const message = inject('message');
</script>
- Suspense: 用于处理异步组件的加载中、失败等情况。
<Suspense>
<template #default>
<AsyncComp />
</template>
<template #fallback>
Loading...
</template>
</Suspense>
- Script Setup 语法糖: 使用
<script setup>可以更快速地编写组件。
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>
- Data Option Composition: 使用
setup函数返回的对象来合并data、computed、methods等。
import { ref } fr