国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

luck / 3170人閱讀

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

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

前言

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

一、現(xiàn)象 代碼： 



    
    用props初始化data中變量
代碼解讀：

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

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

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

結(jié)果：

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

為什么會這樣呢？

二、原因及解決辦法

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

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




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

運行結(jié)果：

完美！！！

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

既然基本數(shù)據(jù)類型賦值沒法實現(xiàn)值同步，那我們可以考慮監(jiān)聽props中的值，然后手動變更局部變量。基于此，我們很自然的就想到Vue中有監(jiān)聽作用的兩個功能：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) { //監(jiān)聽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 }}

            

        `
    });

經(jīng)驗證，結(jié)果符合皆預(yù)期！

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

詳見評論區(qū)@Kim09AI同學(xué)的評論。

第二條彎路

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

直到文章發(fā)布之初，仍然持此觀點，后來經(jīng)@Kim09AI同學(xué)提醒才恍然大悟。

當(dāng)初之所以深信是data被深拷貝導(dǎo)致的，主要是自己在翻到Vue官方文檔看到關(guān)于data的描述：

看到"遞歸地”那個詞，就想當(dāng)然地認(rèn)為data被深拷貝了，因為深拷貝的核心原理就是遞歸。

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

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

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

小結(jié)一下：

文章開頭的問題是一個關(guān)于基本數(shù)據(jù)類型和引用數(shù)據(jù)類型賦值的問題

data在初始化時被遞歸遍歷轉(zhuǎn)化是用于實現(xiàn)雙向綁定

這么看來，二者是沒有任何關(guān)系的。

四、關(guān)于Vue中props的要點

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

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

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

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

五、一點反思

分享是一種知識的傳遞，嚴(yán)謹(jǐn)和正確是最重要的，技術(shù)文章更是如此。想當(dāng)然和不加深究實為大忌，引以為戒。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99420.html

相關(guān)文章

  • vue 開發(fā)中遇到的問題匯總（踩坑指南）

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

    wean 評論0 收藏0

  • vue組件通信全面總結(jié)

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

    余學(xué)文 評論0 收藏0

  • vue2.0學(xué)習(xí)筆記（組件基礎(chǔ)）

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

    mingzhong 評論0 收藏0

  • 論如何用Vue實現(xiàn)一個彈窗-一個簡單的組件實現(xiàn)

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

    xialong 評論0 收藏0

  • 論如何用Vue實現(xiàn)一個彈窗-一個簡單的組件實現(xiàn)

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

    snowLu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<