Vue3 是一个流行的前端框架，适合构建现代化的单页应用（SPA）

Vue3的核心知识点包括 Composition API、响应式系统、模板语法、组件通信、生命周期钩子、路由、状态管理等  
掌握这些知识点后，你可以构建功能丰富的前端应用  
随着学习的深入，还可以探索更多高级特性，如自定义指令、插件开发等  


1. Composition API
setup() 函数：Composition API 的核心，替代了 Vue 2 的 data、methods、computed 等选项  
setup() 函数在组件创建之前执行，用于定义响应式数据、计算属性、方法等  

ref 和 reactive：
ref：用于创建响应式的原始值（如字符串、数字等）  
reactive：用于创建响应式的对象  
computed 和 watch：
computed：用于创建计算属性  
watch：用于监听响应式数据的变化  


import { ref, reactive, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const state = reactive({ name: 'Vue 3' });

    const doubleCount = computed(() => count.value * 2);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return { count, state, doubleCount };
  }
};



2. 响应式系统
Vue3 使用 Proxy 替代了 Vue2 的 Object.defineProperty，提供了更强大的响应式能力  

toRefs：将 reactive 对象转换为多个 ref，方便在模板中使用  



import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: 'Vue 3',
      version: '3.0'
    });

    return { ...toRefs(state) };
  }
};




3. 模板语法
插值：{{ }} 用于绑定数据  

指令：
v-bind：绑定属性，简写为 :  
v-on：绑定事件，简写为 @  
v-model：双向数据绑定  
v-if、v-else、v-show：条件渲染  
v-for：列表渲染  


<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">Click me</button>
    <input v-model="message" />
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>




4. 组件
Props：父组件向子组件传递数据  
Emit：子组件向父组件触发事件  
Slots：插槽，用于内容分发  



// 父组件
<template>
  <ChildComponent :message="parentMessage" @custom-event="handleEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const parentMessage = ref('Hello from parent');
    const handleEvent = (data) => {
      console.log('Event received:', data);
    };

    return { parentMessage, handleEvent };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  setup(props, { emit }) {
    const sendEvent = () => {
      emit('custom-event', 'Hello from child');
    };

    return { sendEvent };
  }
};
</script>





5. 生命周期钩子
Vue3 的生命周期钩子可以通过 onMounted、onUpdated、onUnmounted 等函数在 setup() 中使用  


import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
};



6. 路由（Vue Router）
Vue Router 是 Vue 的官方路由管理器，用于构建单页应用  
路由配置：定义路由和组件的映射关系  
路由导航：使用 router-link 和 router.push 进行导航  


import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;



7. 状态管理（Vuex/Pinia）
Vuex：Vue 的官方状态管理库，适合大型应用  
Pinia：Vue 3 推荐的状态管理库，更轻量且易于使用  


// Pinia 示例
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});



8. Teleport

Teleport：用于将组件的一部分内容渲染到 DOM 中的其他位置  


<template>
  <teleport to="body">
    <div class="modal">This is a modal</div>
  </teleport>
</template>




9. Suspense

Suspense：用于处理异步组件的加载状态  


<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>





10. TypeScript 支持

Vue3 对 TypeScript 提供了更好的支持，可以在项目中使用 TypeScript 来增强代码的类型安全  

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    return { count };
  }
});