1、vue3 defineAsyncComponent和import加载组件的区别

defineAsyncComponent 和 import() 在 Vue3 中都用于实现组件的异步加载，但它们在细节上存在一些差异。

defineAsyncComponent：是 Vue3 提供的一个函数，它接收一个返回 Promise 的函数作为参数。这个函数通常用于加载组件，当组件被请求时，这个 Promise 会被 resolve，从而加载并显示该组件。defineAsyncComponent 的优势在于它可以接收一个包含多个选项的对象，如 loadingComponent、errorComponent、delay 等，这些选项允许开发者对加载过程进行更细致的控制。
import() ：是 ES 模块动态导入的语法，它同样返回一个 Promise。当使用 import() 来加载 Vue 组件时，Promise 的 resolve 会返回一个组件对象。import() 通常与 defineAsyncComponent 搭配使用，因为它可以直接从服务器加载组件，而不需要预先在主包中包含所有组件。

总的来说，defineAsyncComponent 提供了更多的控制选项，而 import() 则是一个简洁的动态导入语法。在实际应用中，二者往往会结合使用，以实现最佳的异步加载体验。

2、vue3 异步加载组件

import { defineAsyncComponent } from 'vue' 
const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue') ) 
export default { components: { AsyncComponent } }

3、markRaw shallowRef使用

markRaw: 1.将一个对象标记为不可被转为代理，返回该对象本身

  const markRawObj1 = markRaw(obj1);
  // console, log(markRawObj1，reactive(obj1));
  console.log(isProxy(reactive(obj1))); // false

4、toRaw：proxy的原始对象

  const obj ={a: 1};
  const reactiveObj = reactive(obj);
  console.log(reactiveObj,toRaw(reactiveObj));//proxy ，{a: 1}

5、vue3中watchEffect

watchEffect的用法作用:立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行，相当于watch a immediate：true 只能是基础类型

1、会立即执行 2、会自动绑定监听数据 3、只能监听基本数据类型的响应式数据用法: 1.第一个参数就是运行的副作用函数副作用函数的参数也是一个函数，是用来注册清理回调的清理函数执行时机: (1) watchEffect被重新触发的时候 (2) 组件卸载的时候(即清理函数)

2.第二个参数: 可选的选项，用来调整副作用刷新的时机或调试副作用依 flush?: 'pre'(默认) 'post' 'sync pre: 默认，组件渲染之前，无法拿到dom post：语法糖watchPostEffect 组件渲染之后，获取dom(在生命周期onBeforeUpdate和o sync: 同步调用 (效率低)语法糖 watchSyncEffect

 watchEffect(
    (onClean) => {
      // console.log(obj.count);
      onClean(() => {
        console.log('清理函数');
      });
      console.log(document.getElementById('input'));
    },
    { flush: true }
  );