vue

The life cycle


v-deep

::v-deep(.bar) {}

Copy the code

key


slot

  • vue2
<! -- used in parent component -->

<template slot="content" slot-scope="scoped">

   <div v-for="item in scoped.data">{{item}}</div>

</template>

Copy the code
  • vue3
<! -- used in parent component -->

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

Copy the code

vue-router

Route wildcard

  • vue2
{

    path: The '*'.

    name: 'NotFound'.

    redirect: '/404NotFound'.

}

Copy the code
  • vue3
{

  path: '/:pathMatch(.*)*'.

  name: 'NotFound'.

  redirect: '/404NotFound'.

}

Copy the code

The routing cache

  • vue2
<keep-alive>

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

</keep-alive>

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

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

Copy the code
  • 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 (a)= > (

      <RouterView>

      {({ Component }: { Component: DynamicComponent }) => 

      <KeepAlive>{resolveComponent(Component)}</KeepAlive>}

      </RouterView>

    )

  }

})

Copy the code

cli

Brotli compression

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}}})]// Gzip and brotli can coexist in vite
import viteCompression from 'vite-plugin-compression'

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