重构项目 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>
     否则会报如下警告
相关推荐
喵叔哟8 小时前
重构代码之引入本地扩展
重构
喵叔哟13 小时前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
seraph99913 小时前
python oa服务器巡检报告脚本的重构和修改(适应数盾OTP)有空再去改
重构
喵叔哟3 天前
重构代码之删除对参数的赋值
重构
fishjam3 天前
[开源重构]Search(Elasticsearch/OpenSearch) Sync Tool
elasticsearch·重构·开源
多多*4 天前
Vue.js 插槽 Slots 实际应用 最近重构项目的时候遇到的...
前端·vue.js·重构
喵叔哟6 天前
重构代码之内联类
服务器·重构
喵叔哟6 天前
重构代码之替换算法
重构
有趣的杰克10 天前
移动端【01】面试系统的MVVM重构实践
面试·职场和发展·重构