Vue3.0+Vuerouter+vuex+bus升级体验

总结：vue3.0已经出来挺长时间了，一直也没时间总结，后来网上查了一下，其实大部分资料都是关于2.0的，也可能由于是公测版，也有可能是由于版本限制，毕竟vue3.0的生态目前还是不太完整，很多框架其实都没有做适配。

使用体验：最直接的体验就是速度确实快了，真的是嗖嗖嗖的感觉啊…

区别：

1、首先：vue3.0去除了vue对象，通过createApp引入，并实例化一个app对象。挂载方式也有所改变，通过mount方式进行挂载。
import { createApp } from ‘vue’
import router from ‘./router’

const app = createApp(App);
app.use(Router);
app.mount('#app')

2、去除了Vue.prototype属性，替换为app.config.globalProperties.

例如：挂载全局方式可以通过app.config.globalProperties.xxxx即可挂载到全局对象上，然后通过this.xxx即可访问。

vueRouter篇
去除了new Router()的方式，改成createRouter的方式

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
	{
       path:'/',
        redirect: "/Login"
    },
    {
        path: '/Login',
        name: 'Login',
        meta: { 
            title: "登录" ,
            keepAlive: false,//需要缓存
        },
        component: ()=>import('@/views/Login.vue')
    }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

vuex篇，同样通过createStore方式引入并导出

import { createStore } from 'vuex'

export default createStore({
  state: {
    loginstate:false
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

main.js中通过app.use()引入

bus篇：vue3.0内部删除了 $on、$off 和 $once 方法等方法，因此如果要使用eventBus需借助第三方插件，例如mitt，等

1、安装
import Bus from './bus';
2、使用
import mitt from 'mitt';
const Bus = mitt();

export default Bus;

app.use(Bus);