第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

Vue 組件傳值過程中丟失數(shù)據(jù)

標(biāo)簽:
JavaScript

在上一篇文章 JavaScript 中的两种数据类型中,分别介绍了基本类型和引用类型,以及引用类型的浅拷贝与深拷贝。这里需要注意的是,该文章中深拷贝引用类型值的方法,并不是完美的,引用类型值中的某些属性值,仍不能完整地复制到新的变量中。比如函数值,在深拷贝过程中,就会丢失。

问题

在实际项目中,假如使用了二次封装的组件,并且封装的组件内部做了一些属性值的深拷贝操作,就有极有可能因为传入的属性值是引用类型的值,导致丢失部分数据。

举例

以基于 el-table 封装的 ak-table 组件为例:

往 ak-table 组件中传入 row-key 属性,该属性可传入一个函数:Function(row),具体见官方文档

filefile

按理正常逻辑,传入 ak-table 的属性值应该原封不动地传入到 el-table 组件中,但是奇怪的事情在这里发生了,我们传入的函数在组件中消失了!

file

问题分析

  1. 首先传入 ak-table 的 row-key 属性的值,它是一个函数,即引用类型值,那么根据文章开头所说,如果对引用类型的值进行一般的深拷贝操作,是会丢失函数和数组等数据的。
  2. 在 ak-table 中,找到 row-key 属性,因为没有在 props 中定义,所以应该是保存在组件的 $attrs 属性中。去到 mounted 方法,在此打印 $attrs 的值,看看拷贝前后的数据对比。
    file
    控制台输出
    ———————————————————————————————————————
    file
  3. 问题到这里就很清晰了,首先,ak-table 组件内部其实是想对传进来的属性值做初始化操作,然后就对 $attrs 进行了深拷贝操作,拷贝之后就丢失了 row-key 属性值,所以造成了数据丢失。

解决方案

  1. 对于传入引用类型的值,直接通过子组件的 props 属性接收来自父组件的值,然后不对传进来的值做处理,直接使用。
  2. 对于传入引用类型的值,在拷贝时要‘特殊对待’,把需要用到的属性值递归拷贝到新的变量中。

总结

对于 JavaScript 中的基本类型和引用类型,以及对引用类型值拷贝的理解,是我们运用这门语言进行开发的基本技能。有时候常常因为粗心大意,以为简单粗暴的拷贝一个变量,就以为得到了它的完全复制体,因而造成了某些数据‘消失不见’的灵异事件。这时可以参考文章的解决方案,这是我在项目开发中遇到过的问题,以此记录,希望对您有帮助。

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消