如何在vue2升级体验vue3的新功能

Vue2.7正式发布，代号Naruto,动漫影响世界~~

在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。具体有那些功能可以关注下文档：时光机

升级步骤简要记录如下:

{
  "name": "vue27app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.7.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.18",
    "@vue/cli-plugin-eslint": "~4.5.18",
    "@vue/cli-service": "~4.5.18",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^9.0.0"
  }
}

1.vuecli升级到了4.5.18

2.vue2.7.4最新版本

3.删除了vue-template-compiler，vue2.7.4里面不需要这个

4.@vue/cli-xxx升级到~4.5.18

当我们script lang=“ts” setup，vuecli脚手架搭建的项目运行起来后可能会出现eslint校验报错，

import { ref } from 'vue'
const count = ref(12)

可能会报count未被使用的错误，主要是eslint的问题，官网也给我们说明了

5.删除现有的低版本eslint,安装最新版的9以上

最后我们就能在vue2里面使用vue3的最新功能了！

<template>
  <div>
    <div>我是vue2.7中的组件</div>
    <h2 ref="box">{{ count }}</h2>
    <button @click="add">add</button><button @click="minus">minus</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, watch } from 'vue'
const count = ref(12)
const box = ref()
function add() {
  count.value++
}
function minus() {
  count.value--
}

onMounted(() => {
  console.log('onMounted -- 我要挂载了')
})

watch(count, () => {
  console.log(box.value.innerHTML, 'watch')
  nextTick(() => {
    console.log(box.value.innerHTML, 'nextTick---watch')
  })
})

nextTick(() => {
  console.log(box.value.innerHTML, 'nextTick')
})
</script>
<style lang="less" scoped></style>

写在最后:
vue3用习惯了，会觉得vue2比较多冗余，看各自的习惯吧~~