使用vue3开发过一段时间了，开发过程中总结了些语法上的区别。下面不去考虑原理和源码，只在使用方式上列出两者的区别，有了这些，可以让开发者快速从vue2转换到vue3的开发中。（内容会持续更新~）

一、入口文件main.js

1、引入vue

  vue2.0写法

import Vue from 'vue'

  vue3.0写法 

import { createApp } from 'vue'
const app = createApp(App)

2、挂载vue实例

   vue2.0写法

new Vue({
...
}).$mount('#app')

  vue3.0写法 

app.mount('#app');

二、路由相关

 1、基本使用

    vue2.0写法

this.$route
this.$router

  vue3.0写法 

import { useRoute ,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()

2、路由模式（官方文档参考）

    vue2.0写法

import Router from 'vue-router'
var router = new Router({
  mode: 'history' // hash | history
})

  vue3.0写法 

import { createRouter, createWebHistory } from 'vue-router'
createRouter({
  history: createWebHistory(),
  routes: []
})

3、删除了*通配符路由（官方文档参考）

     vue2.0写法

{
  path: '*',
  redirect: '/404'
}

  vue3.0写法 

{
  path: '/:catchAll(.*)',
  redirect: '/404'
}

4、keep-alive与router-view的共用，官方文档参考

    vue2.0写法

<keep-alive>
    <router-view />
</keep-alive>

  vue3.0写法

<router-view v-slot="{ Component, route }">
    <keep-alive>
        <component :is="Component" />
    </keep-alive>
</router-view>

三、VueX相关

1、获取state 

   vue2.0写法

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['storeKey'])
}

  vue3.0写法

import { useStore } from 'vuex'
const store = useStore()
const storeKey = computed(() => store.state.storeKey)

四、事件处理

1、删除了$on、$off 和 $once 方法，可用实现了事件触发器接口的外部库代替，官方文档参考

  使用tiny-emitter库 

import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)
}

  使用 mitt 库 

import { mitt } from 'mitt'
const emitter = mitt()
emitter.on('fun',fun)
emitter.off('fun',fun)

2、虽然vue3保留了父子组件之间的 $emit 方法，但需要在子组件中定义需要emit的事件

export default {
  emits: ['funcName1','funcName2']
}

五、其他

1、去掉filter，推荐用方法调用或计算属性代替，官方文档参考

2、数据响应式 

  vue2.0写法

$set(key,value)

  vue3.0写法 

import { ref, reactive } from 'vue'
export default {
    setup() {
        const num = ref(0);
        const obj = reactive({
            name: 'nie'
        });
        return {
            num,
            obj
        }
    }
}

3、在插件中使用vue实例

   vue2.0写法，直接通过 import 引入 vue 实例

import Vue from 'vue'

  vue3.0写法 ，install中的 app 参数为 vue 实例

export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

4、v-html 指令，vue2中，添加了 v-html 指令的标签内部还可以输入其他内容（即使内容无效）；vue3中，添加了 v-html 指令的标签内部输入其他内容会报错。

5、nextTick

   vue2.0写法

this.$nextTick(() => {
    //... 
});

  vue3.0写法 

import { nextTick } from 'vue'
export default {
    setup() {
        nextTick(() => {
            //...
        })
        return {
            
        }
    }
}

6、watch的使用

    vue2.0写法

watch:{
    key(){
        //...
    }
}

  vue3.0写法，需要watch一个响应式对象，如果不是，可用函数的方式，如下

watch(()=>key,()=>{
    //...
})