Vue中用props給data賦初始值遇到的問題

luck 發布于2019-08-23 13:42 / 3178人閱讀

摘要：基于此，我們很自然的就想到中有監聽作用的兩個功能。正如在所說小結一下文章開頭的問題是一個關于基本數據類型和引用數據類型賦值的問題在初始化時被遞歸遍歷轉化是用于實現雙向綁定這么看來，二者是沒有任何關系的。想當然和不加深究實為大忌，引以為戒。

2018-11-28更：文章發布后因為存在理解錯誤，經@Kim09AI同學提醒后做了調整，在此深表感謝。其他不足之處，還望不吝賜教。

前言

前段時間做一個運營活動的項目，上線后產品反饋頁面埋點不對，在排查過程中發現，問題竟然是由于Vue中的data初始值導致，而data的初始值來自于props。為方便描述，現將問題抽象如下：

一、現象 代碼：




    
    用props初始化data中變量

代碼解讀：

根組件data中有一個對象：user，包含三個屬性：name、gender、birthday，初始值都為空字符串

模擬api異步請求，500毫秒后對user的重新賦值，三個屬性都不再為空

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

結果：

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

為什么會這樣呢？

二、原因及解決辦法

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

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




    
    用props初始化data中變量-對象形式

運行結果：

完美！！！

如果我們不想把user.name改為Object類型，有沒有其他的解決辦法呢？

既然基本數據類型賦值沒法實現值同步，那我們可以考慮監聽props中的值，然后手動變更局部變量。基于此，我們很自然的就想到Vue中有監聽作用的兩個功能：watch、computed。

為了縮減篇幅，我們此處只貼出userInfo組件，其他代碼與第一個示例一致，具體如下：

方法一：watch

let userInfo = Vue.component("userInfo" ,{
        name: "user-info",
        props: {
            userData: Object
        },
        data() {
          return {
            userName: this.userData.name
          }
        },
        watch: {
            "userData.name": function (val) { //監聽props中的屬性
                this.userName = val;
            }
        },
        template: `
            
                姓名：{{ userName }}
                性別：{{ userData.gender }}
                生日：{{ userData.birthday }}
            
        `
    });

方法二：computed

let userInfo = Vue.component("userInfo" ,{
        name: "user-info",
        props: {
            userData: Object
        },
        data() {
          return {
            userName: this.userData.name
          }
        },
        computed: {
            computedUserName(){
                return this.userData.name
            }
        },
        template: `
            
                姓名：{{ computedUserName }}
                性別：{{ userData.gender }}
                生日：{{ userData.birthday }}
            
        `
    });

經驗證，結果符合皆預期！

三、走過的彎路 第一條彎路

詳見評論區@Kim09AI同學的評論。

第二條彎路

其實，曾以為導致文章開頭的問題，是由于data在初始化后深拷貝，props再次變化data并不會刷新導致的。

直到文章發布之初，仍然持此觀點，后來經@Kim09AI同學提醒才恍然大悟。

當初之所以深信是data被深拷貝導致的，主要是自己在翻到Vue官方文檔看到關于data的描述：

看到"遞歸地”那個詞，就想當然地認為data被深拷貝了，因為深拷貝的核心原理就是遞歸。

其實現在再回過頭來看那段描述，包括在Reactivity in Depth一章的描述：

它們真正含義是：Vue會遞歸地遍歷data所有的屬性，并使用Object.defineProperty把這些屬性全部轉為getter/setter，讓data中的屬性更具“交互性”，以此作為實現雙向綁定的基礎。包括還順便解釋了一下為什么Vue不支持IE8的原因：IE8不支持Object.defineProperty。

這也僅僅解釋了為什么只有在組件初始化之初data中已經聲明的屬性才具有“交互性”，即data中屬性的變化會引起視圖變化，而其他在最初data中沒有聲明的屬性則不會。正如在The Vue Instance所說：

小結一下：

文章開頭的問題是一個關于基本數據類型和引用數據類型賦值的問題

data在初始化時被遞歸遍歷轉化是用于實現雙向綁定

這么看來，二者是沒有任何關系的。

四、關于Vue中props的要點

事后又仔細翻了一下關于props的文檔：

大概梳理一下：
1.props是單向數據流：父組件的數據變化，通過props實時反應在子組件中，反之不然

2.不允許在子組件中直接操作props

3.可以變相操作props
（1）在data中聲明局部變量，并用props初始化
（2）在computed中對props值轉換后輸出

五、一點反思

分享是一種知識的傳遞，嚴謹和正確是最重要的，技術文章更是如此。想當然和不加深究實為大忌，引以為戒。

GPU云服務器云服務器布局遇到的問題學習遺傳算法遇到的問題看apue遇到的有關問題 js請求數據遇到的問題嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99420.html

vue 開發中遇到的問題匯總（踩坑指南）

摘要：組件中使用定時器及銷毀問題如果我們在頁面中使用了一個定時器，當從頁面跳轉到頁面時，如果不手動清除這個定時器，那么它仍舊會執行，這不是我們所期望的。公司年初開始從jquery轉型到vue開發，思想上從jquery的操作DOM到vue的操作數據，剛開始還不太習慣，但用了一段時間發現確實比較方便。在剛開始用vue的時候，也踩了一些坑，現在分享出來，供剛入門上手開發vue的朋友參考，都是一些...

wean 2019-08-20 18:52 評論0 收藏0
vue組件通信全面總結

摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創建高級別的組件時非常有用。寫在前面組件間的通信是是實際開發中非常常用的一環，如何使用對項目整體設計、開發、規范都有很實際的的作用，我在項目開發中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景文章對相關場景預覽父->子組件間的數據傳遞子->父組件間的數據傳遞兄弟...

余學文 2019-08-23 12:16 評論0 收藏0
vue2.0學習筆記（組件基礎）

摘要：組件的復用你可以將組件進行任意次數的復用注意當點擊按鈕時，每個組件都會各自獨立維護它的。 1、基本示例 // 定義一個名為 button-counter 的新組件 Vue.component(button-counter, { data: function () { return { count: 0 } }, template: You cli...

mingzhong 2019-08-23 18:36 評論0 收藏0
論如何用Vue實現一個彈窗-一個簡單的組件實現

摘要：前言最近在使用框架，用到了對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。現在基本上彈窗組件都已實現的差不多了，還差一個彈窗的關閉事件，這里就涉及到子組件往父組件傳參了。前言最近在使用element-ui框架，用到了Dialog對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實現方式與大家...

xialong 2019-08-22 16:38 評論0 收藏0
論如何用Vue實現一個彈窗-一個簡單的組件實現

摘要：前言最近在使用框架，用到了對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。現在基本上彈窗組件都已實現的差不多了，還差一個彈窗的關閉事件，這里就涉及到子組件往父組件傳參了。前言最近在使用element-ui框架，用到了Dialog對話框組件，大致實現的效果，跟我之前自己在移動端項目里面弄的一個彈窗組件差不太多。然后就想著把這種彈窗組件的實現方式與大家...

snowLu 2019-08-29 15:08 評論0 收藏0