目錄
1. 元件宣告問題
2. 元件註冊時無法訪問vue例項的data資料
3. computed和methods
4. 資料驅動
5. 待續

1.元件宣告問題

先說問題 ：區域性註冊了三個元件，但是元件<p-item> 出現了問題.
console報錯為“Unknown custom element: <p-item>-did you register the component correctly ? For recursive components, make sure to provide the “name” option;
首先並沒有使用遞迴元件

原始碼如下

var pHeader = {
    props:["typeName","shortCut"],
    template: '<div class="productsHeader">\
                    <span>{{typeName}}</span>\
                    <a :href="policyHolder.html?key=+shortCut"
 
><span>更多></span></a>\
                </div>'
        };
var pContent={
    props:["typePicture"],
    template:'<div class="productsContent">\
                   <div class="productsLogo"><img :src="./build/images/productsIndex/+ typePicture +.png " alt="">
 
</div>\
                    <div class="productsItems">\
                        <p-item />\
                        ===========
                    </div>\
            </div>'
}
        var pItem={
            props:["planId","productName","imgUrl","productIntro","price"],
            template:'<a :href="productDetails.html?planId=+planId" class="productsItem">\
                        <span class="productImg"><img :src="imgUrl" alt="產品簡介"></span>\
                        <em>{{productName}}</em>\
                       <span class="productInfo">{{productIntro}}</span>\
                       <span class="productPrice"><em>{{price}}元</em><sub>起</sub></span>\
                    </a>'
        }

修改後的程式碼如下

 Vue.component('p-item', {
            props:["planType"],
            template:'<div class="productsItems">\
                        <div v-for="item,index in products" v-if="item.PlanProperTypeID===planType">\
                        <a :href="\'productDetails.html?planId=\'+item.PlanID" class="productsItem" >\
                            <span class="productImg"><img :src="item.ImgUrl" src="./build/images/productsIndex/img1.jpg" alt="產品簡介"></span>\
                            <em>{{item.PlanName}}</em>\
                            <span class="productInfo">{{item.productIntro}}</span>\
                            <span class="productPrice"><em>{{item.Price}}元</em><sub>起</sub></span>\
                        </a>\
                        </div>\
                    </div>',
            data:function(){
                return {"products" :  ["string","number" ]}
            }
        })

2.元件註冊時無法訪問vue例項的data資料

props 用於 子元件 向父元件獲取資料，這裡展示了 可以將子元件層層巢狀，最終繫結至dom結構，以獲取 vue例項資料。這裡的多層巢狀是出於使用需求，並非所有地方都需要如此巢狀。

以下程式碼經過簡化，去掉無關部分，便於閱讀。

子元件

Vue.component('p-item', {
            props:["planType"],
            template:'<div class="productsItems">\
                        <div v-for="item,index in products" v-if="item.PlanProperTypeID===planType">\
                        </div>\
                    </div>',})

父元件

var pContent={
      props:["typePicture","message"],
      template:'<div class="productsContent">\
                  <p-item :planType="message"></p-item> \
                </div>'
        };

DOM結構

<div v-for="type in productsData.PlanType">
    <p-content :message="type.DictionaryID"   type-picture="layout01"></p-content>
</div>

3.　computed和methods

　　3-1　computed 相關
　　　1 . computed 在生命週期 beforeCreate 和 created 之間執行；
　　　2 . computed 在其依賴的資料發生變化時執行；
　　　3 . computed 不需要任何事件直接觸發；
　　　4 . computed 是一個有計算結果的函式，必須有返回值；
　　　5 . computed 作為一個有計算結果的函式，必須在dom結構中執行過，才會動態的改變資料，
　　　　　a.僅僅在VUE例項中寫下這個函式之後，不在dom結構中執行，這個函式是不會動態的改變資料的；
　　　　　ｂ.把這個函式放在dom中，並不意味著一定要展現這個函式本身，因此這個函式可以隨處放置，至於不同位置對於程式碼效能有何影響，尚不清楚，未曾探索。
　　　6 . computed 所依賴的資料，必須來自data自帶的資料，通過computed的函式新增進入data的資料，將不會觸發computed的執行；
　　　7 . computed 函式的執行嚴格依賴資料變化，同一個函式內部，不同部分，只有其資料發生了變化的那一部分語句才會執行，其他語句不會被執行。
　　　

以下詳細解釋 computed 初始化時的執行時間（以下圖片來源）

以下官網說明（傳送門）

　　3-2　methods相關
　　　１ . methods 需要事件觸發；
　　　２ . methods 不必有返回值；

　　3-3　methods和computed
　　
先看程式碼

 methods:{
   getSinglePage:function(event){
     console.log("this is What methods get :");
     console.log(event);
    }
 },
 computed:{
   greet:function(event){
     console.log("this is What computed get :")
     console.log(event);
     return false;
   }
 }

再看結果

methods 在控制檯輸出的內容：

computed 在控制檯輸出的內容：

3-3的結論
　　１ . methods 獲取到的 event 物件 為滑鼠事件，可以通過 event.target 等屬性來訪問觸發事件的dom結構。
　　2 . computed 獲取到的 event 物件 為 Vue 例項。

4 . 資料驅動
根據使用情況來看，vue資料驅動有嚴格的層級順序限制。

    父級 資料的改變 會觸發 所有 依賴 子級 資料 的 computed 函式。
    子級 資料的改變  不會觸發 任何 以來 父級 資料 的 computed 函式。

一般情況下，會認為，無論子級還是父級資料改變，都意味著整個資料結構都發生了變化，自然應該所有一改該資料 的 computed 函式否應該被觸發。事實上並非如此。

舉慄如下

--html

        <div id="ex">{{fun_Hello}}<br/><br/>{{fun_Hi}}<br/><br/>{{fun_world}}<br/><br/>{{fun_world_index}}</div>

--js

        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script>
        var vm = new Vue({
                el:"#ex",
                data:{
                    hello:{
                        hi:{
                            world:[
                                {a : "a"},
                                {b : "b"}
                            ]
                        }
                    }
                },
                computed:{
                    fun_Hello:function(){
                        console.log(this.hello);
                        return this.hello;
                    },
                    fun_Hi:function(){
                        console.log(this.hello.hi);
                        return this.hello.hi;
                    },
                    fun_world:function(){
                        console.log(this.hello.hi.world);
                        return this.hello.hi.world;
                    },
                    fun_world_index:function(){
                        console.log(this.hello.hi.world[0].a);
                        return this.hello.hi.world[0].a;
                    }
                },
                methods:{
                    change_world_index:function(){
                        this.hello.hi.world[0].a = "4";
                    },
                    change_world:function(){
                        this.hello.hi.world.push({c : "3"});
                    },
                    change_Hi:function(){
                        this.$set(this.hello.hi,"earth","2");
                    },
                    change_Hello:function(){
                        this.$set(this.hello,"guy","1");
                    }
                }
            })
        </script>

--console.log 如下

    對應 change_world_index
        -- 4
    對應 change_world
        -- [{a : "a"},{b : "b"},{c:"3"}]
        -- 4
    對應 change_Hi
        -- {earth:"2",world:[{a : "a"},{b : "b"},{c:"3"}]}
        -- [{a : "a"},{b : "b"},{c:"3"}]
        -- 4
    對應 change_Hello
        -- {guy:"1",hi:{earth:"2",world:[{a : "a"},{b : "b"},{c:"3"}]}}
        -- {earth:"2",world:[{a : "a"},{b : "b"},{c:"3"}]}
        -- [{a : "a"},{b : "b"},{c:"3"}]
        -- 4

補充說明 ：雖然computed 中的 依賴 父級資料 的函式 沒有 因為 子級資料 的改變而 觸發，但是對應的 view 中的資料 卻產生了對應的變化。