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

王——小喵2023-10-13 13:16

vue3获取组件的上下文

javascript 复制代码

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

nuxt3 中使用Vue <component :is="someComputedComponent">语法，需要使用Vue提供的resolveComponent辅助方法，否则无法正常渲染组件，且组件名称必须是字符串而不是变量
javascript 复制代码
```
<template>
  <component :is="clickable ? MyButton : 'div'" />
</template>

<script setup>
const MyButton = resolveComponent('MyButton')
</script>
```
警告：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)
```

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>
 否则会报如下警告