<el-dialog :title="form.id?'修改材料':'新增材料'" v-model="show" width="50%" :before-close="handleClose">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="材料名稱" prop="name">
        <el-input v-model="form.name" placeholder="請輸入"></el-input>
      </el-form-item>
       // .... 其它數據
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" type="primary" @click="show = false">確 定</el-button>
      </span>
    </template>
  </el-dialog>

 export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    dialogData: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['update:visible'],
  setup(props, context) {
    const state = reactive({
      show: false,
      form: {
        name: '',
        // ...
      }
    })
 
   // ...

    watch(() => props.dialogData, val => {
      state.form = { ...val }
      console.log(state.form) // 此處打印顯示 form有值 但是無法回顯
    }, { deep: true })
    
    // ...
   
    return {
      ...toRefs(state),
    }
  },
})

     nextTick(()=>{
       state.form = { ...val }
       console.log(state.form) // 打印結果沒有問題，還是無法回顯
     })

 // 將響應式對象轉換為普通對象，其中結果對象的每個 property 都是指向原始對象相應 property 的ref。
 // 以前只是圖方便使用toRefs,將聲明的屬性轉化成類似于vue2的方式。
 
 const state = reactive({
   foo: 1,
   bar: 2
 })

 const stateAsRefs = toRefs(state)
 /*
 Type of stateAsRefs:

 {
   foo: Ref<number>,
   bar: Ref<number>
 }
*/

// ref 和 原始property “鏈接”
 state.foo++
 console.log(stateAsRefs.foo.value) // 2

 stateAsRefs.foo.value++
 console.log(state.foo) // 3
 

export default defineComponent({
 props: {
   visible: {
     type: Boolean,
     default: false,
   },
   dialogData: {
     type: Object,
     default: () => { }
   }
 },
 emits: ['update:visible'],
 setup(props, context) {
   const state = reactive({
     show: false,
     form: {
       name: '',
       // ...
     }
   })

  // ...

   watch(() => props.dialogData, val => {
     state.form = { ...val }
     console.log(state.form) // 此處打印顯示 form有值 但是無法回顯
   }, { deep: true })
   
   // ...
  
   return {
     ...toRefs(state), // 相當于顯示的聲明了 const form = ref()
   // 由于el-form聲明了ref="form",導致state中聲明的form被覆蓋，修改ref="form1"，問題解決
   }
 },
})