Vue2 project upgraded to VUE3 tread pit

In recent TS learning, I took this opportunity to reconstruct the previous background template with VUe3 + TS, and made some simple records for the problems encountered in the upgrade process

Vue2 version project source code: github.com/BaiFangZi/v…

Vue3 + TS version project source: github.com/BaiFangZi/v…

Project preview address: Baifangzi.giee. IO/vue-antd-MA…

Route wildcard *

• vue2

  {
      path: The '*'.name: 'NotFound'.redirect: '/404NotFound',}Copy the code

• vue3

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

Routing and vuex

• vue2

  this.$router.push()
  this.$route.path
  this.$store.commit()
  Copy the code

• vue3

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

The routing cache

• vue2

  <keep-alive>
      <router-view> </router-view>
  </keep-live>
  Copy the code

• Vue3 uses dynamic components and slots

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

Echart is mounted globally

• Vue3 provides a global API globalProperties\

  / / a mount
  app.config.globalProperties.$echarts = Echarts
  / / use
  const { ctx } = getCurrentInstance()
  chart = ctx.$echarts.init(chartDom)
  
  Copy the code

Automatic guide package

• Vite in VUe3 does not support require. Use import.meta instead

  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
  }
  Copy the code

watch

• Vue2 can listen to multiple properties in a watch

• A watch in VUe3 listens for a property

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

More usage may refer to: www.cnblogs.com/baifangzi/p…

emit

• Vue3 only preserves emit and removes the $on API

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

Custom instruction

Vue3 changed the life cycle of custom instructions