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

本文主要是介绍重构项目 vue2 =＞ vue3 nuxt2 =＞ nuxt3 遇到的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. vue3获取组件的上下文

   import { getCurrentInstance } from 'vue';
   // 获取当前组件实例
   const instance = getCurrentInstance();// 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。//  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
   const { ctx }  = getCurrentInstance(); 
   //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
   const { proxy }  = getCurrentInstance();  
   

2. nuxt3 中使用Vue <component :is="someComputedComponent">语法，需要使用Vue提供的resolveComponent辅助方法，否则无法正常渲染组件，且组件名称必须是字符串而不是变量

   <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"来创建一个浅响应式对象。

   const componentMap = markRaw(myComponent)

4. elementPlus与elementUI语法升级 

   //elementUI的descriptions组件插槽语法：
   <el-descriptions><template slot="extra"></template>
   </el-descriptions>
   //elementUI的elementPlus组件语法：
   <el-descriptions><template #extra></template>
   </el-descriptions>
   否则会不展示插槽内容

   //elementUI的popover组件插槽语法：<el-popover><div  slot="reference"></div></el-popover>//elementUI的popover组件语法：<el-popover><template #reference></template></el-popover>否则会报如下警告

 

这篇关于重构项目 vue2 =＞ vue3 nuxt2 =＞ nuxt3 遇到的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---