Vue中響應式數據失效&Dom操做無效問題

響應式數據失效問題

• 緣由分析：響應式數據被「遺失」

在vue中響應式數據是在初始化時定義在data中，這會使數據變成響應式毫無疑問。
正是這種自信致使當數據發生異常，沒有按照預期響應時，咱們可能會一臉懵逼，各類找緣由。
對於這種問題迴歸問題本質（其實其它不少問題也是如此），既然數據未按預期響應，確定是數據自己出了差錯：

1. 數據在其它多個地方響應了變化，致使不是「當前」預期值
2. 已經脫離響應式

• 實戰分析：響應式數據被「遺失」

假設在data上存在formModel = { name: '', age: '', addr: '' } 經過v-model綁定在表單中。
隨後咱們去後臺拉取數據填充formModel, 可能會這樣操做【 this.formModel = response.data 】,咋一看沒什麼問題，
除非response.data中有全部formModel中的字段，不然缺失的字段就會失去響應，
好比 response.data = { name : '', age: ''}，此時formModel中的addr就失去響應。

這種問題既簡單又難於發現！

個人解決辦法： 繼承 Object.assign()

eg: this.formModel = Object.assign(this.formModel, response.data)

Dom操做異常

vue採用虛擬Dom技術來渲染響應頁面，所以dom刷新是個異步動做。
咱們在開發中難免會有操做dom，爲了保證dom操做可以給正確被處理，須要等待dom正在掛載後再進行操做，
即：把相關操做放入nextTick
this.$nextTick(() = > {

// dom operation ...
    
    // dom crud
    
    // dom event
    
 })