Vue组件之常用的import及解析

Vue组件常用的import如下：

import {
  ref,
  computed,
  toRefs,
  watch,
  onMounted,
  h,
  nextTick,
  defineAsyncComponent,
  reactive,
  shallowRef,
  getCurrentInstance,
  inject,
  unref, 
  PropType,
  createVNode,
} from "vue";

shallowRef：

1.性能优化：当处理大型对象或者嵌套很深的对象时，如果不需要对对象的所有属性进行响应式追踪，使用 shallowRef 可以减少不必要的响应式开销，提高性能。

2.避免不必要的更新：在某些场景下，只有当对象引用发生改变时才需要更新视图，使用 shallowRef 可以确保只有在这种情况下才触发更新，避免因为对象内部属性的频繁变化而导致的不必要的重新渲染。

总的来说，shallowRef 适用于那些只需要追踪对象引用变化，而不需要追踪对象内部属性变化的场景。

 

h：

在 Vue 中，h 函数（全称为 createVNode）是用于创建虚拟节点（VNode）的核心函数，它在编写渲染函数时发挥着关键作用。

通过合理使用 h 函数，你可以创建复杂的虚拟 DOM 结构，包括 HTML 标签节点、组件节点等，并传递属性和事件。

 

defineAsyncComponent：

defineAsyncComponent 是 Vue 3 中用于定义异步组件的函数，它允许你在需要时动态加载组件，这有助于减少初始加载时间，特别是对于大型组件或不常用的组件。

异步组件是指在需要时才会被加载的组件，而不是在应用初始化时就全部加载。这样可以提高应用的性能，尤其是在处理大型组件或按需加载的场景中。