前言

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

問題

在實際項目中，假如使用了二次封裝的組件，并且封裝的組件內(nèi)部做了一些屬性值的深拷貝操作，就有極有可能因為傳入的屬性值是引用類型的值，導(dǎo)致丟失部分?jǐn)?shù)據(jù)。

舉例

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

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

按理正常邏輯，傳入 ak-table 的屬性值應(yīng)該原封不動地傳入到 el-table 組件中，但是奇怪的事情在這里發(fā)生了，我們傳入的函數(shù)在組件中消失了！

問題分析

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

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

控制臺輸出

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

問題到這里就很清晰了，首先，ak-table 組件內(nèi)部其實是想對傳進(jìn)來的屬性值做初始化操作，然后就對 $attrs 進(jìn)行了深拷貝操作，拷貝之后就丟失了 row-key 屬性值，所以造成了數(shù)據(jù)丟失。

解決方案

對于傳入引用類型的值，直接通過子組件的 props 屬性接收來自父組件的值，然后不對傳進(jìn)來的值做處理，直接使用。

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

總結(jié)

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

到此這篇關(guān)于Vue組件傳值過程中丟失數(shù)據(jù)的分析與解決方案的文章就介紹到這了,更多相關(guān)Vue組件傳值丟失數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

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

最新評論