【Vue2.x 隨筆】如何初始化/清空所有data響應式數據 + 單獨清空data響應式中的指定部分

后台管理項目中，在頁面切換時（不同場景共用一個展示界面）不同數據需要共用一個input框等，就會出現因取消或者保存結束后，切換到其他場景時還會出現上一個頁面輸入（綁定）的數據（因為響應式數據data里沒有清除）

解決辦法：如果涉及到data中的響應式數據只有一個，可以一個一個手動賦值為空來初始化。但是如果項目中有100個響應式數據呢？所以手動一個個賦值為空顯然是不現實的。

 底部有2022.3.6更新

 

 

 

需要掌握的知識點

1.Object.assign(目標對象target，源對象sources)，對象合並方法，如果兩個對象含有相同的鍵值，則源對象的值會覆蓋目標對象的值。

　　聯想知識點：淺拷貝  Object.assign( {},  obj )

2. this.$options.data()  這個是vue原始的數據，就是你頁面剛加載時的data, 理論上應該都是空的

    this.$data   這個是現在階段的vue數據，就是你操作的響應式data的數據

 

 

 

實現初始化/清空所有data響應式數據的方法

  this.$data  目標對象    this.$options.data()    源對象    ，相同的鍵值時，源對象的值（空）會覆蓋目標對象的值（之前操作過響應式數值），達到了將所有vue響應式data的數據初始化/清空的效果

      // 需要清除數據,注意這種寫法
      // Object.assign()  ES6中新增的方法可以合並對象
      // 組件實例的this.$data，可以操作data當中響應式數據
      // this.$options可以獲取配置對象，配置對象的data函數執行，返回的響應式數據為空的
      Object.assign(this.$data, this.$options.data())

 

 

 

2022.3.6更新

注意點！：Object.assign(this.$data, this.$options.data())  這個方法並不完美，響應式data數據里的this指向會被修改為全局window（雖然目前沒遇到過data里調用this，以后業務需要會碰到）

　　　　最好的寫法：Object.assign(this.$data, this.$options.data.call(this))    使用顯示綁定，強制將this 綁定為當前組件實例對象（復習 顯示綁定 call apply bind ）

另外需要單獨清空data里的form表單數據:  this.form = this.$options.data.call(this).form