-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnextTick.html
150 lines (137 loc) · 4.92 KB
/
nextTick.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list1">{{item}}</li>
</ul>
<ul>
<li v-for="item in list2">{{item}}</li>
</ul>
<ol>
<li v-for="item in list3">{{item}}</li>
</ol>
<ol>
<li v-for="item in list4">{{item}}</li>
</ol>
<ol>
<li v-for="item in list5">{{item}}</li>
</ol>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
//对vue nextTick的测试
var app = new Vue({
el: '#app',
data() {
return {
list1: [],
list2: [],
list3: [],
list4: [],
list5: []
}
},
mounted() {
this.composeList12()
this.composeList34()
this.composeList5()
this.$nextTick(function () {
// DOM 更新了
console.log('finished test ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
},
methods: {
composeList12() {
let me = this
let count = 100
for (let i = 0; i < count; i++) {
Vue.set(me.list1, i, 'I am a 测试信息～～啦啦啦' + i)
}
console.log('finished list1 ' + new Date().toString())
for (let i = 0; i < count; i++) {
Vue.set(me.list2, i, 'I am a 测试信息～～啦啦啦' + i)
}
new Promise((resolve, reject) => {
console.log("promise start");
resolve();
}).then(function () {
//dom在此时都已经更新了
console.log('节点个数：' + document.querySelectorAll('li').length);
console.log("promise then");
});
console.log('finished list2 ' + new Date().toString())
this.$nextTick(function () {
// DOM 更新了
console.log('finished tick1&2 ' + new Date().toString())
console.log(document.querySelectorAll('li').length);
new Promise((resolve, reject) => {
console.log("nextTick promise start");
resolve();
}).then(function () {
console.log("nextTick promise then");
});
})
},
composeList34() {
let me = this
let count = 100
for (let i = 0; i < count; i++) {
Vue.set(me.list3, i, 'I am a 测试信息～～啦啦啦' + i)
}
console.log('节点个数：' + document.querySelectorAll('li').length);
console.log('finished list3 ' + new Date().toString());
this.$nextTick(function () {
// DOM 更新了
console.log('finished tick3 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
setTimeout(me.setTimeout1, 0)
},
setTimeout1() {
let me = this
let count = 100
for (let i = 0; i < count; i++) {
Vue.set(me.list4, i, 'I am a 测试信息～～啦啦啦' + i)
}
console.log('节点个数：' + document.querySelectorAll('li').length);
console.log('finished list4 ' + new Date().toString())
me.$nextTick(function () {
// DOM 更新了
console.log('finished tick4 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
},
composeList5() {
let me = this
let count = 100
this.$nextTick(function () {
// DOM 更新了
console.log('finished tick5-1 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
setTimeout(me.setTimeout2, 0)
},
setTimeout2() {
let me = this
let count = 100
for (let i = 0; i < count; i++) {
Vue.set(me.list5, i, 'I am a 测试信息～～啦啦啦' + i)
}
console.log('finished list5 ' + new Date().toString())
me.$nextTick(function () {
// DOM 更新了
console.log('finished tick5 ' + new Date().toString())
console.log(document.querySelectorAll('li').length)
})
}
}
});
</script>
</body>
</html>