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

news2024/11/16 17:56:50
  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>
     否则会报如下警告

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1073651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

文件名太长,批量改名不求人:轻松解决文件名问题

在电脑使用过程中&#xff0c;我们经常需要处理各种文件&#xff0c;有时候会遇到文件名过长的问题。过长的文件名可能会让人感到混乱&#xff0c;也可能会引发一些操作问题。那么&#xff0c;如何快速解决文件名过长的问题呢&#xff1f;其实&#xff0c;我们可以通过批量重命…

webpack不同环境下使用CSS分离插件mini-css-extract-plugin

1.背景描述 使用mini-css-extract-plugin插件来打包css文件&#xff08;从css文件中提取css代码到单独的文件中&#xff0c;对css代码进行代码压缩等&#xff09;。 本次采用三个配置文件&#xff1a; 公共配置文件&#xff1a;webpack.common.jsdev开发环境配置文件&#x…

《DevOps 精要:业务视角》- 读书笔记(七)

DevOps 精要:业务视角&#xff08;七&#xff09; DevOps历程什么是企业体系的DevOps&#xff1f;DevOps的目标是什么&#xff1f; DevOps的知识体系规范敏捷持续交付IT服务管理以TPS理念为基础 DevOps团队角色流程主管&#xff08;Process Master&#xff09;服务主管&#xf…

环信web、uniapp、微信小程序SDK报错详解---登录篇

项目场景&#xff1a; 记录对接环信sdk时遇到的一系列问题&#xff0c;总结一下避免大家再次踩坑。这里主要针对于web、uniapp、微信小程序在对接环信sdk时遇到的问题。主要针对报错400、404、401、40 (一) 登录用户报400 原因分析&#xff1a; 从console控制台输出及networ…

Fuzz测试:发现软件隐患和漏洞的秘密武器

0x01 什么是模糊测试 模糊测试&#xff08;Fuzz Testing&#xff09;是一种广泛用于软件安全和质量测试的自动化测试方法。它的基本思想是向输入参数或数据中注入随机、不规则或异常的数据&#xff0c;以检测目标程序或系统在处理不合法、不正常或边缘情况下的行为。模糊测试通…

Elasticsearch搜索引擎:ES的segment段合并原理

在讲 segment 之前&#xff0c;我们先用一张图了解下 ES 的整体存储架构图&#xff0c;方便后面内容的理解&#xff1a; 一、segment文件的合并流程&#xff1a; 当我们往 ElasticSearch 写入数据时&#xff0c;数据是先写入 memory buffer&#xff0c;然后定时&#xff08;默…

react create-react-app v5配置 px2rem (不暴露 eject方式)

环境信息&#xff1a; create-react-app v5 “react”: “^18.2.0” “postcss-plugin-px2rem”: “^0.8.1” 配置步骤&#xff1a; 不暴露 eject 配置自己的webpack&#xff1a; 1.下载react-app-rewired 和 customize-cra-5 npm install react-app-rewired customize-cra…

Python —— UI自动化之八大元素定位

1、基础元素定位 1、id定位 使用html中标签的id元素去定位&#xff0c;在一般定位中优先选择&#xff0c;举例&#xff1a; from time import sleep from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Firefox() driver.get(&q…

【Linux 安装Kibana 及 Es 分词器安装】

一、客户端Kibana安装 Kibana是一个开源分析和可视化平台&#xff0c;旨在与Elasticsearch协同工作。参考文档 1. 下载并解压缩Kibana 下载路径 选择的版本是和 ElasticSearch 对应&#xff08;7.17.3&#xff09; 下载后上传到Linux 系统中&#xff0c;并放在 /root/ 下&a…

微软出品,166页深度解读,多模态GPT-4V

多模态王炸大模型GPT-4V&#xff0c;166页“说明书”重磅发布&#xff01;而且还是微软团队出品。 什么样的论文&#xff0c;能写出166页&#xff1f; 不仅详细测评了GPT-4V在十大任务上的表现&#xff0c;从基础的图像识别、到复杂的逻辑推理都有展示&#xff1b; 还传授了…

【C++ 学习 ㉖】- 布隆过滤器详解(哈希扩展)

目录 一、布隆过滤器的简介 二、布隆过滤器的实现 2.1 - BloomFilter.h 2.2 - test.cpp 一、布隆过滤器的简介 布隆过滤器&#xff08;Bloom Filter&#xff09;是由 Burton Howard Bloom 在 1970 年提出的一种紧凑型的、比较巧妙的概率型数据结构&#xff08;probabilist…

阿里云服务器全方位介绍——看这一篇就够了

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿小云axiaoyun.com分…

模拟pdf运行js脚本触发xss攻击及防攻击

一、引入pdfbox依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>3.0.0</version> </dependency> 二、生成一个带js脚本的pdf文件 //Creating PDF document object PDDocum…

OpenAI更新不会代码也可进行模型微调

OpenAI已经更新了他们的微调功能&#xff0c;提供了一个直观的用户界面&#xff0c;使用户能够在不编写任何代码的情况下进行模型的微调。 01 通过微调截图可以看到 1. Fine-tuning&#xff1a;这是微调功能的主页面。您可以看到选项卡&#xff0c;如"All", &quo…

java.lang.OutOfMemoryError: GC overhead limit exceeded

Bug信息 Executor task launch worker for task XXXXXX ERROR Executor: Exception in task XX.X in stage X.X (TID XXXXXX) java.lang.OutOfMemoryError: GC overhead limit exceededBug本质原因 Executor内存不足 Executor内存管理 堆内和堆外内存规划 作为一个 JVM 进…

NPM- 滚动进度可视化插件

目录 progress-scroll 滚动进度插件&#x1f4e6; 体验&#x1f30d; 安装&#x1f6f9; 注入&#x1f389; 配置 &#x1f916; 使用方法&#x1f4dd; 使用示例 Demo.vue &#x1f48c; 原理 progress-scroll 滚动进度插件 &#x1f916;&#x1f389;&#x1f389; 您的 进度…

零售业的技术演变:远程支持软件的作用

如果你在零售业工作了一段时间&#xff0c;那么你可能已经亲眼目睹了科技给该行业带来的巨大变化。从在笨重的收银机上统计销售额到保留手写的库存清单&#xff0c;一切都是手动操作的日子已经一去不复返了。今天&#xff0c;这是一个全新的世界。零售技术以惊人的速度发展&…

宝塔面板二次元透明主题美化模板

看惯了宝塔面板默认风格模板&#xff0c;我们可以试试自己美化修改&#xff0c;我的站长站知道一款非常漂亮的宝塔面板二次元透明主题美化模板&#xff0c;美不美大家看下图&#xff0c;分享给大家。 下载&#xff1a;飞猫盘&#xff5c;文件加速传输工具&#xff5c;云盘&…

【java学习】特殊流程控制语句(8)

文章目录 1. break语句2. continue语句3. return语句4. 特殊流程语句控制说明 1. break语句 break语句用于终止某个语句块的执行&#xff0c;终止当前所在循环。 语法结构&#xff1a; {  ......     break;     ...... } 例子如下&#xff1a; &#xff08;1&…

(部署服务器系列二)服务器上安装springboot运行环境,发布并运行项目

上篇文章已经安装CentOS&#xff0c;并且通过桥接连接上内网和外网&#xff0c;接下来我们先安装springboot项目运行环境&#xff0c;用XShell远程连接CentOS 1、下载安装JDK 下载的JDK版本要和开发的项目一致&#xff0c;下载后用xftp工具传输到 /usr/local/src 目录下 镜像…