自学php做网站,舆情系统排名,野花香视频在线观看社区,wordpress自定义字段分类vue2升级到vue2.7 小小的改进,大大的提升 只需要简单修改,开发体验得到大大提升.
为什么要升级Vue2.7
不能拒绝的理由:
组合式 API(解决mixins问题:命名冲突,隐式依赖)单文件组件内的 script setup语法模板表达式中支持 ESNext 语法(可选链:?.、空值合并:??)单文…
vue2升级到vue2.7 小小的改进,大大的提升 只需要简单修改,开发体验得到大大提升.
为什么要升级Vue2.7
不能拒绝的理由:
组合式 API(解决mixins问题:命名冲突,隐式依赖)单文件组件内的 script setup语法模板表达式中支持 ESNext 语法(可选链:?.、空值合并:??)单文件组件内的 CSS v-bind
升级哪些内容
我项目中直接使用的webpack(只需升级下面两个包)
vue升级到^2.7.0
dependencies: {// vue: 2.6.12vue: ^2.7.0
}vue-loader升级到 ^15.11.1
devDependencies: {//vue-loader: ^15.7.0vue-loader: ^15.10.0
}如果你项目使用的vue-cli vue/cli-xxx 将本地的 vue/cli-xxx 依赖升级至所在主版本范围内的最新版本 (如有) v4 升级至 ~4.5.18v5 升级至 ~5.0.6vue 升级至 ^2.7.0
同时你可以从依赖中移除 vue-template-compiler——它在 2.7 中已经不再需要了。
注意如果你在使用 vue/test-utils那么 vue-template-compiler 需要保留因为该测试工具集依赖了一些只有这个包会暴露的 API。 vue相关依赖 vue-loader: ^15.10.0vue-demi: ^0.13.1eslint-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 vueexport function useStore() {const { proxy } getCurrentInstance()const store proxy.$storereturn store
}
export function useRoute() {const { proxy } getCurrentInstance()const route proxy.$routereturn route
}
export function useRouter() {const { proxy } getCurrentInstance()const router proxy.$routerreturn router
}
第三方库 element ui
同样我们第三方库的方法,比如: this.$message等方法也不能使用了,这里也放到上面的工具js中.
/*** 升级vue2.7辅助函数*/
import { getCurrentInstance } from vue
/** this.$store替换方案 */
export function useStore() {const { proxy } getCurrentInstance()const store proxy.$storereturn store
}
/** this.$route替换方案 */
export function useRoute() {const { proxy } getCurrentInstance()const route proxy.$routereturn route
}
/** this.$router替换方案 */
export function useRouter() {const { proxy } getCurrentInstance()const router proxy.$routerreturn router
}
/** this.$message方法替换方案 */
export function useMessage() {const { proxy } getCurrentInstance()const message proxy.$messagereturn message
}
/** this.$modal替换方案 */
export function useModal() {const { proxy } getCurrentInstance()const modal proxy.$modalreturn modal
}深度选择器改写::v-deep、/deep/为:deep()
更新后如果有::v-deep、/deep/相关的报错或者警告需要改用:deep()
style scoped.a :deep(.b) { /* ... */ }
/styleeslint-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())。
