余温Gueen 余温Gueen
余温Gueen
余温Gueen
-- : -- : --
-- : -- : --
余温Gueen 前端 Vue3 Composition API 响应式 前端框架
476 字
3 分钟

为什么使用组合式 API？

Vue 3 引入的组合式 API (Composition API) 提供了更灵活的代码组织方式。

传统选项式 API 的局限

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

export default {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

组合式 API 的优势

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const message = ref('Hello')

    const increment = () => {
      count.value++
    }

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

    return {
      count,
      message,
      increment,
      doubleCount
    }
  }
}

核心概念

ref 和 reactive

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { ref, reactive } from 'vue'

// ref - 用于基本类型
const count = ref(0)
count.value++ // 需要 .value 访问

// reactive - 用于对象
const state = reactive({
  count: 0,
  message: 'Hello'
})
state.count++ // 直接访问

computed 计算属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { ref, computed } from 'vue'

const firstName = ref('Zhang')
const lastName = ref('San')

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

watch 侦听器

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { ref, watch } from 'vue'

const count = ref(0)

// 侦听单个数据源
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})

// 侦听多个数据源
watch([count, message], ([newCount, newMessage], [oldCount, oldMessage]) => {
  console.log('Multiple values changed')
})

生命周期钩子

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { onMounted, onUpdated, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted')
    })

    onUpdated(() => {
      console.log('Component updated')
    })

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}

组合函数 (Composables)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue

  return {
    count,
    increment,
    decrement,
    reset
  }
}

// 使用
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment, decrement, reset } = useCounter(10)

    return {
      count,
      increment,
      decrement,
      reset
    }
  }
}

最佳实践

  1. 逻辑复用 - 将可复用逻辑提取为组合函数
  2. TypeScript 支持 - 充分利用类型推导
  3. 性能优化 - 合理使用 ref 和 reactive
  4. 代码组织 - 按功能而非选项组织代码

总结

组合式 API 为 Vue 3 带来了更强大的逻辑复用和代码组织能力，是构建大型应用的理想选择。

📡
👤 作者: 余温Gueen
🔗 链接: https://xxdevops.cn/frontend/hgjfp/
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章