在Vue 3中，以下是一些核心概念的简要概述和示例代码：
- 组合式API（Composition API）: 使用
setup函数来处理数据、方法和生命周期钩子。
<template>
<div>{{ message }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue 3!');
onMounted(() => {
console.log(message.value);
});
return { message };
}
}
</script>
- 响应式系统（Reactivity System）: 使用
ref或reactive来创建响应式数据。
import { ref } from 'vue';
const count = ref(0);
// 响应式读取
console.log(count.value);
// 响应式赋值
count.value++;
- 声明式渲染（Declarative Rendering）: 使用模板语法来描述状态和DOM的映射。
<template>
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);
return { items };
}
}
</script>
- 生命周期钩子：使用
onMounted, onUpdated, onUnmounted等函数来处理组件的生命周期。
import { onMounted, onUnmounted } from 'vue';
onMounted(() => {
console.log('Component is mounted!');
});
onUnmounted(() => {
console.log('Component is unmounted!');
});
- 插槽（Slots）和作用域插槽（Scoped Slots）: 使用
<slot>标签来分发内容，并通过v-slot指令来使用作用域插槽。
父组件:
<template>
<ChildComponent>
<template #default="slotProps">
{{ slotProps.text }}
</template>
</ChildComponent>
</template>
子组件:
<template>
<slot :text="'Hello, slot!'" />
</template>
- 自定义指令（Custom Directives）: 使用
directive函数来创建自定义指令。
import { directive } from 'vue';
export const vFocus = directive({
mounted(el) {
el.focus();
}
});
使用自定义指令:
<input v-focus />
这些是Vue 3中核心概念的简要介绍和示例代码。