Vue 2.7 Naruto火影忍者版发布

云之舞
200 阅读5分钟

2022年7月1日，Vue 2.7 Naruto火影忍者版发布，尤雨溪本人比较喜欢日本动漫，2.7版便以日本动漫的名称命名。

尽管Vue 3 现在已经是默认的版本了，但是或许是因为依赖的兼容性问题或者对老版本浏览器支持的需要，还是有很多团队不得不使用Vue 2。Vue团队将Vue 3 一些最为重要的特性反向移植到了Vue 2。如果你用的是Vue 2，不妨做一个小版本小升级。 不过Vue 2.7 版是Vue 2 系列的最后一个版本了，这次发布之后，Vue 2 进入了长期的技术支持阶段，Vue开发团队将从2022年7月1号开始将持续支持Vue 2.7 长达18个月之久，Vue 2 系列不会再添加新的特性，仅仅做bug修复。这样的话Vue 2 系列到2023年底之后将不再维护。Vue团队相信这个时间跨度足够各个开发团队移植到Vue 3 了。不过如果有的开发团队在2023年底以前实在是不能完成移植，而且有安全相关的问题要解决，那么可以在Vue团队那儿登记一下，他们会考虑做延长的商业支持，这个是登记的网址：airtable.com/shrj37Zf4ZI…

从Vue 3移植到Vue 2的特性

  • Composition API
  • SFC* <script setup> *
  • SFC CSS v-bind

另外，还支持了以下API：

  • defineComponent 改进了类型interface
  • h()，useSlot()，useAttrs()，useCssModules()
  • set()，del()和nextTick都可以直接从Vue以ES Module的形式导出
  • 组件的emits选项仍然支持，但是仅仅是用来做类型检查

2.7 模版中的表达式现在可以通过build工具中loader进行处理了，这样在其他Javascript中可以使用的新语法也可以用于 2.7 模版的表达式，例如用build工具中用Babel转译了js文件，那 2.7 模版中的表达式也会被转译。也就是说 2.7 模版中的表达式可以支持最新的未正式发布的ECMAScript的语法了（ESNext）。

API的提供方式说明

  • ESM模块方式 API采用命名式导出方式，所谓命名式导出： 
    import Vue, {ref} from 'vue';
console.log(ref); // 正常打印
console.log(Vue.ref); // undefined
    可以看到ESM模块导出的ref可以访问，而Vue对象下并没有ref属性
  • UMD和CJS（commonjs）的方式 这些API都是作为Vue全局对象下的属性来提供
  • 当和Vue 2.7 的CJS版本打包时，需要处理ESM的互操作问题，CJS和ESM的互操作问题咱们在另一篇文章中讲解

和Vue 3 不同的地方

为了确保较好的浏览器兼容性，Vue 2.7 的响应式系统依然使用getter/setter实现，没有使用proxy，而Vue 3 的响应式系统是用proxy实现的，这就带来了一些不同：

  • Vue 2 中一些响应式系统无法侦测变动从而无法响应的问题依然存在。例如没有在data中提前声明而直接添加到Vue实例对象上的属性无法自动具有响应式功能
  • reactive(), ref(), shallowReactive()这些方法都是直接转换原始对象，而不是创建proxy，因此： 
    reactive(foo) === foo
    由于没有通过proxy实现，所以转换前和转换后都是一个对象
  • readonly()确实会创建一个新的对象，但是无法阻止添加新属性，也无法阻止修改新属性，且对数组不生效
  • 避免对数组调用reactive()，因为数组的修改无法被追踪
  • 响应式API会忽略掉symbol作为键值的属性

以下这些功能特性没有被移植：

  • createApp() 没有被移植
  • <script setup>中使用顶层await 没有被移植
  • 模版表达式使用Typescript语法 没有被移植
  • 响应式转化（最新的功能） 没有被移植
  • expose选项 没有被移植，但是defineExpose是支持的

升级向导

  • 更新@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，不过在@vue/test-utils的新版中很有可能就不再需要了

  • 检查一下包管理器的lockfile，确保以下这些依赖都满足版本要求： vue-loader:^15.10.0 vue-demi: ^0.13.1

  • 如果你先前使用了@vue/composition-api，一些从它导出的api可以改成从vue导出了。不过 2.7 对某些API不支持，例如createApp

  • 更新eslint-plugin-vue到最新版本，否则当你使用<script setup>时，你可能会遇到“未使用的变量”的错误提示

  • 2.7 的SFC单文件组件使用PostCSS8。所以如果你之前使用了一些只针对PostCSS7的定制插件，需要升级成兼容PostCSS8

Vite

@vitejs/plugin-vue2这个新插件提供给vite来支持vue 2.7。这个新的插件取代了vite-plugin-vue2

需要注意的是新的插件并不能处理JSX/TSX，这个是有意为之的。专门处理JSX/TSX的插件很快就会提供

Volar兼容

Volar和Vetur都是vscode针对Vue的插件，Vetur支持Vue 2，Volar支持Vue 3 也支持Vue 2。 2.7增强了类型定义这一块，不再需要仅仅为了Volar而安装@vue/runtime-dom，唯一要做的只是在tsconfig.json进行一下修改：

{
  "vueCompilerOptions": {
    "target": 2.7
  }
}

Devtools支持

Vue Devtools 6.2.0已经添加了对 2.7 composition API state的支持，但是还需要经过发布平台（chrome等）的review。

就是这些了。 本文内容来自于Vue官方的blog

avatar
文章
阅读
粉丝