Vue使用经验小结

目录
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;
首先并没有使用递归组件，因此，不用提供”name”属性。
但是不知道出现问题的原因，急于出活，暂且搁置，此处存疑。
使用了另外一种方法:即 全局注册组件

源代码如下

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 中的数据 却产生了对应的变化。