使用TypeScript装饰器优化Vue 3组件开发-IJ笔记

TypeScript装饰器在Vue 3中的强大应用

随着Vue 3和TypeScript的普及，装饰器（Decorators）成为了提升开发体验的重要工具。装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问器、属性或参数上，为代码添加额外的功能。

1. 安装必要的依赖

首先，我们需要安装Vue 3和相关的TypeScript装饰器库：

npm install vue@next
npm install vue-class-component@next
npm install vue-property-decorator
npm install -D typescript @vue/tsconfig

2. 基础装饰器使用

让我们创建一个使用装饰器的Vue组件：

import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator'
import { ref, computed } from 'vue'

@Component
export default class UserProfile extends Vue {
  // 使用@Prop装饰器定义props
  @Prop({ type: String, required: true })
  readonly username!: string
  
  @Prop({ type: Number, default: 0 })
  readonly initialScore!: number
  
  // 使用ref的响应式数据
  private score = ref(this.initialScore)
  private isLoading = ref(false)
  
  // 计算属性
  get scoreLevel() {
    if (this.score.value >= 90) return '优秀'
    if (this.score.value >= 70) return '良好'
    return '待提高'
  }
  
  // 方法
  async increaseScore(amount: number) {
    this.isLoading.value = true
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 500))
      this.score.value += amount
      this.onScoreChanged(this.score.value)
    } finally {
      this.isLoading.value = false
    }
  }
  
  // 使用@Emit装饰器触发事件
  @Emit('score-change')
  onScoreChanged(newScore: number) {
    return newScore
  }
  
  // 使用@Watch装饰器监听变化
  @Watch('score.value')
  onScoreChange(newVal: number, oldVal: number) {
    console.log(`分数从 ${oldVal} 变为 ${newVal}`)
  }
  
  // 生命周期钩子
  mounted() {
    console.log('组件已挂载')
  }
  
  // 模板中的使用
  render() {
    return (
      
        用户: {this.username}
        当前分数: {this.score.value}
        等级: {this.scoreLevel}
        
      
    )
  }
}

3. 自定义装饰器

我们还可以创建自己的装饰器来封装通用逻辑：

// 日志装饰器
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value
  
  descriptor.value = function(...args: any[]) {
    console.log(`调用方法: ${propertyKey}`)
    console.log('参数:', args)
    const result = originalMethod.apply(this, args)
    console.log('返回值:', result)
    return result
  }
  
  return descriptor
}

// 防抖装饰器
function Debounce(delay: number) {
  return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value
    let timeoutId: NodeJS.Timeout | null = null
    
    descriptor.value = function(...args: any[]) {
      if (timeoutId) {
        clearTimeout(timeoutId)
      }
      
      timeoutId = setTimeout(() => {
        originalMethod.apply(this, args)
        timeoutId = null
      }, delay)
    }
    
    return descriptor
  }
}

// 在组件中使用自定义装饰器
@Component
export default class SearchComponent extends Vue {
  private searchQuery = ref('')
  
  @Debounce(300)
  @Log
  async performSearch() {
    if (!this.searchQuery.value.trim()) return
    
    // 搜索逻辑
    console.log(`搜索: ${this.searchQuery.value}`)
  }
}

4. 组合式API与装饰器的结合

Vue 3的组合式API也可以与装饰器很好地结合：

import { defineComponent, ref, computed } from 'vue'
import { Vue, Component } from 'vue-property-decorator'

// 自定义组合函数
function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  const isEven = computed(() => count.value % 2 === 0)
  
  return {
    count,
    increment,
    decrement,
    reset,
    isEven
  }
}

@Component
export default class CounterComponent extends Vue {
  // 使用组合函数
  private counter = useCounter(0)
  
  // 添加额外的业务逻辑
  private history: number[] = []
  
  @Watch('counter.count.value')
  onCountChange(newVal: number) {
    this.history.push(newVal)
    if (this.history.length > 10) {
      this.history.shift()
    }
  }
  
  get historyString() {
    return this.history.join(' → ')
  }
}