一些概念
Vue Composition API（VCA） 在实现上也其实只是把 Vue 本身就有的响应式系统更显式地暴露出来而已。
这不是函数式，只是 API 暴露为函数。
3.0 Template 编译出来的性能会比手写 jsx 快好几倍。
——尤雨溪
Vue2 传统的 data，computed，watch，methods 写法，我们称之为「选项式api（Options API ）」
Vue3 使用 Composition API （VCA）可以根据逻辑功能来组织代码，一个功能相关的 api 会放在一起。
Vue 和 React 的逻辑复用手段
到目前为止，
Vue：Mixins（混入）、HOC（高阶组件）、作用域插槽、Vue Composition API（VCA/组合式API）。
React：Mixins、HOC、Render Props、Hook。
我们可以看到都是一段越来越好的成长史，这里就不再举例赘述，本文重心在 VCA，VCA 更偏向于「组合」的概念。
5个维度来讲 Vue3
1. 框架
一个例子先来了解 VCA
在 Vue 中，有了抽象封装组件的概念，解决了在页面上模块越多，越显臃肿的问题。但即使进行组件封装，在应用越来越大的时候，会发现页面的逻辑功能点越来越多，
data/computed/watch/methods中会被不断塞入逻辑功能，所以要将逻辑再进行抽离组合、复用，这就是 VCA。
举个简单的例子：
我们要实现 3 个逻辑
根据 id 获取表格的数据
可对表格数据进行搜索过滤
弹框新增数据到表格中
Vue2 options api 的处理
为了阅读质量，省略了部分代码，但不影响我们了解 VCA
// 逻辑功能（1） const getTableDataApi = id => { const mockData = { 1: [ { id: 11, name: '张三1' }, { id: 12, name: '李四1' }, { id: 13, name: '王五1' } ], 2: [ { id: 21, name: '张三2' }, { id: 22, name: '李四2' }, { id: 23, name: '王五2' } ] }; return new Promise(resolve => { setTimeout(() => { resolve(mockData[id] || []); }, 1000); }); }; export default { name: 'VCADemo', components: { Modal }, data() { return { // 逻辑功能（1） id: 1, table: [], // 逻辑功能（2） search: '', // 逻辑功能（3） modalShow: false, form: { id: '', name: '' } }; }, computed: { // 逻辑功能（2） getTableDataBySearch() { return this.table.filter(item => item.name.indexOf(this.search) !== -1); } }, watch: { // 逻辑功能（1） id: 'getTableData' }, mounted() { // 逻辑功能（1） this.getTableData(); }, methods: { // 逻辑功能（1） async getTableData() { const res = await getTableDataApi(this.id); this.table = res; }, // 逻辑功能（3） handleAdd() { this.modalShow = true; }, // 逻辑功能（3） handlePost() { const { id, name } = this.form; this.table.push({ id, name }); this.modalShow = false; } } }; 复制代码这里只是举例简单的逻辑。如果项目复杂了，逻辑增多了。涉及到一个逻辑的改动，我们就可能需要修改分布在不同位置的相同功能点，提升了维护成本。
作者：前端精
链接：https://juejin.cn/post/6910009240053055496
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。