为什么撤销 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 } } }) 

优势：

● ?没有命名空间冲突

● ? 数据来源清晰

● ? 没有额外的组件性能消耗