Vue3核心知识点合集

在Vue 3中，以下是一些核心概念的简要概述和示例代码：

1. 组合式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>

2. 响应式系统（Reactivity System）: 使用ref或reactive来创建响应式数据。

import { ref } from 'vue';
 
const count = ref(0);
 
// 响应式读取
console.log(count.value);
 
// 响应式赋值
count.value++;

3. 声明式渲染（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>

4. 生命周期钩子：使用onMounted, onUpdated, onUnmounted等函数来处理组件的生命周期。

import { onMounted, onUnmounted } from 'vue';
 
onMounted(() => {
  console.log('Component is mounted!');
});
 
onUnmounted(() => {
  console.log('Component is unmounted!');
});

5. 插槽（Slots）和作用域插槽（Scoped Slots）: 使用<slot>标签来分发内容，并通过v-slot指令来使用作用域插槽。

父组件:

<template>
  <ChildComponent>
    <template #default="slotProps">
      {{ slotProps.text }}
    </template>
  </ChildComponent>
</template>

子组件:

<template>
  <slot :text="'Hello, slot!'" />
</template>

6. 自定义指令（Custom Directives）: 使用directive函数来创建自定义指令。

import { directive } from 'vue';
 
export const vFocus = directive({
  mounted(el) {
    el.focus();
  }
});

使用自定义指令:

<input v-focus />

这些是Vue 3中核心概念的简要介绍和示例代码。