Vue組件傳值過程中丟失數據的分析與解決方案

Posted on by

前言

在上一篇文章 JavaScript 中的兩種數據類型中，分別介紹瞭基本類型和引用類型，以及引用類型的淺拷貝與深拷貝。這裡需要註意的是，該文章中深拷貝引用類型值的方法，並不是完美的，引用類型值中的某些屬性值，仍不能完整地復制到新的變量中。比如函數值，在深拷貝過程中，就會丟失。

問題

在實際項目中，假如使用瞭二次封裝的組件，並且封裝的組件內部做瞭一些屬性值的深拷貝操作，就有極有可能因為傳入的屬性值是引用類型的值，導致丟失部分數據。

舉例

以基於 el-table 封裝的 ak-table 組件為例：

往 ak-table 組件中傳入 row-key 屬性，該屬性可傳入一個函數：Function(row)，具體見官方文檔。

按理正常邏輯，傳入 ak-table 的屬性值應該原封不動地傳入到 el-table 組件中，但是奇怪的事情在這裡發生瞭，我們傳入的函數在組件中消失瞭！

問題分析

首先傳入 ak-table 的 row-key 屬性的值，它是一個函數，即引用類型值，那麼根據文章開頭所說，如果對引用類型的值進行一般的深拷貝操作，是會丟失函數和數組等數據的。

在 ak-table 中，找到 row-key 屬性，因為沒有在 props 中定義，所以應該是保存在組件的 attrs 屬性中。去到 mounted 方法，在此打印attrs屬性中。去到mounted方法，在此打印attrs 的值，看看拷貝前後的數據對比。

控制臺輸出

———————————————————————————————————————

問題到這裡就很清晰瞭，首先，ak-table 組件內部其實是想對傳進來的屬性值做初始化操作，然後就對 $attrs 進行瞭深拷貝操作，拷貝之後就丟失瞭 row-key 屬性值，所以造成瞭數據丟失。

解決方案

對於傳入引用類型的值，直接通過子組件的 props 屬性接收來自父組件的值，然後不對傳進來的值做處理，直接使用。

對於傳入引用類型的值，在拷貝時要‘特殊對待’，把需要用到的屬性值遞歸拷貝到新的變量中。

總結

對於 JavaScript 中的基本類型和引用類型，以及對引用類型值拷貝的理解，是我們運用這門語言進行開發的基本技能。有時候常常因為粗心大意，以為簡單粗暴的拷貝一個變量，就以為得到瞭它的完全復制體，因而造成瞭某些數據‘消失不見’的靈異事件。這時可以參考文章的解決方案，這是我在項目開發中遇到過的問題，以此記錄，希望對您有幫助。

到此這篇關於Vue組件傳值過程中丟失數據的分析與解決方案的文章就介紹到這瞭,更多相關Vue組件傳值丟失數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

參考鏈接：JavaScript深拷貝的一些坑

推薦閱讀：