今天在項(xiàng)目中遇到了從后端獲取到的數(shù)據(jù)，然后在input中沒(méi)辦法修改，修改的值不進(jìn)行回顯。經(jīng)排查是vue2中運(yùn)用的是Object.defineProperty ，由于這個(gè)特性導(dǎo)致的。
如果是換成VUE3框架就不會(huì)出現(xiàn)這種問(wèn)題
在前端我們?cè)赿ata中定義數(shù)據(jù)會(huì)經(jīng)常定義一個(gè)空對(duì)象，將一個(gè)業(yè)務(wù)中的數(shù)據(jù)放在里面進(jìn)行區(qū)分

比如一個(gè)一個(gè)食物表單
會(huì)定義一個(gè)
foodForm{}這樣的形式 ，前端綁定就用v-mode=this.foodForm.name這樣的形式

后端返回的屬性特別多
你最后賦值的就用到了
this.foodForm.name = data.obj的形式直接賦值了

那么就出現(xiàn)了這個(gè)原理性的問(wèn)題 vue綁定不到.

解決方法:
1foodForm初始化里面的屬性
2 使用this.$set(this.editForm, name , data.obj)
因?yàn)閟et會(huì)會(huì)遞歸地將對(duì)象的屬性轉(zhuǎn)換為 Getter/Setter，從而在數(shù)據(jù)變化時(shí)觸發(fā)依賴(lài)更新（視圖更新）

原理
vue2是基于Object.defineProperty
Vue2 在初始化響應(yīng)式數(shù)據(jù)時(shí)，只會(huì)對(duì) data 中初始存在的屬性進(jìn)行響應(yīng)式處理。
如果添加一個(gè)新屬性（如 this.editForm.serial = 'xxx'），Vue 2 無(wú)法檢測(cè)到，也不會(huì)觸發(fā)視圖更新
vue3是基于Proxy
代理整個(gè)對(duì)象，可以監(jiān)聽(tīng)所有屬性的讀寫(xiě)，包括動(dòng)態(tài)添加的