Vue3.0放弃Class API 采用Function-based API的优势是什么？
报价宝综合消息Vue3.0放弃Class API 采用Function-based API的优势是什么？
为什么撤销 Class API
1. 更好的 TS 支援○ Props 和其它需要注入到 this 的属性导致型别宣告依然存在问题
Decorators 提案的严重不稳定使得依赖它的方案具有重大风险 ● 除了型别支援以外 Class API 并不带来任何新的优势
○ 有更好的选择...
Function-based API
const App = {setup() {
// data
const count = value(0)
// computed
const plusOne = computed(() => count.value + 1)
// method
const increment = () => { count.value++ }
// watch
watch(() => count.value * 2, v => console.log(v))
// lifecycle
onMounted(() => console.log('mounted!'))
// 暴露给模版或渲染函式
return { count }
}
}
优势：
● 对比 Class API
○ 更好的 TypeScript 型别推导支援
○ 更灵活的逻辑复用能力
○ Tree-shaking 友好
○ 程式码更容易被压缩
逻辑复用案例：鼠标位置侦听
function useMousePosition() { const x = value(0) const y = value(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 } }
复用：
new Vue({ template: `
Mouse position: x {{ x }} / y {{ y }}
`, data() { const { x, y } = useMousePosition() return { x, y, // ... other data } } })
优势：
● ✅没有名称空间冲突
● ✅ 资料来源清晰
● ✅ 没有额外的元件效能消耗
