vue2项目升级至vue3踩坑

最近学习TS中，借这个机会用vue3+ts重构了之前的后台模板，对于升级过程中遇到的问题做一些简单的记录

vue2版项目源码：github.com/BaiFangZi/v…

vue3+ts版项目源码：github.com/BaiFangZi/v…

项目预览地址：baifangzi.gitee.io/vue-antd-ma…

路由通配符*

• vue2

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

• vue3

    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      redirect: '/404NotFound',
    },
  

路由与vuex

• vue2

  this.$router.push()
  this.$route.path
  this.$store.commit()
  

• vue3

  setup(){
      const store =useStore()
      const router =useRouter()
      const route =useRoute()
      router.push()
      route.path
      store.commit()
      
  }
  

路由缓存

• vue2

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

• vue3使用了动态组件和插槽

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

Echart全局挂载

• vue3提供一个全局api globalProperties\

  //挂载
  app.config.globalProperties.$echarts = Echarts
  //使用
  const { ctx } = getCurrentInstance()
  chart = ctx.$echarts.init(chartDom)
  
  

自动导包

• vue3中vite不支持require，通过import.meta来替换

  const directives: DirectiveType = {}
  
  const modules = import.meta.globEager('./modules/*.ts')
  // modules.
  for (let key in modules) {
    const moduleName = key.replace(/\.\/modules\/(.+)\.ts/, '$1')
    directives[moduleName] = modules[key].default
  }
  

watch

• vue2中一个watch里面可以监听多个属性

• vue3中一个watch监听一个属性

  const state =reactive({
      count:0
  })
  watch(
      ()=>state.count,
      ()=>{
          .....
      },
      {
          immediate: true,
          deep:true
      }
  )
  

更多用法可参考：www.cnblogs.com/baifangzi/p…

emit

• vue3中只保留了emit，去除了$on等api

  export default defineComponent({
      emits:['search'],
      setup(_,{emit}){
          const handleSearch = () => {
              if (!state.searchValue.trim()) return false
              emit('search', state.searchValue)
          }
      }
  })
  

自定义指令

vue3中更改了自定义指令的生命周期