use the same api to take about 20, 000 pieces of data, and use Vue and jQuery to realize the picture representation respectively. Which should be faster?
use the same api to take about 20, 000 pieces of data, and use Vue and jQuery to realize the picture representation respectively. Which should be faster?
for cycle to create 20, 000 pieces of data to try and ask questions here, which is faster?
vue:
<div id="app">
<div v-for="item in list" :key="item.id">
{{item.name}}
</div>
</div>
let list = []
for (let index = 0; index < 20000; indexPP) {
list.push({
id: index,
name: `text${index}`
})
}
new Vue({
el: '-sharpapp',
data: {
list: []
},
created () {
console.time('vue')
this.list = list
this.$nextTick(() => {
console.timeEnd('vue')
})
}
})
jq
this is a single test. You can take the average multiple times
list.forEach ((item) = > {)
$('- sharpapp'). Append (`
<div>
${item.name}
</div> `)
})
Big Brother you have a problem with your own writing in this place. You should first concatenate the strings and then use append
.https://jsfiddle.net/qm0ysuza/2/
vue: 276.24609375ms
jq: 139.526123046875msdirectly manipulating dom manually is definitely the fastest when you know exactly how the data changes.
divdiv here is the code (some of the css code has been ignored) template code <template> <div> <div class="follow_contents_wrap" v-for="(list,index) in follow_contents" ...
If there is any problem with , you still need to change the code to transplant ....
introduce jquery, on another page to bind a click event to an element, using normal on this page, the only difference for the same element is that this element needs to be looped out with v-for. also introduces click events bound by jquery, will have...
problem description it is known that I have a turntable with four (not fixed) contents. At present, I can successfully get the information of the target item after rotation (subscript). but I can never turn the turntable to the expected position (for...
the code is shown below: : question: 1, the position t.data.memberInfo of print 1 can get the value; 2, the position t.data of print 2 exists memberInfo; 3, and the position t.data.memberInfo of print 3 is undefined. What is the reason? What ...