Vue3常用知识点总结

在Vue 3中，常用的知识点和API有：

1. Composition API: 使用setup函数来配合ref, reactive, computed和watch等函数。

import { ref, reactive, computed, watch, onMounted } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    const state = reactive({ message: 'Hello' });
    const doubledCount = computed(() => count.value * 2);
 
    watch(count, (newValue, oldValue) => {
      console.log(`The new count is ${newValue}, old count was ${oldValue}`);
    });
 
    onMounted(() => {
      console.log('Component is mounted!');
    });
 
    return {
      count,
      state,
      doubledCount
    };
  }
};

2. Teleport: 使用<Teleport>组件将子组件的内容传送到DOM中的其他位置。

<Teleport to="#some-other-element-id">
  <div>This will be teleported</div>
</Teleport>

3. Fragments: 使用<!>标签来创建不需要额外DOM节点的组件。

<template>
  <!>
    <div>Part 1</div>
    <div>Part 2</div>
  <!>
</template>

4. Emits: 使用emit函数来触发自定义事件。

import { defineComponent } from 'vue';
 
export default defineComponent({
  setup(props, { emit }) {
    function doSomething() {
      emit('custom-event', 'some argument');
    }
 
    return { doSomething };
  }
});

5. Custom Renderer API: 可以创建自定义渲染器来集成Vue到非Web平台。

import { createRenderer } from 'vue';
 
const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  // ...
});
 
const app = createApp(rootComponent);
app.mount(rootContainer);

6. Provide/Inject: 父组件提供数据，子组件注入使用。

<!-- ParentComponent.vue -->
<script setup>
import { provide } from 'vue';
 
provide('message', 'Hello from parent');
</script>
 
<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';
 
const message = inject('message');
</script>

7. Suspense: 用于处理异步组件的加载中、失败等情况。

<Suspense>
  <template #default>
    <AsyncComp />
  </template>
  <template #fallback>
    Loading...
  </template>
</Suspense>

8. Script Setup 语法糖: 使用<script setup>可以更快速地编写组件。

<script setup>
import { ref } from 'vue';
 
const count = ref(0);
</script>
 
<template>
  <button @click="count++">{{ count }}</button>
</template>

9. Data Option Composition: 使用setup函数返回的对象来合并data、computed、methods等。

import { ref } fr