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>
    )
  }
})

cli

Brotli压缩

const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
 configureWebpack: {
    plugins: [
    new CompressionPlugin({
        filename: "[path].br[query]",
        algorithm: "brotliCompress",
        test: /\.(js|css|html|svg)$/,
        compressionOptions: { level: 11 },
        threshold: 10240,
        minRatio: 0.8,
        deleteOriginalAssets: true
      })
    ]
  }
}


// vite下配置   gzip与brotli可共存
import viteCompression from 'vite-plugin-compression'

/* gzip */
viteCompression({
  ext: '.gz'
}),
/* brotli */
viteCompression({
  ext: '.br',
  algorithm: 'brotliCompress'
})