测试文章 11 - Vue 3 组合式 API 深入理解

1
<script setup>
2
import { ref, computed, watch } from 'vue'
3

4
// 响应式状态
5
const count = ref(0)
6
const doubleCount = computed(() => count.value * 2)
7

8
// 方法
9
function increment() {
10
  count.value++
11
}
12

13
// 生命周期
14
watch(count, (newVal) => {
15
  console.log('Count changed:', newVal)
16
})
17
</script>

1
// useMouse.js
2
import { ref, onMounted, onUnmounted } from 'vue'
3

4
export function useMouse() {
5
  const x = ref(0)
6
  const y = ref(0)
7

8
  function update(event) {
9
    x.value = event.pageX
10
    y.value = event.pageY
11
  }
12

13
  onMounted(() => window.addEventListener('mousemove', update))
14
  onUnmounted(() => window.removeEventListener('mousemove', update))
15

16
  return { x, y }
17
}

1
import { ref, reactive } from 'vue'
2

3
// ref - 适用于基本类型
4
const count = ref(0)
5
console.log(count.value) // 0
6

7
// reactive - 适用于对象
8
const state = reactive({
9
  name: 'Vue',
10
  version: 3
11
})
12
console.log(state.name) // Vue

1
<!-- 父组件 -->
2
<script setup>
3
import { provide } from 'vue'
4

5
provide('user', {
6
  name: 'John',
7
  age: 30
8
})
9
</script>
10

11
<!-- 子组件 -->
12
<script setup>
13
import { inject } from 'vue'
14

15
const user = inject('user')
16
</script>