表单

大部分 UI 组件库都包含表单（Form/Field），用于多选项的表单验证等等。由于表单的状态复杂，往往这些组件自身就有一定的状态管理能力，而大部分情况下我们不需要用 vanex 将其全部接管（这样做很麻烦），只需要能够通信即可，这样也会有更好的性能（而不是总是做不必要的同步）。

我们可以用 @vanex 注解提供的 autorun 功能将 model 的改动通过 Form 组件提供的 setValues（大多都提供）功能将状态适时同步到 Form 中，以及在提交的时候将 Form 的状态传递给 Model 即可。

与表单交互

import { vanex } from 'vanex';
// @vanex 注解第二个参数列表可以是要注册为 AutoRun 的方法，他们会自动收集依赖
// 当 AutoRun 方法的依赖（demo 中的 this.demoModel.form）发生改变时就会被调用
@vanex('demoModel')('autoSyncForm')
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.field = new Field(this);
  }

  autoSyncForm() {
      // 因为访问了 demoModel.form 所以会被自动收集为依赖
    if (this.demoModel.form) {
      this.field.setValues(this.demoModel.form);
    }
  }
  // ... more
}

然后我们在另外一个组件中（或者 Model 本身中）只需要改变 demoModel.form 的值就会自动同步到 Form 表单中。

详细的例子见：