vue数据驱动和过程驱动如何选择

59 阅读1分钟

业务场景:

1、在表单中,当用户选择品牌后要更新品类列表,带出品牌下对应的品类。 2、这种表单项联动还可扩展为清空其他表单项或设置默认值等。 3、在选择某个表单项后,隐藏或显示其他表单项

实现方案:

1、(暂定)使用过程驱动,把 v-model 拆分成:value@input,在用户操作某个表单项时触发相关的行为

  • 优点:
    • 在表单项事件中能够查看修改之后触发的所有行为,逻辑清晰利于后期维护
  • 缺点:
    • 在初始化表单数据后,需要额外触发联动方法来实现联动数据的改变

2、(暂定)使用数据驱动,通过计算属性控制显隐

  • 优点:
    • 当表单数据改变时,相关计算属性自动获取新值,减少过程驱动中的行为,避免遗漏

3、使用数据驱动,通过 watch 表单数据,触发表单联动行为

  • 缺点:
    • 用户动作触发的行为和联动逻辑割裂在两个函数中,在后期维护时难以理解
    • 由于 watch 在数据改变后就会被触发,导致需要加各种触发条件到联动逻辑中。
      • 比如:在获取表单数据后就不希望触发设置默认值的联动逻辑