fix(vue): fix useFormEffects not reactive when form change (#3371)

packages/vue/src/__tests__/field.spec.ts

@@ -1,6 +1,6 @@
 import Vue, { FunctionalComponentOptions } from 'vue'
 import { render, fireEvent, waitFor } from '@testing-library/vue'
-import { defineComponent, h } from '@vue/composition-api'
+import { defineComponent, h, ref } from '@vue/composition-api'
 import {
   createForm,
   Field as FieldType,
@@ -311,6 +311,51 @@ test('useFormEffects', async () => {
   })
 })
 
+test('useFormEffects: should be reregister when formRef change', async () => {
+  const CustomField = defineComponent({
+    setup() {
+      const reactiveText = ref()
+      useFormEffects(() => {
+        onFieldChange('aa', ['value'], (target) => {
+          if (isVoidField(target)) return
+          reactiveText.value = target.value
+        })
+      })
+      return () =>
+        h('div', { attrs: { 'data-testid': 'custom-value' } }, [
+          reactiveText.value,
+        ])
+    },
+  })
+
+  const { queryByTestId } = render({
+    setup() {
+      const formRef = ref(createForm())
+      return {
+        formRef,
+        Input,
+        CustomField,
+        changeForm() {
+          // form change
+          formRef.value = createForm()
+          formRef.value.setValues({ aa: 'text' })
+        },
+      }
+    },
+    template: `<FormProvider :form="formRef">
+      <Field name="aa" :decorator="[Decorator]" :component="[Input]" />
+      <VoidField name="bb" :component="[CustomField]" />
+      <button data-testid="btn" @click="changeForm()">Change</button>
+    </FormProvider>`,
+  })
+
+  expect(queryByTestId('custom-value').textContent).toEqual('')
+  queryByTestId('btn').click()
+  await waitFor(() => {
+    expect(queryByTestId('custom-value').textContent).toEqual('text')
+  })
+})
+
 test('connect', async () => {
   const CustomField = connect(
     {

packages/vue/src/hooks/useFormEffects.ts

@@ -1,15 +1,19 @@
-import { onBeforeUnmount } from 'vue-demi'
+import { onBeforeUnmount, watchEffect } from 'vue-demi'
 import { Form } from '@formily/core'
 import { uid } from '@formily/shared'
 import { useForm } from './useForm'
 
 export const useFormEffects = (effects?: (form: Form) => void): void => {
   const formRef = useForm()
 
-  const id = uid()
-  formRef.value.addEffects(id, effects)
+  const stop = watchEffect((onCleanup) => {
+    const id = uid()
+    formRef.value.addEffects(id, effects)
 
-  onBeforeUnmount(() => {
-    formRef.value.removeEffects(id)
+    onCleanup(() => {
+      formRef.value.removeEffects(id)
+    })
   })
+
+  onBeforeUnmount(() => stop())
 }