vue3 的6个高级用法 看看你会几个

1.组合式 API 深入

响应式数据的创建与操作：除了使用 ref 和 reactive ，还可以利用 toRefs 将 reactive 对象的属性转为独立的响应式引用，方便解构使用。例如：

import { reactive, toRefs } from 'vue';
const state = reactive({
  count: 0
});
const { count } = toRefs(state);

 自定义 Hook：像在React中一样，能抽离出可复用的逻辑代码，封装成自定义 Hook。比如创建一个获取窗口尺寸变化的 Hook：

import { onMounted, onUnmounted, reactive } from 'vue';
export function useWindowSize() {
  const state = reactive({
    width: window.innerWidth,
    height: window.innerHeight
  });
  const updateSize = () => {
    state.width = window.innerWidth;
    state.height = window.innerHeight;
  };
  onMounted(() => {
    window.addEventListener('resize', updateSize);
  });
  onUnmounted(() => {
    window.removeEventListener('resize', updateSize);
  });
  return state;
}

然后在组件中使用：

import { useWindowSize } from './hooks';
export default {
  setup() {
    const windowSize = useWindowSize();
    return {
      windowSize
    };
  }
};

2.  Teleport 组件

它能将组件内容渲染到DOM中指定的位置，不受组件原本所在DOM层级限制。例如，想把一个模态框组件的内容渲染到 body 标签下：
 

<template>
  <teleport to="body">
    <div class="modal">
      <p>这是模态框内容</p>
    </div>
  </teleport>
</template>

3. Suspense 组件

用于处理异步组件加载时的过渡状态。比如有个异步加载的组件 AsyncComponent ：

import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

使用 Suspense 包裹来展示加载态和错误态：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>正在加载...</div>
    </template>
  </Suspense>
</template>

4. 全局 API 转换

Vue 3 对一些全局 API 进行了调整，像创建全局组件现在推荐使用 app.component 而不是 Vue.component 了，例如：

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './MyComponent.vue';
const app = createApp(App);
app.component('my-component', MyComponent);
app.mount('#app');

5. 动态组件优化

传递 null 给动态组件可以卸载之前渲染的组件实例，避免不必要的内存占用。例如：

<template>
  <component :is="currentComponent"></component>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
  data() {
    return {
      currentComponent: ComponentA
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = null; // 先卸载当前组件
      setTimeout(() => {
        this.currentComponent = ComponentB;
      }, 100);
    }
  }
};
</script>

6. 性能优化相关

v-memo 指令：用于缓存模板的部分内容，避免重复渲染。比如有个列表渲染，部分数据变化时不希望整个列表重新渲染：
 

<template>
  <div v-for="(item, index) in list" :key="index" v-memo="[item.id]">
    <p>{{ item.name }}</p>
  </div>
</template>

当列表项的 id 不变时，对应的DOM元素就不会重新渲染。

- 使用 watchEffect 的 flush 选项：可以控制副作用函数的执行时机，像设置为 'post' 就会在组件更新后执行，更利于性能优化，例如：

import { watchEffect } from 'vue';
watchEffect(() => {
  // 执行的响应式依赖追踪逻辑
}, {
  flush: 'post'
});

如果觉得文章对你有帮助，欢迎点赞关注加转发，一键三连