vue2升级到vue2.7

小小的改进,大大的提升

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

为什么要升级Vue2.7

不能拒绝的理由:

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

升级哪些内容

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

• vue升级到^2.7.0

"dependencies": {
    // "vue": "2.6.12"
    "vue": "^2.7.0"
}

• vue-loader升级到 ^15.11.1

"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

由于项目版本 vuex、vue-router 均为 v3，组合式 API 中，我们需要使用一些新的函数来代替访问 this等方法，如：this.$store、this.$router、this.$route。
解决方案：也用到了 getCurrentInstance，通过它封装一些方法使用。

• vue2.7-composition-helpers.js

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中.

/**
 * 升级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()

<style scoped>
  .a :deep(.b) { /* ... */ }
</style>

eslint-plugin-vue 升级到 v9 以上

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

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