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的强大功能，构建出高性能、可维护的前端应用。