前端技术分享
0%

Vue 3 Composition API 深入

发表于 分类于

Composition API 是什么？

Vue 3 的 Composition API 是一种新的组织组件逻辑的方式。它用函数式编程风格，让代码更易复用和维护。与 Options API 相比，更灵活。

基本用法

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
<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
</script>

响应式数据

ref 和 reactive

  • ref：基本类型
  • reactive：对象类型
1
2
3
4
5
6
7
import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({
  name: '小明',
  age: 25
})

计算属性

1
2
3
4
5
6
7
8
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value
})

监听器

1
2
3
4
5
6
7
import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变成 ${newVal}`)
})

生命周期钩子

1
2
3
4
5
6
7
8
9
10
11
12
13
import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载')
    })
    
    onUnmounted(() => {
      console.log('组件卸载')
    })
  }
}

组合函数 (Composables)

复用逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)

  const update = (e) => {
    x.value = e.pageX
    y.value = e.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

在组件中使用：

1
2
3
4
5
6
7
8
9
import { useMouse } from './useMouse'

export default {
  setup() {
    const { x, y } = useMouse()
    
    return { x, y }
  }
}

与 Options API 的比较

  • Composition API：逻辑集中，易复用
  • Options API：简单直观，适合小组件

迁移指南

Vue 3 支持两种 API，可以逐步迁移。

总结

Composition API 让 Vue 更强大。多练习 composables，体会函数式编程的魅力。