温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue 2.7的功能有哪些

发布时间:2022-07-04 13:47:31 来源:亿速云 阅读:538 作者:iii 栏目:开发技术

这篇“Vue 2.7的功能有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue 2.7的功能有哪些”文章吧。

    向后移植的功能

    此外,还支持以下 API:

    • defineComponent():具有改进的类型推断(与Vue.extend相比);

    • h()useSlot()useAttrs()useCssModules()

    • set()del()nextTick() 在 ESM 构建中也作为命名导出提供。

    Vue 2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins。这意味着如果为.js文件配置了 Babel,它也将应用于 SFC 模板中的表达式。

    注意事项

    • 在 ESM 构建中,这些 API 作为命名导出提供(仅限于命名导出):

    import Vue, { ref } from 'vue'
    Vue.ref // undefined, 改用命名导出
    • 在 UMD 和 CJS 构建中,这些 API 作为全局 Vue 对象上的属性暴露。

    与 Vue 3 的行为差异

    Composition API 使用 Vue 2 的基于 getter/setter 的响应式系统进行反向移植,以确保浏览器兼容性。 这意味着与 Vue 3 的基于 proxy 的系统存在一些重要的行为差异:

    • 所有 Vue 2 更改检测警告仍然适用;

    • reactive()ref()shallowReactive() 将直接转换原始对象而不是创建代理:

    // 在2.7中可行,在3.x中不可行
    reactive(foo) === foo
    • readonly() 确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组;

    • 避免在 reactive() 中使用数组作为 root 值,因为如果没有属性访问,则不会跟踪数组的变化(这将导致警告);

    • Reactivity APIs 忽略带有 symbol 键的属性。

    此外,以下功能是未移植的:

    • createApp()(Vue 2 没有独立的应用范围)

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

    • ❌ 模板表达式中的 TypeScript 语法(与 Vue 2 解析器不兼容)

    • ❌ Reactivity transform(仍处于试验阶段)

    • options 组件不支持 expose 选项(但 <script setup> 支持 defineExpose())。

    升级指南

    Vue CLI / webpack

    (1)将本地 @vue/cli-xxx 依赖项升级到主要版本范围内的最新版本(如果适用):

    • 对于 v4:~4.5.18

    • 对于 v5:~5.0.6

    (2)将 Vue 升级到 ^2.7.0。 还可以从依赖项中删除 vue-template-compiler,因为在 2.7 中不再需要它。注意:如果正在使用 @vue/test-utils,可能需要暂时将它保留在依赖项中,但是这个要求也将在新版本的 Test Utils 中被取消。

    (3)检查包管理器 lock 文件以确保以下依赖项满足版本要求。 它们可能是 package.json 中未列出的传递依赖项:

    • vue-loader: ^15.10.0

    • vue-demi: ^0.13.1

    如果没有,需要删除 node_moduleslock 文件并重新安装,以确保它们升级到最新版本。

    (4)如果之前使用过 @vue/composition-api,请将其导入更新为 vue。 注意,插件导出的一些 API,例如 createApp,未在 2.7 中移植。

    (5)如果在使用 <script setup> 时遇到未使用的变量的 lint 错误,请将 eslint-plugin-vue 更新到最新版本 (9+)。

    (6)Vue 2.7 的 SFC 编译器现在使用 PostCSS 8。 PostCSS 8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS 7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS 8 兼容的版本。

    Vite

    Vue2.7 对 Vite 的支持是通过一个新插件提供的:@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本并取代现有的 vite-plugin-vue2。

    注意,新插件不处理特定于 Vue 的 JSX / TSX transform,这是有意的。 Vue 2 JSX / TSXtransform应该在一个单独的专用插件中处理,该插件将很快提供。

    Volar 兼容性

    Vue 2.7 提供了改进的类型定义,因此不再需要安装 @vue/runtime-dom 来支持 Volar 模板类型推断。 现在只需要在 tsconfig.json 中进行以下配置:

    {
      // ...
      "vueCompilerOptions": {
        "target": 2.7
      }
    }

    Devtools 支持

    Vue Devtools 6.2.0 增加了对检查 2.7 Composition API 状态的支持,但扩展可能仍需要几天时间在各个发布平台上通过审核。

    2.7 版本的影响

    Vue 2.7 是 Vue 2.x 的最终次要版本。 在这个版本之后,Vue 2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。这意味着 Vue 2 将在 2023 年底结束其生命周期。这应该为大多数生态系统迁移到 Vue 3 提供充足的时间。

    额外细节

    在准备此版本时,Vue 团队将 Vue 2 代码库从 Flow 移植到了 TypeScript,这是基于核心团队成员 @pikax 的努力。 这样更容易重用 Vue 3 中的代码,并为移植的 API 自动生成类型定义。 除此之外,还将单元测试从 Karma + Jasmine 移至 Vitest,从而大大提高了维护 DX 和 CI 的稳定性。

    以上就是关于“Vue 2.7的功能有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI