技术标签: 前端 vue.js Vue从入门到精通 javascript
首先提个问题,大家公司的Vue前端项目目前使用的版本是多少呢,是否已经在计划升级版本或者进行重构,那么如果有这个计划,那么这篇文章将是具有一定指导意义,至少在你的升级改造的工时评估方面有着借鉴意义。
随着Vue
版本的不断升级迭代,目前基本上有着稳定开发团队和技术积累的公司,陆陆续续将前端服务的Vue版本从Vue2.x
升级Vue3
。因为Vue3
它带来了许多新特性和改进,例如更快的渲染速度、更好的类型推导、更好的组合 API 等等。如果你正在使用 Vue 2.x,升级到 Vue 3 可以让你的项目获得这些新特性和改进,并且更好地适应未来的发展。然而,Vue 3 与 Vue 2.x 在语法和一些核心概念上有一些重大变化,因此升级 Vue 3 可能需要一些额外的工作。本指南将为你提供一些有关如何将 Vue 2.x 项目升级到 Vue 3 的详细说明和指导,希望能够帮助你平滑地进行升级。
有同学说我这一篇 看的太费劲,建议我直接整理一篇Vue2.x 升级到 vue3 的修改清单
,
所以又整理了一篇《Vue 2.x 项目升级到 Vue 3详细指南【修改清单】》希望对大家有所帮助
如果你的项目是使用 Vue CLI 创建的,则需要升级到最新版本的 Vue CLI(3.0.0 及以上),以便支持 Vue 3。可以使用以下命令升级 Vue CLI:
npm install -g @vue/cli
或
yarn global add @vue/cli
使用 npm 或 yarn 安装最新版本的 Vue 3:
npm install vue@next
或
yarn add vue@next
在 Vue 3 中,一些属性和选项被重命名或删除,需要更新组件代码。
v-bind=“$listeners” 替换为 v-bind=“listeners”
在 Vue 2.x 中,可以使用 v-bind=“$listeners” 将所有父组件传递的事件监听器绑定到子组件上,但是在 Vue 3 中,这种语法被弃用了,需要改为 v-bind=“listeners”。
v-bind=“$attrs” 替换为 v-bind=“attrs”
在 Vue 2.x 中,可以使用 v-bind=“$attrs” 将所有非 prop 的父组件属性绑定到子组件上,但是在 Vue 3 中,需要改为 v-bind=“attrs”。
v-on:click.native 替换为 @click.native
在 Vue 2.x 中,可以使用 v-on:click.native 绑定原生 DOM 事件,但是在 Vue 3 中,需要改为 @click.native。
v-on:keyup.enter 替换为 @keyup.enter
在 Vue 2.x 中,可以使用 v-on:keyup.enter 绑定键盘事件,但是在 Vue 3 中,需要改为 @keyup.enter。
v-on:keyup.13 替换为 @keyup.13
在 Vue 2.x 中,可以使用 v-on:keyup.13 绑定键盘事件,但是在 Vue 3 中,不再支持这种语法,需要改为 @keyup.13。
v-on:keyup 替换为 @keyup
在 Vue 2.x 中,可以使用 v-on:keyup 绑定键盘事件,但是在 Vue 3 中,需要改为 @keyup。
Vue 3 中全局 API 的使用方式也有所改变。例如:
Vue.filter 替换为 app.config.globalProperties.$filter
在 Vue 2.x 中,可以使用 Vue.filter 注册全局过滤器,但是在 Vue 3 中,需要使用 app.config.globalProperties.$filter。
Vue.directive 替换为 app.directive
在 Vue 2.x 中,可以使用 Vue.directive 注册全局指令,但是在 Vue 3 中,需要使用 app.directive。
Vue.mixin 替换为 app.mixin
在 Vue 2.x 中,可以使用 Vue.mixin 全局混入选项,但是在 Vue 3 中,需要使用 app.mixin。
如果你的项目中使用了 Vue Router 和 Vuex 等状态管理器,需要将其升级到最新版本,以适配 Vue 3。
Vue Router:
Vue Router 4.x 支持 Vue 3,需要将 Vue Router 和 Vue 升级到最新版本,然后更新路由的 API 和语法,例如:
Vuex:
Vuex 4.x 支持 Vue 3,需要将 Vuex 和 Vue 升级到最新版本,然后更新状态管理器的 API 和语法,例如:
如果你的项目使用 TypeScript,需要更新 TypeScript 版本并进行相应的配置和迁移。
TypeScript 版本:
Vue 3 需要 TypeScript 3.9 及以上版本。
配置文件:
需要更新 TypeScript 配置文件(tsconfig.json)中的编译选项,例如:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"types": [
"webpack-env",
"@types/node",
"@vue/cli-plugin-babel/types",
"@vue/cli-plugin-eslint/types",
"@vue/cli-service"
]
},
"include": ["src/**/*"],
"exclude": ["node_modules", "dist"]
}
类型定义文件:
Vue 3 中的类型定义文件(.d.ts)有所改变,需要将其更新为最新的版本。
如果你的项目中有测试代码,需要更新测试框架和测试代码,以适配 Vue 3。
测试框架:
更新测试框架到最新版本,例如 Jest 27.x、Mocha 9.x 等。
测试代码:
更新测试代码,例如:
- import {
mount } from '@vue/test-utils' 替换为 import {
mount } from 'vue-test-utils'
- Vue.extend 替换为 defineComponent
- wrapper.vm.$emit 替换为 wrapper.trigger
将 Vue 2.x 项目升级到 Vue 3 需要更新组件代码、全局 API、路由和状态管理器、TypeScript 配置和测试代码等。如果你对迁移过程不确定,可以先在一个新的项目中尝试升级,以便在实际项目中更好地适配 Vue 3。
vue2.x升级到vue3 做好充分的准备和团队,以及领导沟通清楚,步骤以及面临的风险,以及应急准备,以及知识储备和人员储备。就比如搞了一半发现领导根本对vue升级的急迫性没那么强烈,中途给你把资源撤了,半拉子烂摊子毁在你的手里,瞬间挫败感笼上心头。记住资源是团队作战中很重要的事情,提前给团队和领导信心和目标。在升级之前,需要做好充分的准备和规划。有的时候干成一件事,也许技术上根本不是障碍
。
下面只是一些技术上的总结和技术事项,都好解决。
Vue 3 中的语法与 Vue 2.x 有一些重大变化,例如使用 createApp
替代了 new Vue
,使用 setup
替代了 data
和 methods
等等。因此,需要花费一些时间来学习新语法和调整现有代码。
一些 Vue 2.x 插件和库可能不兼容 Vue 3,需要更新或替换。在升级之前,需要检查你的依赖项是否与 Vue 3 兼容,并相应地做出调整。
Vue 3 对 TypeScript 的支持更加完善,因此如果你的项目中使用了 TypeScript,升级到 Vue 3 可能需要一些额外的注意事项,例如更改类型定义和配置文件等等。
如果你的项目依赖于其他库或框架,例如 Vuex、Vue Router 等等,需要在升级 Vue 3 之前先升级这些库或框架,以确保整个项目能够顺利升级。
在升级之后,需要进行一些测试和调试来确保项目的稳定性和正确性。这可能需要一些额外的时间和精力。
·如果你想自己去了解,那么我整理了这些资源可能对你有帮助
文章浏览阅读752次。本篇文章给大家带来的内容是关于微信小程序传递参数以及接收数据的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。当传递字符串的时候//传递参数的jsclick:function(){var str='要传递的字符串';wx.navigateTo({url: '../page/index?str=' + str})}//在下个页面的onload中获取,onLoad: functio..._php 接口如何接收文件流参数 微信 buffer
文章浏览阅读8.5k次。传统的 Unity 桌面环境,其应用程序启动器的容器——Launcher,一直坚定地待在屏幕的左侧。其实笔者一直认为,应用程序启动器位于左侧更加合理一些,因为当前低分辨率的宽屏显示器还是大多数,在这种屏幕中,上下内容越少、左右内容越多,越有利于工作对象的显示,比如文档、表格软件中会显示更多的行,图像处理软件会让工作区的面积更大。即使在 Ubuntu 的设置中心里,也_ubuntu桌面图标位置如何更改
文章浏览阅读1.9k次,点赞2次,收藏6次。C C 语言编程题及答案(三)语言编程题及答案(三) 1. 给小学生出加法考试题 编写一个程序,给学生出一道加法运算题,然后判断学生输入的答案对错与否,按下列 要求以循序渐进的方式编程。 程程序序 1 通过输入两个加数给学生出一道加法运算题,如果输入答案正确,则显示 “Right!” , 否则显示“Not correct! Try again!” ,程序结束。 程程序序 2 通过输入两个加数给学生..._用c语言调用函数:出10道10之间的加数给学生出一道加法运算题,如果输入答案正确,则
文章浏览阅读187次。前言SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SV..._ubuntu+svg编辑
文章浏览阅读509次。1.1天线的作用与地位无线电发射机输出的射频信号功率,通过馈线(电缆)输送到天线,由天线以电磁波形式辐射出去。电磁波到达接收地点后,由天线接下来(仅仅接收很小很小一部分功率),并通过馈线送到无线电接收机。可见,天线是发射和接收电磁波的一个重要的无线电设备,没有天线也就没有无线电通信。天线品种繁多,以供不同频率、不同用途、不同场合、不同要求等不同情况下使用。对于众多品种的天线,进行适当的分类是必要的..._无线网卡天线原理
文章浏览阅读2.1k次。进程与线程:一个程序创建运行就是一个进程,一个进程有一个主线程,主线程唯一主线程执行main函数中的代码,当main函数执行完毕,主线程终止,其生命周期与进程一致。在主线程以外可以通过代码创建其他线程来执行函数或者其他程序。c++头文件 :#include <thread>创建线程一:线程执行函数例如要创建线程执行函数 hello()void hello(){cout<<"hello"<<endl;}只需要在函数里面调用创建线程调用:voi_c++多线程实现的四种方式
文章浏览阅读52次。1.Netty 是什么?Netty 是一款基于 NIO(Nonblocking I/O,非阻塞IO)开发的网络通信框架,对比于 BIO(Blocking I/O,阻塞IO),他的并发性能得到了很大提高。难能可贵的是,在保证快速和易用性的同时,并没有丧失可维护性和性能等优势。2.Netty 的特点是什么?高并发:Netty 是一款基于 NIO(Nonblocking IO,非阻塞IO)开发的网络通信..._socket向netty服务器发送信息失败
文章浏览阅读2.4k次。在NLP代码中导入Keras中的词汇映射器Tokenizerfrom keras.preprocessing.text import Tokenizer执行代码,报错:AttributeError: module 'tensorflow.compat.v2' has no attribute '__internal__'百度找了好久,未找到该相同错误,但看到有一个类似问题,只要将上面代码改为:from tensorflow.keras.preprocessing.text import Tok_from keras.preprocessing.text import tokenizer 报错没有tensorflow
文章浏览阅读229次。点击 机器学习算法与Python学习 ,选择加星标精彩内容不迷路机器之心报道近日,全国政协委员、西湖大学校长施一公在接受央视新闻采访时确认,西湖大学将在明年第一次面向全球招收本科生。「我们..._2021年西湖大学怎样啦?2022界能招录本科生吗?
文章浏览阅读1.2k次。送你一份"不正经"的深度学习简述(附论文)作为人工智能领域里最热门的概念,深度学习会在未来对我们的生活产生显著的影响,或许现在已经是了,从 AlphaGo 到 iPhone X 上的人脸识别(FaceID),背后都有它的身影。关于深度学习,我们能够看到很多优秀的介绍、课程和博客,本文将列举其中的精华部分,而且,你会发现这是一篇"不一样"的...文章技术小能手2018-03-3014387浏览量重磅..._python实现设备拓扑图
文章浏览阅读1.1w次,点赞2次,收藏2次。英语发音规则---E字母常见的发音组合有哪些一、总结一句话总结:很好记的e和5个元音字母的组合,加一个非e开头的iee:开音节 /i:/ eve /i:v/ n. 夏娃----闭音节 /e/ leg /leg/ [lɛɡ] n. 腿 ---非重读[ə] /i/ evidence /'evɪdəns/ ['ɛvɪdəns] n. 证据ea:/e/:bread /br..._字母组合ew与eu的读音
文章浏览阅读2.6k次。#循环语句#打印1到10# print(1,2,3,4,5,6,7,8,9,10)#如果打印大于10个,一个一个输入麻烦#用while循环实现,当while后面的表达式为真时,则执行while,直达表达式为假时,停止循环# i=1# while i<=10:# print(i)# i+=1#每次自增1,避免死循环#打印出来效果不一样,全部是换行# while i<=10..._python 循环输出end='',flush=true