Vue2.7之Naruto正式发布，升级你还在等什么？vue2.7升级指南，vue2.7新特性，vue Composti

官方的前言

尽管Vue 3现在是默认版本，我们理解仍然有许多用户由于依赖兼容性，浏览器支持要求，或根本没有足够的带宽来升级，必须留在Vue 2。在Vue 2.7中，我们从Vue 3中移植了一些最重要的功能，这样Vue 2的用户也可以从这些功能中受益。

2.7版本新增特性

composition API
<script setup> 语法糖
CSS中使用v-bind绑定动态属性
h()、useSlot()、useAttrs()、useCssModules()的API新增，其中set()、del()、nextTick() 在 ESM 构建中也暴露出来（直接import使用）
新增defineComponent(),与Vue.extend相比其加强了类型推导
支持eimits，但仅用于类型推导
在template模板中支持使用ESNext语法，如esnext里链式语法也是支持(变量?.a?.b)

与vue3的差异

Composition API 使用 Vue2 的基于 getter/setter 的响应式系统进行反向移植，以确保浏览器兼容性。这意味着与 Vue3 的基于 proxy 的系统存在一些重要的行为差异。
readonly() 确实创建了一个单独的对象，但它不会跟踪新添加的属性并且不适用于数组；
避免在 reactive() 中使用数组作为 root 值，因为如果没有属性访问，则不会跟踪数组的变化（这将导致警告）；
Reactivity APIs 忽略带有 symbol 键的属性。

未移植功能

createApp()（Vue2 没有独立的应用范围）
<script setup> 中的顶层 await（Vue2 不支持异步组件初始化）
模板表达式中的 TypeScript 语法（与 Vue2 解析器不兼容）
Reactivity transform（仍处于试验阶段）
options 组件不支持 expose 选项（但

升级指南

首先需要将vue-cli版本升级（对于V4版本的需要升级到4.5.18, v5版本的需要升级到5.0.6）
升级vue到2.7.2版本，同时把vue-template-compiler项目依赖移除掉
检查package.json中vue-loader是否为15.0.0版本以上，vue-demi版本0.13.1
如果在使用<script setup>时eslint报错有变量未使用的，将eslint-plugin-vue升级到9.0.0以上即可
最后将node_modules删除掉，重新安装项目依赖即可

Devtools的支持

对于vue2.7使用devtools需要将tools升级到6.2.0版本后才可以支持查看setup的状态，但由于现在谷歌插件市场还没上传，可能还在审核，所以需要自行到github上把devtools源码克隆下来进行编译加载！

Devtools 手动构建加载方法

先到Devtools仓库地址github.com/vuejs/devto… 将项目克隆到本地并且使用yarn安装项目依赖
使用yarn bulid进行项目打包
打包完成后在谷歌浏览器打开扩展程序

找到项目中/packages/shell-chrome选中即可把插件加载进来了

升级中踩过的坑或者说问题

由于eslint-plugin-vue升级到9.0.0+的版本了所以有部分规则被移除或者废弃了

"vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],

这个规则在6.2.2版本上是没问题的，但是升级到9.0.0+后allowFirstLine被移除了，有一个专门新的规则处理这一块，具体规则配置可以参考官网文档

vue/name-property-casing该规则也被废弃了并且由vue/component-definition-name-casing替代，规则用法参考官方文档

"vue/component-definition-name-casing": ["error", "PascalCase"],

升级到vue2.7后在构建时候出现::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.这是由于vue2.7和vue3把::v-deep的用法废弃掉了，所以需要将::v-deep写法更改成:deep()

// 原写法
::v-deep{
    .backup-form {
      .el-form-item{
        margin-bottom: 0px;
      }
    }
 }
 // 新写法
  .backup-form{
    :deep(.el-form-item){
      margin-bottom: 0px;
    }
  }

体验vue2.7

<template>
  <div>
    {{ count }}
    <el-button @click="addHandler">add</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const addHandler = () => {
  count.value = ++count.value
}
</script>
<script>
export default {
  name: 'Test'
}
</script>

运行效果

最后

点赞+收藏+关注谢谢

QQ图片20220706150826.gif

Vue2.7之Naruto正式发布，升级你还在等什么？