VUE3学习

Vue 3 核心概念

1. Composition API（组合式 API）

Vue 3 最重要的特性。

基础示例（参考 src/views/h5/Login.vue）

<template>
  <div class="frame">
    <div class="login">
      <h2>H5端登录</h2>
      <van-divider />
      <!-- 条件渲染 -->
      <LoginPwd v-if="loginType==0"></LoginPwd>
      <LoginSms v-if="loginType==1"></LoginSms>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

// 响应式数据
const loginType = ref<number>(0)
</script>

核心 API 说明

ref() - 创建响应式引用

import { ref } from 'vue'

const count = ref(0)        // 基本类型
const user = ref({ name: '' }) // 对象类型

// 访问值需要使用 .value
count.value = 1
console.log(count.value)

reactive() - 创建响应式对象

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

// 直接访问，不需要 .value
state.count = 1

computed() - 计算属性

import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

watch() - 监听器

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count changed: ${oldVal} -> ${newVal}`)
})

生命周期钩子

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件已卸载')
})

2. 组件通信

Props（父传子）

<!-- 父组件 -->
<ChildComponent :message="parentMessage" />

<!-- 子组件 -->
<script setup lang="ts">
interface Props {
  message: string
}

const props = defineProps<Props>()
</script>

Emits（子传父）

<!-- 子组件 -->
<script setup lang="ts">
const emit = defineEmits<{
  (e: 'update', value: string): void
}>()

const handleClick = () => {
  emit('update', 'new value')
}
</script>
<!-- 父组件 -->
<ChildComponent @update="handleUpdate" />

Provide/Inject（跨层级通信）

// 祖先组件
import { provide } from 'vue'
provide('theme', 'dark')

// 后代组件
import { inject } from 'vue'
const theme = inject('theme', 'light') // 第二个参数是默认值

3. 模板语法

插值表达式

<template>
  <div>{{ message }}</div>
  <div v-text="message"></div>
</template>

指令

<!-- v-if / v-show -->
<div v-if="isVisible">条件渲染</div>
<div v-show="isVisible">显示/隐藏</div>
<!-- v-for -->
<li v-for="(item, index) in list" :key="item.id">
  {{ item.name }}
</li>
<!-- v-bind (简写 :) -->
<img :src="imageSrc" />
<div :class="{ active: isActive }"></div>
<!-- v-on (简写 @) -->
<button @click="handleClick">点击</button>
<input @input="handleInput" />

<!-- v-model 双向绑定 -->
<input v-model="message" />

TypeScript 基础

1. 类型定义

基本类型

let name: string = 'Vue'
let age: number = 3
let isActive: boolean = true
let list: number[] = [1, 2, 3]
let user: { name: string; age: number } = { name: 'Vue', age: 3 }

接口（Interface）

参考 src/interface/index.ts：

export interface ILoginUserInfo {
  id: string
  username: string
  email?: string  // 可选属性
  phone?: string
}

export interface IToken {
  accessToken: string
  refreshToken?: string
}

类型别名（Type）

type Status = 'pending' | 'success' | 'error'
type Callback = (data: string) => void

2. 泛型

function identity<T>(arg: T): T {
  return arg
}

interface ApiResponse<T> {
  code: number
  data: T
  message: string
}

3. 在 Vue 组件中使用 TypeScript

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

// 定义接口
interface User {
  name: string
  age: number
}

// 响应式数据
const user = ref<User>({
  name: '',
  age: 0
})

// 函数类型
const handleSubmit = (): void => {
  console.log('提交')
}
</script>