重构项目 vue2 => vue3 & nuxt2 => nuxt3 遇到的问题

  1. vue3获取组件的上下文

    import { getCurrentInstance } from 'vue';
    // 获取当前组件实例
    const instance = getCurrentInstance();
     
    // 获取当前组件的上下文,下面两种方式都能获取到组件的上下文。
     //  方式一,这种方式只能在开发环境下使用,生产环境下的ctx将访问不到
    const { ctx }  = getCurrentInstance(); 
    //  方式二,此方法在开发环境以及生产环境下都能放到组件上下文对象(推荐)
    const { proxy }  = getCurrentInstance();  
    
  2. nuxt3 中使用Vue 语法,需要使用Vue提供的resolveComponent辅助方法,否则无法正常渲染组件,且组件名称必须是字符串而不是变量

    
    
    
  3. 警告:Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with markRaw or using shallowRef instead of ref.使用"markRaw"方法将组件对象标记为非响应式对象,或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。

    const componentMap = markRaw(myComponent)
  4. elementPlus与elementUI语法升级 

    //elementUI的descriptions组件插槽语法:
    
        
    
    //elementUI的elementPlus组件语法:
    
        
    
    否则会不展示插槽内容
    //elementUI的popover组件插槽语法:
     
         
    //elementUI的popover组件语法: 否则会报如下警告

 重构项目 vue2 => vue3 & nuxt2 => nuxt3 遇到的问题_第1张图片

你可能感兴趣的:(重构,nuxt3)