vue3开发拾亿

vue

生命周期

v-deep

::v-deep(.bar) {}

key

插槽

• vue2

<!-- 父组件中使用 -->
<template slot="content" slot-scope="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template>

• vue3

<!-- 父组件中使用 -->
<template v-slot:content="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template>

<!-- 也可以简写成： -->
<template #content="{data}">
    <div v-for="item in data">{{item}}</div>
</template>

vue-router

路由通配符

• vue2

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

• vue3

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

路由缓存

• vue2

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"> </router-view>

• vue3

<router-view v-slot="{ Component }">
    <keep-alive>
        <component :is="Component"  v-if="route.meta.keepAlive"/>
    </keep-alive>
     <component :is="Component"  v-if="!route.meta.keepAlive"/>
</router-view>

• tsx

import { defineComponent, Transition, Component as DynamicComponent, resolveDynamicComponent,KeepAlive } from 'vue'
import { RouterView } from 'vue-router'

const resolveComponent = (_Component: DynamicComponent) => (_Component ? resolveDynamicComponent(_Component) : undefined)
export default defineComponent({
  name: 'App',
  setup() {
    return () => (
      <RouterView>
      {({ Component }: { Component: DynamicComponent }) => 
      <KeepAlive>{resolveComponent(Component)}</KeepAlive>}
      </RouterView>
    )
  }
})