选项式API
早在 Vue2 阶段，都是使用的选项式API的风格，之前学习的也是这样的风格。
在 xxx.vue 文件中，js部分内容大体结构如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
export default {
data() {
return {
count: 0
}
},
computed: {
double() {
return this.count * 2
}
},
methods: {
increment() {
this.count++
}
}
}
</script>
|
组件会被分为几大部分：data, methods, computed 等核心部分，每个部分约定了会什么样的操作（数据定义、计算逻辑、方法调用等）
这种方式有利有弊，好处在于结构清晰简单，但是问题在于逻辑相对分散，不利于组件复用
组合式API
React 一直以来都采用的是组合式API的风格，通过定义”函数”并返回JSX（TSX）的方式来定义组件，在JSX（TSX）中通过Hooks组合对应逻辑
Vue3 开始也引入了组合式API的风格，和React很像，我们直接通过代码来进行学习
需求背景
下面以封装一个 获取鼠标在屏幕的二维坐标位置 组件为例，展示 React 和 Vue3 中组合式API的实现风格
React
- useState定义状态
- 函数组件内部编写更新鼠标位置逻辑
- 组件首次渲染时绑定鼠标更新事件
- 暴露组件状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { useState, useEffect } from 'react'
export function useMouse() {
const [x, setX] = useState(0)
const [y, setY] = useState(0)
useEffect(() => {
const update = e => {
setX(e.pageX)
setY(e.pageY)
}
window.addEventListener('mousemove', update)
return () => window.removeEventListener('mousemove', update)
}, [])
return { x, y }
}
|
1
2
3
4
5
6
7
8
| import { useMouse } from './useMouse'
function MouseTracker() {
const { x, y } = useMouse()
return <p>Mouse at {x}, {y}</p>
}
|
Vue3
- 定义状态
- 函数组件中编写更新逻辑
- 组件首次渲染时绑定鼠标更新事件
- 暴露组件状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
return { x, y }
}
|
1
2
3
4
5
6
7
8
9
10
| <script setup>
import { useMouse } from './useMouse.js'
const { x, y } = useMouse()
</script>
<template>
<p>Mouse at {{ x }}, {{ y }}</p>
</template>
|
小结
通过上述代码逻辑我们可以发现：
- React和Vue3的组合式API风格为组件的封装和复用性提供了便利，是重点关注和学习的部分
- Vue2的选项式API实现较为简单，结构清晰但是缺乏复用性
- 选项式和组合式没有哪一种更好，对于初学者而言建议学习选项式，但是在实际开发生产用的更多的还是组合式API风格