差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
javascript:vuejs_vs_jquery [2022/10/16 10:57] – ともやん | javascript:vuejs_vs_jquery [2022/10/16 11:41] (現在) – ともやん | ||
---|---|---|---|
行 44: | 行 44: | ||
procTime.start(' | procTime.start(' | ||
const Vue3 = Vue | const Vue3 = Vue | ||
- | const { createApp } = Vue3 | + | const { createApp } = Vue |
Vue3_Load_ms = procTime.end(' | Vue3_Load_ms = procTime.end(' | ||
| | ||
行 105: | 行 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 vue2_items = []; | const vue2_items = []; | ||
行 121: | 行 138: | ||
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 vue3_items = []; | ||
- | procTime.start(' | ||
- | createApp({ | ||
- | data() { | ||
- | return { | ||
- | items: vue3_items, | ||
- | } | ||
- | } | ||
- | }).mount('# | ||
- | for (let i = 0; i < COUNTER; i++) { | ||
- | vue3_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!`); | ||
行 156: | 行 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></ |
- | <div v-for=" | + | |
- | </html></ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% # | + | <WRAP prewrap 100% # |
- | </ | + | |
\\ | \\ | ||
- | <WRAP prewrap 100% # | + | <WRAP prewrap 100% # |
- | </ | + | |