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