总结vue3 的一些知识点

pnpm add @vitejs/plugin-vue-jsx
vite.config.ts 中引用插件
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    })
  ],
})

import { defineComponent, ref } from "vue"
import "./App.scss"
const App = defineComponent({
  setup() {
    const count = ref(0)
    const onClick = () => {
      count.value++
    }
    return () => (
      <>
        <div class='page'>
          {count.value}
        </div>
        <button onClick={onClick}>增加</button>
      </>
    )
  },
})
export default App

/* example.module.css */
.red {
  color: red;
}

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

// routes.ts
export const routes: RouteRecordRaw[] = [
  { path: "/", redirect: "/welcome" },
  {
    path: "/welcome",
    component: Welcome,
    children: [
      { path: "", redirect: "/welcome/one" },
      // components 可以用对象的方式
      { path: "one", components: { main: First, footer: FirstActions } },
      { path: "two", components: { main: Second, footer: SecondActions } },
      { path: "three", components: { main: Third, footer: ThirdActions } },
      { path: "four", components: { main: Forth, footer: ForthActions } },
    ],
  }
]

// 视图使用
import { defineComponent, h, Transition, VNode } from 'vue';
import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router';
import s from './Welcome.module.scss'
export const Welcome = defineComponent({
  setup: (props, context) => {
    return () => <div class={s.wrapper}>
      <header>
        <h1>xx记账</h1>
      </header>
      <main class={s.main}>
        // 使用对应的 name
        <RouterView name="main">
        </RouterView>
      </main>
      <footer>
        <RouterView name="footer" />
      </footer>
    </div>
  }
})

import { computed, onMounted, onUnmounted, ref, Ref } from "vue"
type Point = { x: number; y: number }
export const useSwipe = (element: Ref<HTMLElement | null>) => {
  const start = ref<Point | null>(null)
  const end = ref<Point | null>(null)
  const swiping = ref(false)
  // 可以设置距离多少再移动
  const distance = computed(() => {
    if (!end.value || !start.value) return null
    return {
      x: end.value?.x - start.value?.x,
      y: end.value?.y - start.value?.y,
    }
  })
  const direction = computed(() => {
    if (!swiping) return null
    if (!distance.value) return null
    const { x, y } = distance.value
    if (Math.abs(x) > Math.abs(y)) {
      return x > 0 ? "right" : "left"
    } else {
      return y > 0 ? "down" : "up"
    }
  })
  const onStart = (e: TouchEvent) => {
    const { clientX, clientY } = e.touches[0]
    start.value = {
      x: clientX,
      y: clientY,
    }
    end.value = null
    swiping.value = true
  }
  const onMove = (e: TouchEvent) => {
    const { clientX, clientY } = e.touches[0]
    if (swiping.value) {
      end.value = {
        x: clientX,
        y: clientY,
      }
    }
  }
  const onEnd = (e: TouchEvent) => {
    swiping.value = false
    start.value = null
    end.value = null
  }
  onMounted(() => {
    if (!element.value) return null
    element.value.addEventListener("touchstart", onStart)
    element.value.addEventListener("touchmove", onMove)
    element.value.addEventListener("touchend", onEnd)
  })
  onUnmounted(() => {
    if (!element.value) return null
    element.value.removeEventListener("touchstart", onStart)
    element.value.removeEventListener("touchmove", onMove)
    element.value.removeEventListener("touchend", onEnd)
  })
  return {
    swiping,
    distance,
    direction,
  }
}

// slots 使用
import { defineComponent } from "vue"
import s from "./button.module.scss"
interface ButtonProps {
  onClick: (e: MouseEvent) => void
}
export const Button = defineComponent<ButtonProps>({
  inheritAttrs: false, // 不让 vue 帮我自动继承属性
  // 插槽 context.slots
  setup: (props, context) => {
    return () => <button class={s.button}>{context.slots.default?.()}</button>
  },
})
// 具名插槽
import { defineComponent, PropType } from "vue"
import s from "NavBar.module.scss"
export const NavBar = defineComponent({
  setup: (props, context) => {
    const { slots } = context
    return () => (
      <div class={s.navbar}>
        <span class={s.icon_wrapper}>{slots.icon?.()}</span>
        <span class={s.title_wrapper}>{slots.default?.()}</span>
      </div>
    )
  },
})

import { defineComponent, PropType } from "vue"
import s from "./Icon.module.scss"
export type IconNames = "add" | "chart" | "clock" | "cloud"
export const Icon = defineComponent({
  // inheritAttrs: false,
  props: {
    name: {
      type: String as PropType<IconNames>,
      required: true,
    }
  },
  setup: (props) => {
    const { name } = props
    return () => (
      <svg class={s.icon}>
        <use xlinkHref={"#" + name}></use>
      </svg>
    )
  },
})

// 创建响应式数据
const formData = reactive({
  name: '',
  sign: ''
})
const onSubmit = (e: Event) => {
  e.preventDefault()
  console.log("proxy", formData) // proxy
  console.log("proxy", toRaw(formData)) // json
}
// v-model 使用
<input v-model={formData.name} class={[s.formItem, s.input, s.error]}></input>