目录
- Vue2的局限性
- Vue2 - 跨组件重用代码的解决方法（不好用）
- 代码重用方法PK
- 如何使用CompositionAPI解决问题
- 代码层面区别：比如数据监听方式的实现
- ......
一、Vue2的局限性
- 组件逻辑膨胀导致的可读性变差
- 无法跨组件重用代码
- Vue2对TS的支持有限
在传统的OptionsAPI中我们需要将逻辑分散到以下六个部分
OptionsAPI
- components
- props
- data
- computed
- methods
- lifecycle methods
这样会是我们编辑一个逻辑不得不在代码中反复横跳
二、Vue2 - 跨组件重用代码的解决方法（不好用）
- 混入mixin（有问题）
- 作用域插槽slot (缺点多)
- 高阶组件（太复杂）
三、代码重用方法PK
Vue2中的跨组件重用代码，我们大概会有四个选择。
3.1） Mixin - 混入
代码混入其实就是设计模式中的混合模式，缺点也非常明显。
可以理解为多重继承，简单的说就是一个人如何有两个父亲
❌无法避免属性名冲突 - 长鼻子随谁
❌继承关系不清晰
3.2) Mixin Factory - 混入工厂
✅代码重用方便
✅继承关系清洗
3.3) ScopeSlots - 作用域插槽
- ❌可读性不高
- ❌配置复杂 - 需要再模板中进行配置
- ❌性能低 - 每个插槽相当于一个实例
3.4) CompositionApi - 复合API
- ✅代码量少
- ✅没有引入新的语法，只是单纯函数
- ✅异常灵活
- ✅工具语法提示友好 - 因为是单纯函数所以 很容易实现语法提示、自动补偿
四、如何使用 Composition API解决问题
最佳的解决方法是将逻辑聚合就可以很好的代码可读性。
这就是我们的CompositionAPI语法能够实现的功能。CompositionAPI是一个完全可选的语法与原来的OptionAPI并没有冲突之处。他可以让我们将相同功能的代码组织在一起，而不需要散落到optionsAPI的各个角落。
五、 LifecycleHooks - 生命周期钩子
| Vue2 | Vue3 |
|---|---|
| beforeCreate | ❌setup(替代) |
| created | ❌setup(替代) |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
| 🎉onRenderTracked | |
| 🎉onRenderTriggered |
六、 代码层面区别：比如数据监听方式的实现
参考
关注更多Vue2 VS Vue3 请查看下方链接
总结
- Vue2到3 代码分散 -> 代码聚合
- 跨组件重用代码通过Composition
