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

相关推荐
bysking26 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓42 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4111 小时前
无网络安装ionic和运行
前端·npm
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js