這篇文章給大家分享的是有關(guān)Vue中用props給data賦初始值時(shí)會(huì)遇到什么問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的高邑網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

前段時(shí)間做一個(gè)運(yùn)營(yíng)活動(dòng)的項(xiàng)目，上線后產(chǎn)品反饋頁面埋點(diǎn)不對(duì)，在排查過程中發(fā)現(xiàn)，問題竟然是由于Vue中的data初始值導(dǎo)致，而data的初始值來自于props。為方便描述，現(xiàn)將問題抽象如下：

一、現(xiàn)象

代碼：

代碼解讀：

1. 根組件data中有一個(gè)對(duì)象：user，包含三個(gè)屬性：name、gender、birthday，初始值都為空字符串

2. 模擬api異步請(qǐng)求，500毫秒后對(duì)user的重新賦值，三個(gè)屬性都不再為空

3. 聲明一個(gè)子組件userInfo，props中有一個(gè)對(duì)象userData，用于接收父組件的user；data中有一個(gè)變量userName，初始值來自于userData.name

結(jié)果：

頁面初始化后，姓名、性別、生日都顯示為空，500毫秒后性別和生日顯示正常結(jié)果，僅姓名沒有變化。

為什么會(huì)這樣呢？

我最初的想法：user.name是String，屬于基本數(shù)據(jù)類型，用它給子組件data中userName賦值，屬于基本數(shù)據(jù)類型賦值，所以當(dāng)父組件中user.name變化時(shí)，子組件中userName并不會(huì)隨之變化。

是這樣的嗎？于是我決定將user.name改為對(duì)象，通過引用數(shù)據(jù)類型賦值，然后觀察是否符合預(yù)期。代碼如下：

運(yùn)行結(jié)果：姓名仍然沒有值，和第一次結(jié)果一樣?。。?/strong>

二、原因

那么，原因到底是什么呢？百思不得解，后來和小伙伴們討論時(shí)，有人提出：會(huì)不會(huì)因?yàn)閐ata在初始化時(shí)深拷貝？

我覺得這種解釋比較靠譜，于是去收集證據(jù)，首先去Vue官網(wǎng)翻了一下關(guān)于data的文檔，其中：

當(dāng)看到"遞歸地"那個(gè)詞，基本上就能斷定上面的推論是正確的，因?yàn)?strong>深拷貝的核心原理就是遞歸。

原來，Vue初始化時(shí)會(huì)遞歸地遍歷data所有的屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為getter/setter，用于實(shí)現(xiàn)雙向綁定。官方文檔在Reactivity in Depth一章明確有說：

還順便解釋了一下為什么Vue不支持IE8的原因：IE8不支持Object.defineProperty。

三、解決辦法

既然因?yàn)閐ata深拷貝的原因，data無法隨著props的變化而更新，我們很自然的就想到Vue中有監(jiān)聽作用的兩個(gè)功能：watch、computed。
修改代碼如下，觀察結(jié)果：

四、總結(jié)：關(guān)于Vue中props的要點(diǎn)

事后又仔細(xì)翻了一下關(guān)于props的文檔：

大概梳理一下：

1.props是單向數(shù)據(jù)流：父組件的數(shù)據(jù)變化，通過props實(shí)時(shí)反應(yīng)在子組件中，反之不然2.不允許在子組件中直接操作props3.可以變相操作props（1）在data中聲明局部變量，并用props初始化，弊端：局部變量不隨著props更新而更新（2）在computed中對(duì)props值轉(zhuǎn)換后輸出

感謝各位的閱讀！關(guān)于Vue中用props給data賦初始值時(shí)會(huì)遇到什么問題就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞名稱：Vue中用props給data賦初始值時(shí)會(huì)遇到什么問題-創(chuàng)新互聯(lián)
本文地址：http://weahome.cn/article/ddhecj.html