[Bug Report] Vue2 中使用 SchemaField 会阻止页面更新

[arcturus011]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

由于 vue2 版本的 codesanbox 会报错，因此我建了一个 git 仓库

业务逻辑设计的思路为： 通过切换 name 为 template 的字段，页面会渲染 tmpl1 和 tmpl2 两个组件。

  <div>
    <Field
      title="模板"
      name="template"
      :required="true"
      :dataSource="templates"
      :component="[Select, { placeholder: '请输入' }]"
      :decorator="[FormItem, {}]"
    />
    <div v-if="form.values.template">
      <ObjectField :name="form.values.template">
        <component :is="form.values.template" />
      </ObjectField>
    </div>
  </div>

复现路径

先切换为 tmpl1 组件，此时能渲染出 tmpl1 组件的表单。

再切换成 tmpl2 的字段，会发现页面没有更新

What is expected?

页面能展示 tmpl2 组件的表单

What is actually happening?

页面没有响应

Package

@formily/[email protected]

---

如果去掉 SchemaField ，页面能正常更新，查看 form.fields 也正常

[MisicDemone]

用法问题，template变化的时候可能formGraph还未清除，建议联动整体采用formEffect来实现，否则需要加scheduler

https://codesandbox.io/s/tender-lucy-vmu9q7?file=/src/App.vue

[arcturus011]

用法问题，template变化的时候可能formGraph还未清除，建议联动整体采用formEffect来实现，否则需要加scheduler

https://codesandbox.io/s/tender-lucy-vmu9q7?file=/src/App.vue

建议联动整体采用formEffect来实现

请问具体是指下面这种方式吗？

createForm({
  effects(){
    onFieldValuesChange()
 }
})

[MisicDemone]

嗯，直接在effects里面，通过hook去变更field的component

[arcturus011]

@MisicDemone 我这边发现是在 ReactiveField.ts 中 createField 时，会触发父级 tracker 的依赖收集导致，下面 csb 可以简单复现。我提了一个 pr ，不知道思路对不对，欢迎斧正 #3065

https://codesandbox.io/s/jovial-waterfall-fkpt5p?file=/src/components/HelloWorld.vue

[arcturus011]

顺便提一个问题，我打算针对这个pr写测试用例，但是发现 vue-testing-library 更新 dom 好像有点问题，第二次更新会失效，不知道是不是我使用方法不对。

红框里面是我复制上面一样的修改和断言逻辑，只是value不同，但跑测试会失败