差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:vuejs_vs_jquery [2022/10/16 10:34] – ともやん | javascript:vuejs_vs_jquery [2022/10/16 11:41] (現在) – ともやん | ||
---|---|---|---|
行 37: | 行 37: | ||
const COUNTER = 10000; | const COUNTER = 10000; | ||
| | ||
- | procTime.start(' | + | procTime.start(' |
require([' | require([' | ||
Vue2_Load_ms = procTime.end(' | Vue2_Load_ms = procTime.end(' | ||
}); | }); | ||
| | ||
+ | procTime.start(' | ||
const Vue3 = Vue | const Vue3 = Vue | ||
- | const { createApp } = Vue3 | + | const { createApp } = Vue |
Vue3_Load_ms = procTime.end(' | Vue3_Load_ms = procTime.end(' | ||
| | ||
行 104: | 行 105: | ||
| | ||
$(window).on(' | $(window).on(' | ||
+ | $vue3_test.html('< | ||
+ | vue3_term.echo(`Vue3 Append Div * ${COUNTER} start!`); | ||
+ | const vue3_items = []; | ||
+ | procTime.start(' | ||
+ | const vue3_app = createApp({ | ||
+ | data() { | ||
+ | return { | ||
+ | items: new Array('' | ||
+ | } | ||
+ | } | ||
+ | }).mount('# | ||
+ | for (let i = 0; i < COUNTER; i++) { | ||
+ | vue3_items.push(`Test${i + 1}`); | ||
+ | } | ||
+ | vue3_app.items = vue3_items; | ||
+ | ms = procTime.end(' | ||
+ | vue3_term.echo(`Vue3 Append Div * ${COUNTER} Process time: ${ms}ms`); | ||
+ | | ||
$vue2_test.html('< | $vue2_test.html('< | ||
- | | ||
vue2_term.echo(`Vue2 Append Div * ${COUNTER} start!`); | vue2_term.echo(`Vue2 Append Div * ${COUNTER} start!`); | ||
- | const items = []; | + | const vue2_items |
procTime.start(' | procTime.start(' | ||
new Vue({ | new Vue({ | ||
el: '# | el: '# | ||
data: { | data: { | ||
- | items: | + | items: |
}, | }, | ||
}); | }); | ||
for (let i = 0; i < COUNTER; i++) { | for (let i = 0; i < COUNTER; i++) { | ||
- | | + | |
} | } | ||
ms = procTime.end(' | ms = procTime.end(' | ||
vue2_term.echo(`Vue2 Append Div * ${COUNTER} Process time: ${ms}ms`); | vue2_term.echo(`Vue2 Append Div * ${COUNTER} Process time: ${ms}ms`); | ||
- | | ||
- | $vue3_test.html('< | ||
- | | ||
- | vue3_term.echo(`Vue3 Append Div * ${COUNTER} start!`); | ||
- | const items = []; | ||
- | procTime.start(' | ||
- | createApp({ | ||
- | data() { | ||
- | return {, | ||
- | items: items, | ||
- | } | ||
- | } | ||
- | }).mount('# | ||
- | for (let i = 0; i < COUNTER; i++) { | ||
- | items.push(`Test${i + 1}`); | ||
- | } | ||
- | ms = procTime.end(' | ||
- | vue3_term.echo(`Vue3 Append Div * ${COUNTER} Process time: ${ms}ms`); | ||
| | ||
jquery_term.echo(`jQuery Append Div * ${COUNTER} start!`); | jquery_term.echo(`jQuery Append Div * ${COUNTER} start!`); | ||
行 155: | 行 155: | ||
</ | </ | ||
====== Vue.js vs jQuery ====== | ====== Vue.js vs jQuery ====== | ||
- | <WRAP prewrap 100% #vue2_test> | + | <WRAP prewrap 100% #vue3_test></ |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% #vue2_container> | + | <WRAP prewrap 100% #vue3_container></ |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% #vue3_test> | + | <WRAP prewrap 100% #vue2_test></ |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% #vue3_container> | + | <WRAP prewrap 100% #vue2_container></ |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% # | + | <WRAP prewrap 100% # |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% # | + | <WRAP prewrap 100% # |
- | </ | + | |