vue2升级到vue2.7

vue2升级到vue2.7

小小的改进,大大的提升

只需要简单修改,开发体验得到大大提升.

为什么要升级Vue2.7

不能拒绝的理由:

  • 组合式 API(解决mixins问题:命名冲突,隐式依赖)
  • 单文件组件内的 <script setup>语法
  • 模板表达式中支持 ESNext 语法(可选链:?.、空值合并:??)
  • 单文件组件内的 CSS v-bind

升级哪些内容

我项目中直接使用的webpack(只需升级下面两个包)

  • vue升级到^2.7.0
json 复制代码
"dependencies": {
    // "vue": "2.6.12"
    "vue": "^2.7.0"
}
  • vue-loader升级到 ^15.11.1
json 复制代码
"devDependencies": {
    //"vue-loader": "^15.7.0"
    "vue-loader": "^15.10.0"
}

如果你项目使用的vue-cli

  • @vue/cli-xxx 将本地的 @vue/cli-xxx 依赖升级至所在主版本范围内的最新版本 (如有):

    • v4 升级至 ~4.5.18
    • v5 升级至 ~5.0.6
    • vue 升级至 ^2.7.0

同时你可以从依赖中移除 vue-template-compiler------它在 2.7 中已经不再需要了。

注意:如果你在使用 @vue/test-utils,那么 vue-template-compiler 需要保留,因为该测试工具集依赖了一些只有这个包会暴露的 API。

  • vue相关依赖

    • vue-loader: ^15.10.0
    • vue-demi: ^0.13.1
    • eslint-plugin-vue 至最新版本 (9+)

setup 中使用 vuex、vue-router

由于项目版本 vuexvue-router 均为 v3,组合式 API 中,我们需要使用一些新的函数来代替访问 this 等方法,如:this.$store、this.$router、this.$route。

解决方案:也用到了 getCurrentInstance,通过它封装一些方法使用。

  • vue2.7-composition-helpers.js
javascript 复制代码
import { getCurrentInstance } from 'vue'

export function useStore() {
  const { proxy } = getCurrentInstance()
  const store = proxy.$store
  return store
}
export function useRoute() {
  const { proxy } = getCurrentInstance()
  const route = proxy.$route
  return route
}
export function useRouter() {
  const { proxy } = getCurrentInstance()
  const router = proxy.$router
  return router
}

第三方库 element ui

同样我们第三方库的方法,比如: this.$message等方法也不能使用了,这里也放到上面的工具js中.

javascript 复制代码
/**
 * 升级vue2.7辅助函数
 */
import { getCurrentInstance } from 'vue'
/** this.$store替换方案 */
export function useStore() {
  const { proxy } = getCurrentInstance()
  const store = proxy.$store
  return store
}
/** this.$route替换方案 */
export function useRoute() {
  const { proxy } = getCurrentInstance()
  const route = proxy.$route
  return route
}
/** this.$router替换方案 */
export function useRouter() {
  const { proxy } = getCurrentInstance()
  const router = proxy.$router
  return router
}
/** this.$message方法替换方案 */
export function useMessage() {
  const { proxy } = getCurrentInstance()
  const message = proxy.$message
  return message
}
/** this.$modal替换方案 */
export function useModal() {
  const { proxy } = getCurrentInstance()
  const modal = proxy.$modal
  return modal
}

深度选择器改写::v-deep、/deep/为:deep()

更新后,如果有::v-deep、/deep/相关的报错或者警告,需要改用:deep()

css 复制代码
<style scoped>
  .a :deep(.b) { /* ... */ }
</style>

eslint-plugin-vue 升级到 v9 以上

在使用 setup 语法糖的时候由于内部变量都是直接声明暴露给模板使用的,所以旧版 eslint 检测到会有未使用的变量的时候会报错 'unused...'

json 复制代码
"devDependencies": {
    "eslint-plugin-vue": "^9.3.0"
}

与 Vue 3 的行为差异

❌ createApp() (Vue 2 不支持相互隔离的应用 scope)

❌ <script setup> 中的顶层 await (Vue 2 不支持异步组件初始化)

❌ 模板表达式中的 TypeScript 语法 (与 Vue 2 parser 不兼容)

❌ 响应性语法糖 (仍处于试验阶段)

❌ 选项式组件不支持 expose (但是在 <script setup> 中支持 defineExpose())。

相关推荐
霍先生的虚拟宇宙网络28 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
温吞-ing30 分钟前
第十章JavaScript的应用
开发语言·javascript·ecmascript
彪82531 分钟前
第十章 JavaScript的应用 习题
javascript·css·ecmascript·html5
jessezappy1 小时前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
程序媛-徐师姐1 小时前
Java 基于SpringBoot+vue框架的老年医疗保健网站
java·vue.js·spring boot·老年医疗保健·老年 医疗保健
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave2 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习