前言
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供婺源網(wǎng)站建設(shè)、婺源做網(wǎng)站、婺源網(wǎng)站設(shè)計(jì)、婺源網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、婺源企業(yè)網(wǎng)站模板建站服務(wù),10多年婺源做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
前段時(shí)間做一個(gè)運(yùn)營(yíng)活動(dòng)的項(xiàng)目,上線后產(chǎn)品反饋?lái)?yè)面埋點(diǎn)不對(duì),在排查過程中發(fā)現(xiàn),問題竟然是由于Vue中的data初始值導(dǎo)致,而data的初始值來(lái)自于props。為方便描述,現(xiàn)將問題抽象如下:
一、現(xiàn)象
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用props初始化data中變量</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <user-info :user-data="user"></user-info> </div> <script> //全局組件 let userInfo = Vue.component('userInfo' ,{ name: 'user-info', props: { userData: Object }, data() { return { userName: this.userData.name } }, template: ` <div> <div>姓名:{{userName}}</div> <div>性別:{{userData.gender}}</div> <div>生日:{{userData.birthday}}</div> </div> ` }); //Vue實(shí)例 new Vue({ el: '#app', data: { user: { name: '', gender: '', birthday: '' } }, created(){ this.getUserData(); }, methods:{ getUserData(){ setTimeout(()=>{ this.user = { name: '于永雨', gender: '男', birthday: '1991-7' } }, 500) } }, components: { userInfo } }); </script> </body> </html>
代碼解讀:
結(jié)果:
頁(yè)面初始化后,姓名、性別、生日都顯示為空,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ù)期。代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用props初始化data中變量-對(duì)象形式</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <user-info :user-data="user"></user-info> </div> <script> //全局組件 let userInfo = Vue.component('userInfo' ,{ name: 'user-info', props: { userData: Object }, data() { return { userName: this.userData.name } }, template: ` <div> <div>姓名:{{userName.text}}</div> <div>性別:{{userData.gender}}</div> <div>生日:{{userData.birthday}}</div> </div> ` }); //Vue實(shí)例 new Vue({ el: '#app', data: { user: { name: {text: ''}, gender: '', birthday: '' } }, created(){ this.getUserData(); }, methods:{ getUserData(){ setTimeout(()=>{ this.user = { name: {text: '于永雨'}, gender: '男', birthday: '1991-7' } }, 500) } }, components: { userInfo } }); </script> </body> </html>
運(yùn)行結(jié)果:姓名仍然沒有值,和第一次結(jié)果一樣?。?!
二、原因
那么,原因到底是什么呢?百思不得解,后來(lái)和小伙伴們討論時(shí),有人提出:會(huì)不會(huì)因?yàn)閐ata在初始化時(shí)深拷貝?
我覺得這種解釋比較靠譜,于是去收集證據(jù),首先去Vue官網(wǎng)翻了一下關(guān)于data的文檔,其中:
當(dāng)看到"遞歸地"那個(gè)詞,基本上就能斷定上面的推論是正確的,因?yàn)樯羁截惖暮诵脑砭褪沁f歸。
原來(lái),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無(wú)法隨著props的變化而更新,我們很自然的就想到Vue中有監(jiān)聽作用的兩個(gè)功能:watch、computed。
修改代碼如下,觀察結(jié)果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解決方案:watch、computed</title> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> </head> <body> <div id="app"> <user-info :user-data="user"></user-info> </div> <script> //全局組件 let userInfo = Vue.component('userInfo' ,{ name: 'user-info', props: { userData: Object }, data() { return { userName: this.userData.name } }, computed: { computedUserName(){ return this.userData.name } }, watch: { 'userData.name': function (val) {//監(jiān)聽props中的屬性 this.userName = val; } }, template: ` <div> <div>姓名(watch):{{ userName }}</div> <div>姓名(computed):{{ computedUserName }}</div> <div>性別:{{ userData.gender }}</div> <div>生日:{{ userData.birthday }}</div> </div> ` }); //Vue實(shí)例 new Vue({ el: '#app', data: { user: { name: '', gender: '', birthday: '' } }, created(){ this.getUserData(); }, methods:{ getUserData(){ setTimeout(()=>{ this.user = { name: '于永雨', gender: '男', birthday: '1991-7' } }, 500) } }, components: { userInfo } }); </script> </body> </html>
運(yùn)行結(jié)果
完美?。。?/p>
四、總結(jié):關(guān)于Vue中props的要點(diǎn)
事后又仔細(xì)翻了一下關(guān)于props的文檔:
大概梳理一下:
1.props是單向數(shù)據(jù)流:父組件的數(shù)據(jù)變化,通過props實(shí)時(shí)反應(yīng)在子組件中,反之不然
2.不允許在子組件中直接操作props
3.可以變相操作props
(1)在data中聲明局部變量,并用props初始化,弊端:局部變量不隨著props更新而更新
(2)在computed中對(duì)props值轉(zhuǎn)換后輸出
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站名稱:Vue中用props給data賦初始值遇到的問題解決
文章地址:http://www.muchs.cn/article18/pgdjgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、服務(wù)器托管、外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)