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())。

相关推荐
专注API从业者18 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile22 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399724 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊29 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火30 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app