vue3组件化开发常用API知识点有哪些

Vue3组件化开发常用API知识点有哪些

Vue3作为一款流行的前端框架，其组件化开发模式极大地提高了代码的可维护性和复用性。在Vue3中，组件化开发的核心在于对API的熟练掌握。本文将介绍Vue3组件化开发中常用的API知识点，帮助开发者更好地理解和应用Vue3。

1. setup 函数

setup 函数是Vue3中引入的一个新的组件选项，它是组合式API的入口。setup 函数在组件实例创建之前执行，用于定义组件的响应式状态、计算属性、方法等。

export default { setup() { const count = ref(0); function increment() { count.value++; } return { count, increment, }; }, }; 

1.1 ref 和 reactive

• ref: 用于创建一个响应式的引用值，通常用于基本类型数据。
• reactive: 用于创建一个响应式的对象，通常用于复杂类型数据。

const count = ref(0); const state = reactive({ name: 'Vue3', version: '3.0.0', }); 

1.2 computed 和 watch

• computed: 用于创建计算属性，依赖的响应式数据变化时会自动重新计算。
• watch: 用于监听响应式数据的变化，并在变化时执行回调函数。

const doubleCount = computed(() => count.value * 2); watch(count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`); }); 

2. provide 和 inject

provide 和 inject 是Vue3中用于跨组件传递数据的API。provide 用于在父组件中提供数据，inject 用于在子组件中注入数据。

// 父组件 export default { setup() { provide('theme', 'dark'); }, }; // 子组件 export default { setup() { const theme = inject('theme'); return { theme, }; }, }; 

3. emit 和 props

• emit: 用于子组件向父组件触发事件。
• props: 用于父组件向子组件传递数据。

// 父组件 <ChildComponent @custom-event="handleEvent" :message="hello" /> // 子组件 export default { props: ['message'], setup(props, { emit }) { function triggerEvent() { emit('custom-event', 'data'); } return { triggerEvent, }; }, }; 

4. v-model 和 v-bind

• v-model: 用于双向绑定表单输入和应用状态。
• v-bind: 用于动态绑定HTML属性或组件props。

<input v-model="message" /> <ChildComponent :message="message" /> 

5. slot 和 scoped slot

• slot: 用于在组件中插入内容。
• scoped slot: 用于在插槽中传递数据。

// 父组件 <ChildComponent> <template v-slot:default="slotProps"> {{ slotProps.user.name }} </template> </ChildComponent> // 子组件 <slot :user="user"></slot> 

6. Teleport

Teleport 是Vue3中新增的一个组件，用于将组件的内容渲染到DOM中的任意位置。

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

7. Suspense

Suspense 是Vue3中用于处理异步组件的API，可以在异步组件加载完成之前显示一个fallback内容。

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

8. defineComponent

defineComponent 是Vue3中用于定义组件的API，它提供了更好的类型推断和代码提示。

import { defineComponent } from 'vue'; export default defineComponent({ setup() { return {}; }, }); 

9. useStore 和 useRouter

• useStore: 用于在组件中访问Vuex store。
• useRouter: 用于在组件中访问Vue Router。

import { useStore } from 'vuex'; import { useRouter } from 'vue-router'; export default { setup() { const store = useStore(); const router = useRouter(); function navigate() { router.push('/home'); } return { navigate, }; }, }; 

10. onMounted 和 onUnmounted

• onMounted: 用于在组件挂载后执行代码。
• onUnmounted: 用于在组件卸载前执行代码。

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

结论

Vue3的组件化开发提供了丰富的API，使得开发者能够更加灵活和高效地构建应用。通过熟练掌握这些API，开发者可以更好地利用Vue3的强大功能，构建出高性能、可维护的前端应用。