# 开发遇到的一些场景的思考
# 1、关于组件拆分
个人认为组件拆分并不是越细越好，比如组件越多，编译时需要生成的组件实例就越多。 那么什么情况下需要拆分组件，个人认为有下面几种情况
- 复用，复用分为2种情况，复用视图和复用逻辑。复用视图好理解，前端很多基础组件都是视图的复用，不涉及任何逻辑。复用逻辑，如果不涉及DOM的变化，其实并不建议封装成一个完整的组件，可以封装一个函数即可，函数可以根据参数在不同的地方使用，而且一个函数根据业务可以再拆分，尽量一个函数只做一件事，通过函数的组合来实现业务。
- 拆分，独立。 就是我这个组件可能只在这一个地方用，但是里面的逻辑和业务可以独立出来，尽量只和父组件只进行一些参数上的通信，父组件只需要提供参数， 里面的任何业务逻辑都封装在这一个组件中，做到文件级别的业务逻辑拆分。
- 不要为了拆组件而拆，越细有时候可能也会越难维护。
# 2、Vue表单联动的思考
很多时候表单需要各种联动， 比如可见不可见，值域的变化，必填的变化等等， 举一个最简单的例子， 比如表单A有选项A1,A2,A3, 表单B有选项B1,B2,B3,如果选了A1，表单B只能选B1，依次类推， 这种情况如何去实现呢，我的建议是别用watch，尽量使用计算属性和change事件来操作，这样子比较容易溯源，代码也易读。
- 首先表单B的选项内容就需要利用计算属性
computed根据表单A的值来变化 - 在提交validate之前，验证表单B的值是否在表单B的选项列表中，如果没有就给一个默认值，比如给空就会在validate时被block。
- 有时候需要一些值的实时变化， 那就需要利用change事件或者input事件来操作，这时候可以不使用v-model。
- 初次赋值的change事件，有时候需要被block，此时我们可以定一个变量来防抖。
- 提交重置的逻辑最好针对每一个表单项， 抽离一个公共的函数，每次都走这个函数来实现，比如可以定一个 xxxFormItemVisible， xxxFormItemVisible这个值在提交时重置的时候也可以用。
- 联动的时候尤其需要注意联动模式，是实时联动还是操作结束联动。实时联动，比如我输一个值，另一个值跟着变。或者我变化某一个选项，另一个选项跟着变。尤其需要注意的是一定要注意是通过键鼠事件来联动，还是某些组件自带的change事件来联动。很多时候联动，最好是用键鼠事件，只有用户操作才需要联动。比如鼠标点击和键盘输入。
# 3、关于一个需求开发
- 梳理逻辑,提取公共逻辑，举个例子比如字典的转换，code到中文等都可以设计成单独的函数。
- 根据业务逻辑分步骤，比如先获取什么，再加入什么值，最后拼接成什么数据，尤其数据是根据默认值插入真实值生成树结构的这种。
- 单独的业务抽组件来独立业务，只需要关注参数传递。
- 通用的业务，抽组件来复用，提升效率。