Yang

Appearance

Vue3 笔记 官网 ​

自定组件不高亮问题 pnpm 严格模式导致配置文件.npmrc 解决方法

好用的内置库 ​

ts
import { cloneVNode, withKeys, withModifiers } from 'vue'
import { camelize, hyphenate } from '@vue/shared' // 驼峰命名法 驼峰命名转短横线分隔
import { cloneVNode, withKeys, withModifiers } from 'vue'
import { camelize, hyphenate } from '@vue/shared' // 驼峰命名法 驼峰命名转短横线分隔

策略模式动态导入组件 ​

解决 <script setup> 导入组件无法动态引入组件问题

vue
<script setup lang="ts">
const components = import.meta.glob(
  ['~/components/*.vue'],
  { eager: true, import: 'default' }
)
const fileNames = Object.keys(components)
  .map(c => c.match(/[\w-]+(?=\.vue)/)![0])

function getComponent(fileName: string) {
  return fileNames[`../components/${fileName}.vue`]
}
</script>

<template>
  <component :is="getComponent('demo')" />
</template>
<script setup lang="ts">
const components = import.meta.glob(
  ['~/components/*.vue'],
  { eager: true, import: 'default' }
)
const fileNames = Object.keys(components)
  .map(c => c.match(/[\w-]+(?=\.vue)/)![0])

function getComponent(fileName: string) {
  return fileNames[`../components/${fileName}.vue`]
}
</script>

<template>
  <component :is="getComponent('demo')" />
</template>

区分开发环境和正式环境 ​

vite 环境区分 详情

ts
export const isDev = import.meta.env.DEV // 开发环境
export const isPro = import.meta.env.PROD // 生产环境
export const isStaging = import.meta.env.MODE === 'staging' // 预发布环境
export const isDev = import.meta.env.DEV // 开发环境
export const isPro = import.meta.env.PROD // 生产环境
export const isStaging = import.meta.env.MODE === 'staging' // 预发布环境

事件方法 ​

vue
<script setup lang="ts">
import { withKeys, withModifiers } from 'vue'
const onEvent = withKeys(
  withModifiers(
    (e) => {
      // console.log(e)
    },
    ['stop', 'prevent', 'alt']
  ),
  ['d']
)
</script>
<script setup lang="ts">
import { withKeys, withModifiers } from 'vue'
const onEvent = withKeys(
  withModifiers(
    (e) => {
      // console.log(e)
    },
    ['stop', 'prevent', 'alt']
  ),
  ['d']
)
</script>

withModifiers 参数 ​

ts
const modifierGuards: Record<
  string,
  (e: Event, modifiers: string[]) => void | boolean
> = {
  stop: e => e.stopPropagation(),
  prevent: e => e.preventDefault(),
  self: e => e.target !== e.currentTarget,
  ctrl: e => !(e as KeyedEvent).ctrlKey,
  shift: e => !(e as KeyedEvent).shiftKey,
  alt: e => !(e as KeyedEvent).altKey,
  meta: e => !(e as KeyedEvent).metaKey,
  left: e => 'button' in e && (e as MouseEvent).button !== 0,
  middle: e => 'button' in e && (e as MouseEvent).button !== 1,
  right: e => 'button' in e && (e as MouseEvent).button !== 2,
  exact: (e, modifiers) =>
    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
}
const modifierGuards: Record<
  string,
  (e: Event, modifiers: string[]) => void | boolean
> = {
  stop: e => e.stopPropagation(),
  prevent: e => e.preventDefault(),
  self: e => e.target !== e.currentTarget,
  ctrl: e => !(e as KeyedEvent).ctrlKey,
  shift: e => !(e as KeyedEvent).shiftKey,
  alt: e => !(e as KeyedEvent).altKey,
  meta: e => !(e as KeyedEvent).metaKey,
  left: e => 'button' in e && (e as MouseEvent).button !== 0,
  middle: e => 'button' in e && (e as MouseEvent).button !== 1,
  right: e => 'button' in e && (e as MouseEvent).button !== 2,
  exact: (e, modifiers) =>
    systemModifiers.some(m => (e as any)[`${m}Key`] && !modifiers.includes(m))
}

生命周期钩子 ​

注册一个回调函数，在组件挂载完成后执行。

vue
<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // 组件已挂载.
})
</script>
<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // 组件已挂载.
})
</script>

生命周期图示 ​

下面是实例生命周期的图表。你不需要完全理解当前正在进行的所有事情，但随着你学习和构建更多内容，它将是一个有用的参考。 An image

onErrorCaptured在捕获了后代组件传递的错误时调用。

onRenderTracked当响应式依赖被组件的渲染作用追踪后调用。

onRenderTriggered当响应式依赖触发了组件渲染作用的运行之后调用。

onActivated若组件实例是 KeepAlive 缓存树的一部分，当组件被插入到 DOM 中时调用。