composition api

vue 2 中使用

全局中使用

1. 安装 @vue/composition-api
2. 采用 Vue.use 使用插件

库中使用

1. 声明为 peer-depency 即可

API 详述

reactive

注意使用 reactive 设定初始值

1. 避免直接使用初始对象,因为采用代理模式,对响应对象的修改会复制到初始对象上 对于浅层次对象直接使用对象扩展语法复制对象
2. 由于对象扩展对于深度引用的对象采用深拷贝在赋值解决,注意下次使用仍继续使用 深拷贝解决

框架层面建议初始赋值时使用 deepClone 解决对原始值修改的问题!

避免引用丢失,不要直接对整个 state 赋值,这样会导致响应式丢失

最佳实践

共享状态

将状态定义在外部,实现局部状态共享,示例参见 局部状态共享

代码结构

1. 视图层处理用户层面的业务逻辑和交互行为

   1. 消费视图层的数据模型，处理 UI 事件到视图模型数据转换

2. 业务层处理，输出视图层的消费数据，输入视图层原始数据转换后给业务层消费

   1. 处理数据模型和原始模型的转换
   2. 视图数据和服务数据的序列化和反序列化
   3. 封装业务逻辑向视图层提供消费接口
   4. 沉淀领域模型

3. 服务层

   1. api 等服务消费，拉取原始数据进行消费

设计重点视图层模型定义，需解决三个问题

1. 方便 UI 层面消费数据，数据模型尽可能表征 UI 结构
2. 降低服务数据消费的转换代价,原始数据和视图数据的序列化和反序列化的次数应该尽可能低
3. 统一视图层中组件之间的信息交互格式，降低组件数据流交互成本

典型的错误:

1. 将服务层数据多层透传，污染到组件层级，应该在业务层隔离服务层的负作用， 处理数据的序列化和反序列化
2. 视图中个组件的视图数据消费层次不统一

典型场景:

1. 任务卡片的渲染和设置
   1. 输入数据的多样模式导致结构
   2. 输出数据的多样导致视图问题

如何复位状态

参考 reset reactive