vue3学习笔记——vue2.0如何升级到vue3.0

首先，是否需要升级到vue3.0取决于当前项目特点及vue发展趋势：

除此之外，vue2.0有哪些写法是vue3.0不兼容的呢？

在 Vue 2 中，我们使用 new Vue() 来新建应用，有一些全局的配置我们会直接挂在 Vue 上，比如我们通过 Vue.use 来使用插件，通过 Vue.component 来注册全局组件

//注册了一个 el-counter 组件，这个组件是全局可用的，它直接渲染一个按钮，并且在点击按钮的时候，按钮内的数字会累加
//然后我们需要注册路由插件，这也是 Vue 2 中我们使用 vue-router 的方式。这种形式虽然很直接，但是由于全局的 Vue 只有一个，所以当我们在一个页面的多个应用中独立使用 Vue 就会非常困难
Vue.component('el-counter', {
  data(){
    return {count: 1}
  },
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
let VueRouter = require('vue-router')
Vue.use(VueRouter)

//在 Vue 上先注册了一个组件 el-counter，然后创建了两个 Vue 的实例。这两个实例都自动都拥有了 el-couter 这个组件，但这样做很容易造成混淆。
Vue.component('el-counter',...)
new Vue({el:'#app1'})
new Vue({el:'#app2'})

Vue 3 引入一个新的 API ，createApp，来解决这个问题，也就是新增了 App 的概念。全局的组件、插件都独立地注册在这个 App 内部，很好的解决了上面提到的两个实例容易造成混淆的问题。

const { createApp } = Vue
const app = createApp({})
app.component(...)
app.use(...)
app.mount('#app1')
const app2 = createApp({})
app2.mount('#app2')

createApp 还移除了很多我们常见的写法，比如在 createApp 中，就不再支持 filter、$on、$off、$set、$delete 等 API。

升级 Vue 3 的过程中，除了 Vue 3 本身的语法变化，生态也要注意选择。

Vue-cli4 已经提供内置选项，你当然可以选择它支持的 Vue 2。如果你对 Vite 不放心的话，Vue-cli4 也全面支持 Vue 3，这还是很贴心的。

vue-router 是复杂项目必不可少的路由库，它也包含一些写法上的变化，比如从 new Router 变成 createRouter；使用方式上，也全面拥抱 Composition API 风格，提供了 useRouter 和 useRoute 等方法。

Vuex 4.0 也支持 Vue 3，不过变化不大。有趣的是 Vue 官方成员还发布了一个 Pinia，Pania 的 API 非常接近 Vuex5 的设计，并且对 Composition API 特别友好，更优雅一些。

其他生态诸如 Nuxt、组件库 Ant-design-vue、Element 等等，都有 Vue 3 的版本发布。

对于复杂项目，我们需要借助几个自动化工具来帮我们过渡。

在 Vue 3 的项目里，有一个 @vue/compat 的库，这是一个 Vue 3 的构建版本，提供了兼容 Vue 2 的行为。

"dependencies": {
- "vue": "^2.6.12",
+ "vue": "^3.2.19",
+ "@vue/compat": "^3.2.19"
 ...
},
"devDependencies": {
- "vue-template-compiler": "^2.6.12"
+ "@vue/compiler-sfc": "^3.2.19"
}

// vue.config.jsmodule.exports = {
 chainWebpack: config => {
 config.resolve.alias.set('vue', '@vue/compat')
 ...... 
}}

社区就有能够做自动化替换的工具，比较好用的就是“阿里妈妈”出品的 gogocode。

自动化替换工具的原理很简单，和 Vue 的 Compiler 优化的原理是一样的，也就是利用编译原理做代码替换。