66}
77</ style >
88
9- < script type ="x/ template " id ="t ">
10- < div >
11- < p > Used { { time} } ms.</ p >
12- < button @click = "shuffle" > shuffle</ button >
13- < button @click = "add" > add</ button >
14- < table class = "table table-hover table-striped test-data" >
15- < row v-for = "item in items" track-by = "id"
16- :class = "{ danger: item.id === selected }"
17- :item = "item"
18- @select = "select ( item ) "
19- @remove = "remove ( item ) ">
20- </row >
21- </table >
22- </div >
9+ < script type ="text/x- template " id ="t ">
10+ < div >
11+ < p > { { action } } took { { time} } ms.</ p >
12+ < button @click = "shuffle" > shuffle</ button >
13+ < button @click = "add" > add</ button >
14+ < table class = "table table-hover table-striped test-data" >
15+ < row v-for = "item in items" track-by = "id"
16+ :class = "{ danger: item.id === selected }"
17+ :item = "item"
18+ @select = "select ( item ) "
19+ @remove = "remove ( item ) ">
20+ </row >
21+ </table >
22+ </div >
2323</ script >
2424
25- < script type ="x/ template " id ="row ">
26- < tr >
27- < td class = "col-md-1" > { { item . id} } </ td >
28- < td class = "col-md-4" >
29- < a @click = "$emit('select')" > { { item . label} } </ a >
30- </ td >
31- < td class = "col-md-1" >
32- < button @click = "$emit('remove')" > remove</ button >
33- </ td >
34- </ tr >
25+ < script type ="text/x- template " id ="row ">
26+ < tr >
27+ < td class = "col-md-1" > { { item . id} } </ td >
28+ < td class = "col-md-4" >
29+ < a @click = "$emit('select')" > { { item . label} } </ a >
30+ </ td >
31+ < td class = "col-md-1" >
32+ < button @click = "$emit('remove')" > remove</ button >
33+ </ td >
34+ </ tr >
3535</ script >
3636
3737< h1 > 1000 Components</ h1 >
@@ -53,23 +53,24 @@ <h1>1000 Components</h1>
5353 template : '#t' ,
5454 data : {
5555 time : 0 ,
56+ action : 'Render' ,
5657 items : items ,
5758 selected : null
5859 } ,
5960 methods : {
60- shuffle : wrap ( function ( ) {
61+ shuffle : monitor ( 'shuffle' , function ( ) {
6162 this . items = _ . shuffle ( this . items )
6263 } ) ,
63- add : wrap ( function ( ) {
64+ add : monitor ( 'add' , function ( ) {
6465 this . items . push ( {
6566 id : this . items . length ,
6667 label : String ( Math . random ( ) ) . slice ( 0 , 5 )
6768 } )
6869 } ) ,
69- select : wrap ( function ( item ) {
70+ select : monitor ( 'select' , function ( item ) {
7071 this . selected = item . id
7172 } ) ,
72- remove : wrap ( function ( item ) {
73+ remove : monitor ( 'remove' , function ( item ) {
7374 this . items . $remove ( item )
7475 } )
7576 } ,
@@ -84,11 +85,12 @@ <h1>1000 Components</h1>
8485 vm . time = window . performance . now ( ) - s
8586} , 0 )
8687
87- function wrap ( fn ) {
88+ function monitor ( action , fn ) {
8889 return function ( ) {
8990 var s = window . performance . now ( )
9091 fn . apply ( this , arguments )
9192 Vue . nextTick ( function ( ) {
93+ vm . action = action
9294 vm . time = window . performance . now ( ) - s
9395 } )
9496 }
0 commit comments