vue雙向綁定不起作用神坑

轉自：https://www.jianshu.com/p/6164d384dce5

神坑描述：

前端vue在做雙向綁定時，如果采用的是 二級屬性綁定 ，並且在聲明時 僅聲明了一級屬性，那么在這種情況下，如果 首次賦值 不是通過頁面交互錄入，而是 通過程序賦值 ，並且賦值時采用直接給二級屬性單獨賦值 ，就會產生雙向綁定失效的情況；

解決辦法：

// 此方式首次賦值（頁面剛打開或刷新后首次賦值） 有問題
this.people.name = "XX";

// 規避方法一（可能覆蓋掉一些需要初始化的數據）
this.people = {name: "XX"};
XX
// 規避方法二，推薦（無副作用）
this.$set(this.people, 'name', 'XX')

// 規避方法三（無副作用）XX
let oldEntity = JSON.parse(JSON.stringify(this.people));
Object.assign(oldEntity, newPeople);
this.people = oldEntity;