淺析Vue3使用reactive/toRefs+v-model導致響應式失效el-form表單無法輸入的問題

一、問題背景

　　vue3使用el-form的時候，如下代碼，會導致輸入框無法輸入，無法賦值，選擇框無法選擇

<el-form ref="service" :model="service" label-width="80px">
    <el-form-item label="名稱">
      <el-input v-model="service.name"></el-input>
    </el-form-item> ...... </el-form> setup() { 　　const state = reactive({ 　　　　service: { 　　　　　　name: '**' 　　　　} 　　}) 　　return { 　　　　...toRefs(state) 　　} }

　　ref 組件實例與 ref() 聲明響應式變量名重復就會導致響應式失效這樣的問題，form的任何表單內容均無法輸入，且會報錯：Uncaught (in promise) TypeError: Cannot read property 'name' of undefined 等之類的問題

二、問題原因及解決

　　由於 ref 命名和 model 一樣導致出現了這樣的問題。原因就是 el-form 聲明了ref="service"，導致 state 中聲明的 service 被覆蓋，2者沖突了。

　　修改名字（如ref="serviceForm" 或者 model="serviceInfo"）即可解決問題。