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

  1. vue3获取组件的上下文

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

    javascript 复制代码
    <template>
      <component :is="clickable ? MyButton : 'div'" />
    </template>
    
    <script setup>
    const MyButton = resolveComponent('MyButton')
    </script>
  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"来创建一个浅响应式对象。

    javascript 复制代码
    const componentMap = markRaw(myComponent)
  4. elementPlus与elementUI语法升级

    javascript 复制代码
    //elementUI的descriptions组件插槽语法:
    <el-descriptions>
        <template slot="extra"></template>
    </el-descriptions>
    //elementUI的elementPlus组件语法:
    <el-descriptions>
        <template #extra></template>
    </el-descriptions>
    否则会不展示插槽内容
    javascript 复制代码
    //elementUI的popover组件插槽语法:
     <el-popover>
         <div  slot="reference"></div>
     </el-popover>
     //elementUI的popover组件语法:
      <el-popover>
         <template #reference></template>
     </el-popover>
     否则会报如下警告
相关推荐
编程一生2 天前
大型系统从一种语言迁移重构到另一种语言的核心思路是什么
重构
失舵之舟-2 天前
3DGS与NeRF的区别
3d·重构·三维重建·nerf·3dgs·3d guassian
喵叔哟3 天前
重构代码之替换参数为显式方法
重构
Bug从此不上门3 天前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
Bessie2343 天前
实现 Nuxt3 预览PDF文件
pdf·vue3·nuxt3
喵叔哟3 天前
重构代码之添加参数
开发语言·重构·c#
喵叔哟4 天前
重构代码之移动方法
重构
喵叔哟4 天前
重构代码之参数化方法
重构
喵叔哟4 天前
重构代码之用委托替代继承
开发语言·重构
DngYT6 天前
重构响应对象
重构