vue 项目的应用总结

1.$refs的使用:分三种情况

(1)在普通dom元素上:this.$refs.aa 拿到的是dom节点,类似于document.querySelector('#aaa')
(2)在组件上: this.$refs.aa 拿到的是该组件对象,可以拿到该组件的data,method。。
(3)在v-for的情况下,不论是在组价还是dom 上,拿到的都是一个数组this.$refs.aa[0] 拿到的才是我们想要的数据。

2.v-for中key的使用

     key的作用相当于给v-for的内容(组件或者原生的dom)添加一个id,在vue的虚拟dom的diff计算时来进行唯一标识一个元素。
1. 如果你的v-for的元素只是用来展示内容不会再进行添加、删除、排序的操作,有没有key都没有问题,key的值也可以直接去v-for的index 的值。
2.但是如果你的v-for的元素之后还会进行排序、添加、删除则必须添加key,并且key的值最好不要用index。

假如有一个数组:arr = [ {content: '111111'}, {content: '222222'}, {content: '33333'}, ],

用index作为数组的key

利用v-for生成一个列表:
<li v-for="(item,index) in arr"  key="index'>{{item.content}}</li>
生成后的代码为
<li key='1'>11111111</li>
<li key='2'>22222222</li>
<li key='3'>33333333</li>
第一种情况:
现在我们对数组进行排序变成:arr = [ {content: '333333'}, {content: '222222'}, {content: '11111111'}, ],
则生成后的代码为
<li key='1'>33333333</li>
<li key='2'>22222222</li>
<li key='3'>11111111</li>
vue 在进行虚拟dom的diff算法是会对比两次的不同,然后发现1项与3项内容变了就会重新渲染这两个dom。
第二种情况:
假如我们对该数组排序变成:arr = [ {content: '333333'},{content: '11111111'}, {content: '222222'} ]
则生成后的代码变成
<li key='1'>33333333</li>
<li key='2'>111111111</li>
<li key='3'>22222222</li>
vue 在进行虚拟dom的diff算法是会对比两次的不同,然后发现1,2,3项都不一样了,整个列表的3项都会重新渲染。

用唯一的id作为key

假如我们先操作数组给每个对象添加一个唯一的id
arr = [{content: '11111111', id: 1}, {content: '222222', id: 2},  {content: '333333',id:3} ]
利用v-for生成一个列表:
<li v-for="(item) in arr"  key='item.id'>{{item.content}}</li>
生成后的代码为
<li key='1'>11111111</li>
<li key='2'>22222222</li>
<li key='3'>33333333</li>
对比上面的两种情况
第一种情况变为
<li key='3'>33333333</li>
<li key='2'>22222222</li>
<li key='1'>11111111</li>
vue 在进行虚拟dom 的diff算法时发现1,2,3项的内容没有变化,只是位置发生了变化。然后会将1,3 的位置进行互换
第二种情况变为
<li key='3'>33333333</li>
<li key='1'>11111111</li>
<li key='2'>22222222</li>
vue 在进行虚拟dom 的diff算法时发现1,2,3项的内容没有变化,只是第三项的位置发生了变化

有些时候必须用id作为key,二不能用index。

如果我们的v-for的dom结构变成了这样,并且每个li可以删除
<li v-for="(item) in arr"  key='item.id'>  <input ......./>  </li>

看下实际的项目


页面初始的情况示意图

这个页面中可以删除与添加联系人如下


这是我新增了3个联系人

接下来我们来删除第二个联系人:
第一次我们用index 作为key效果如下:
企业微信截图_c7a4b03c-2674-4ea9-9fbd-51462cd4bd5c.png

第二次我们用唯一的id作为key效果如下:


企业微信截图_4a97f144-307c-4cb3-a172-41a136f26c32.png
原因分析:
如果用index作为key
删除第二项时相当于从
<li key = ' 1 ' ><input></li>
<li key = ' 2 ' ><input></li>
<li key = ' 3 ' ><input></li>
变成了:
<li key = ' 1 ' ><input></li>
<li key = ' 2 ' ><input></li>
vue 的虚拟dom的计算结果:会变成删除了第三项
如果用id作为key
删除第二项时相当于从
<li key = ' 1 ' ><input></li>
<li key = ' 2 ' ><input></li>
<li key = ' 3 ' ><input></li>
变成了:
<li key = ' 1 ' ><input></li>
<li key = ' 3 ' ><input></li>
vue 的虚拟dom的计算结果:会变成删除了第二项,这才是我们想要的结果

结论:通过比对用index 与 id 做key的两种情况,用id做key的性能消耗明显的更小,效率更高一些。

3.组件的props 与 data 的使用方法基本相同。

都可以直接在template 中进行绑定,
可以在父组件中this.$refs.a.propsA,直接拿到
都可以用来进行watch 与 computed

4.对于生命周期的理解

created: 可以拿到props与data
mounted:可以拿到dom或组件

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,989评论 0 29
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,209评论 0 17
  • #清凉法语# 过去因,现在果 过去因,现在果;现在因,未来果,佛法是最积极的人生观。现在的幸福是过去自己的努力所得...
    xcy无名阅读 635评论 0 0
  • 不知不觉即将踏入大三,我想写写过去这两年来在编程上面的一些思考,算是对过去这两年学学习的概括性总结. 在大学最开始...
    lwhile阅读 276评论 0 1
  • 哈哈,每次标题都懒得起了,因为每次都是随笔,总不能随笔一,二,三⋯⋯这样更是敷衍了。 今天很开心。仅仅是因为自己心...
    尚可心阅读 212评论 1 1