具有由函数提供的输入的 Vue 组件与反应性答案

【问题标题】：Vue component with input provided by a function vs reactivity具有由函数提供的输入的 Vue 组件与反应性
【发布时间】：2020-09-11 04:25:37
【问题描述】：

我知道反应性在 VueJs 中很重要。但是，我倾向于使用 OOP 进行前端开发，因此数据通常由函数提供。这自然是非反应性的，可以通过使用 this.$forceUpdate 来克服。

问题是 - 这是一个根本上糟糕的概念吗？还是刚刚好？有没有更好的办法？可能可以使用观察者，但我觉得这会使代码更复杂。

例子：

<template>
   <multiselect
      :value="myclass.getValue('param1)" />
      @input="val => valueUpdated(val)"
</template>

然后在方法中：

valueUpdated(newVal)
{
    this.myClass.setValue(newVal);
    this.$forceUpdate();
}

注意，myClass 有异步数据，所以到第一次渲染时，它还没有被数据填充。 MyClass 作为 props 进入组件，它是一个 TypeScript 类。这个解决方案很好用，但是有更好（正确）的方法吗？

【问题讨论】：

【解决方案1】：

执行/强制视图手动更新是一个根本错误的概念。视图应该在您的数据更改时更新 - 它应该自动更新。这就是 reactivity 给你的。这就像从一辆手动档和 49 档的汽车变成一辆自动换档的汽车。

整个想法是您以声明方式定义视图的行为 - 它如何依赖于数据模型。 命令式构建视图更加乏味且容易出错，而且肯定不太优雅。

OOP 可能在非可视库中运行良好 - 但对于 UI 组合组件，使用 props 和事件效果更好。

【讨论】：

感谢您的意见。我觉得这不是最好的方法，但我很难想出更好的解决方案。我不希望组件很重。所有的业务逻辑都在 TS 类之外。
好吧，如果业务逻辑与 UI 完全解耦，那么您可以依赖函数式编程 - 当您需要应用业务规则时，您只需调用接受旧数据模型的转换函数作为输入并返回新的数据模型作为输出。如果需要，您可以在新旧数据模型之间创建一个diff，并决定相应更新 UI 的哪些部分。