微网站套餐互联网营销师培训课程免费

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比较多冗余，看各自的习惯吧~~