国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

不可错过的 vue 开发技巧

发布时间:2019/08/01标签:   属性    点击量:

原标题:不可错过的 vue 开发技巧
【51CTO.com原创稿件】媒介本文重要先容平常名目开辟进程中的一些技能,关心各人躲避过错的同时还能进步利用的机能。以下是我总结的一些平常任务中的教训。在v-if/v-if-else/v-else中应用key假如一组v-if 与v-else的元素范例雷同,最好应用属性key。这是由于Vue2.0引入虚构DOM,为了幸免不用要的DOM操纵,虚构DOM在虚构节点映照到视图进程中,将虚构节点与上一次衬着视图所应用的旧虚构节点做对照,找出真正须要更新的节点来停止DOM操纵。但偶然假如两个本不雷同的节点被辨认为雷同,便会呈现预料以外的成绩。咱们看上面的一个例子://这类写法会出bug<divv-if="flag"><label>浪里行舟</label><inputtype="text"/></div><divv-else><label>前端工匠</label><inputtype="text"/></div><button@click="flag=!flag">切换</button>假如增加了属性key,那末在对照虚构DOM时,则会以为它们是两个差别的节点,因而会将旧元素移除并在雷同地位增加新元素,从而幸免破绽的呈现。//最好写法<divv-if="flag"><label>浪里行舟</label><inputkey="1"type="text"/></div><divv-else><label>前端工匠</label><inputkey="2"type="text"/></div><button@click="flag=!flag">切换</button>v-for轮回中不要应用index作为key咱们会给列表衬着设置属性key,这个key属性重要用在虚构DOM算法上,在对照新旧虚构节点时辨识虚构节点。但假如key用得分歧理,就会呈现bug,比方咱们应用index作为key(见上面例子),中心代码以下: <divclass="border"><Childrenv-for="(key,index)inlist":key="index">//应用index作为key<button@click="()=>handleDelete(key)">删除</button></Children><button@click="handleAdd">增加</button></div>......handleAdd(){this.list.push(key++);},handleDelete(key){constindex=this.list.findIndex(k=>k===key);this.list.splice(index,1);} 上例中,咱们想删除第二个输出框,却误删了第三个输出框,这由于当应用splice()方式删除数组的某个元素时数组的index会被从新索引,形成数组的最初一个index丧失,从而会使虚构DOM的最初一个结点(key)丧失,形成不管删除哪个结点都市误删除最初一个结点的bug。但假如咱们应用传入的key作为key,便可以幸免这类成绩呈现。<divclass="border"><Childrenv-for="keyinlist":key="key"><button@click="()=>handleDelete(key)">删除</button></Children><button@click="handleAdd">增加</button></div>

上一篇: 还在为写「交互文档」发愁吗?

下一篇:没有了

返回
版权信息Copyright © IT技术教程 版权所有    ICP备案编号:鲁ICP备09013610号