vue2迁移到vue3注意点

已于 2024-07-15 10:47:13 修改
阅读量123 收藏
点赞数 1
分类专栏： Vue3 文章标签： javascript 前端
于 2024-07-15 10:10:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43799793/article/details/140430585
版权

vue2迁移到vue3注意点

1、插槽的修改
使用 #default ， 以及加上template 模板
在这里插入图片描述
在这里插入图片描述
2、 类型的定义，以及路由，vue相关资源（ref, reactive,watch）的引入等
在这里插入图片描述

3、类装饰器
1）vue-class-component是vue官方库,作用是用类的方式编写组件
2）这种编写方式可以让.vue文件的 js 域结构更扁平
3）并且vue组件可以使用继承、混入等高级特性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

config配置
在这里插入图片描述

Software攻城狮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
后台从 vue2 迁移到 vue3
qq_41302594的博客
06-17 1491
vue2 迁移 vue3
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt,用于解释为什么使用新技术和框架
Vue3进阶（叁）：关于 Vue2 项目迁移至 Vue3 的几点注意事项
IT全栈 华强工作室
03-26 1433
1 月 2 日消息，Vue.js 作者尤雨溪发文声称，Vue 2 已于 2023 年 12 月 31 日结束生命周期（EOL），目前 Vue 2 已经无法接收到新功能及修复补丁，还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。Vue 2.0 最初发布于 2016 年，至今已经有 7 年历史，尤雨溪表示，2.0 版本是 Vue 成为主流框架历程中的一个重要里程碑，“不过随着 Vue 3 的成熟，如今是时候淘汰 Vue 2 了”。
Vue2到Vue3迁移
herbsama的博客
06-20 412
迁移过程做下记录，不太会写文章格式
Vue2迁移Vue3，如何迁移？
weixin_60053942的博客
12-14 983
主要是生命周期的替换方便记忆Vue2bind - 指令绑定到元素后调用。只调用一次。inserted - 元素插入父 DOM 后调用。update - 当元素更新，但子元素尚未更新时，将调用此钩子。componentUpdated - 一旦组件和子级被更新，就会调用这个钩子。unbind - 一旦指令被移除，就会调用这个钩子。也只调用一次。Vue3created - 新增！在元素的 attribute 或事件监听器被应用之前调用。beforeUpdate：新增！
Vue如何从1.0迁移到2.0
08-29
本文将详细探讨Vue从1.0迁移到2.0的主要步骤和注意事项，帮助开发者顺利进行升级。 首先，Vue 2.0引入了一些核心改动，包括性能优化、API调整以及移除了一些旧特性。以下是关键的迁移步骤和知识点： 1. **生命周期...
Vue2，Vue3的开发者工具
03-09
在Vue2到Vue3的迁移过程中，开发者可能需要关注一些关键变化，例如： - **Composition API**：Vue3引入了Composition API，它允许开发者更灵活地组合和重用逻辑，相比于Vue2的Option API，提供了更好的代码组织和...
详解项目升级到vue-cli3的正确姿势
12-02
在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。以下是升级过程中可能遇到的关键知识点和解决方案： 1. **创建新项目并迁移源码**： - 首先，创建一个新的 Vue CLI 3 项目，...
Vue2+Vue3前端框架全套视频.zip
02-24
这套 "Vue2+Vue3前端框架全套视频" 可能涵盖了从基础到高级的Vue知识，包括如何创建项目、组件设计、状态管理（Vuex）、路由（Vue Router）、异步数据处理、性能优化以及从Vue2向Vue3迁移的策略等内容。通过学习这些...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 376
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 169
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 204
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
专注基础架构领域
07-12 481
我尝试使用 prams 传递数据当我跳转页面时,得到的 prams 数据为空 ,控制台也出现了 Vue Router 的警告点开链接后发现了原因,。也就是说，从Vue Router的2022-8-22 这次更新后，我们使用上面的方式在新页面无法获取：vue也给我们提出了解决方案：使用 query 的方式传参只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。将参数放在 pinia 或 vuex仓库里。
TS类型声明文件（二）如何在 TS 中导入导出局部类型
weixin_43303603的博客
07-10 262
系列文章之：如何在 TypeScript 中导入导出局部类型
vue2项目迁移到vue3
05-24
将 Vue 2 项目迁移到 Vue 3 需要注意以下几点： 1. 安装 Vue CLI 4.5+ 版本。新版本的 Vue CLI 提供了一个 `vue upgrade` 命令，可以帮助你自动更新项目。 2. 更新 Vue、Vue Router 和 Vuex 到最新版本。 3. 将 Vue 2 中的 `v-bind` 和 `v-on` 指令替换为 `:attr` 和 `@event` 语法。 4. 在 Vue 3 中，`v-bind` 指令的简写符号由冒号 `:` 改为等号 `=`。例如：`<img :src="url">` 应该改为 `<img src="url">`。 5. 将 Vue 2 中的 `filters` 迁移到 Vue 3 中的 `computed` 属性中。 6. 在 Vue 3 中，全局 API 已经被移除，需要使用模块导入的方式来使用它们。例如：`Vue.directive` 应该改为 `import { directive } from 'vue';`。 7. 在 Vue 3 中，`v-model` 指令的使用方式也有所改变。要使用 `v-model` 绑定一个变量，需要在组件中使用 `modelValue` 和 `update:modelValue` 两个属性。例如：`<input v-model="message">` 应该改为 `<input :modelValue="message" @update:modelValue="val => message = val">`。 这些是迁移 Vue 2 项目到 Vue 3 的一些主要注意事项，具体的迁移过程还需要根据项目的具体情况进行调整。建议在迁移前先备份项目代码，以免出现意外情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值