javascript:vuejs_vs_jquery

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:vuejs_vs_jquery [2022/10/16 10:36] – ともやんjavascript:vuejs_vs_jquery [2022/10/16 11:41] (現在) – ともやん
行 37: 行 37:
     const COUNTER = 10000;     const COUNTER = 10000;
          
-    procTime.start('Vue.Load');+    procTime.start('Vue2.Load');
     require(['Vue'], (Vue) => {     require(['Vue'], (Vue) => {
       Vue2_Load_ms = procTime.end('Vue2.Load');       Vue2_Load_ms = procTime.end('Vue2.Load');
     });     });
          
 +    procTime.start('Vue3.Load');
     const Vue3 = Vue     const Vue3 = Vue
-    const { createApp } = Vue3+    const { createApp } = Vue
     Vue3_Load_ms = procTime.end('Vue3.Load');     Vue3_Load_ms = procTime.end('Vue3.Load');
          
行 104: 行 105:
              
       $(window).on('load', () => { setTimeout(() => {       $(window).on('load', () => { setTimeout(() => {
 +        $vue3_test.html('<div v-for="item in items">{{ item }}</div>');
 +        vue3_term.echo(`Vue3 Append Div * ${COUNTER} start!`);
 +        const vue3_items = [];
 +        procTime.start('Vue3.Append');
 +        const vue3_app = createApp({
 +          data() {
 +            return {
 +              items: new Array(''),
 +            }
 +          }
 +        }).mount('#vue3_container')
 +        for (let i = 0; i < COUNTER; i++) {
 +          vue3_items.push(`Test${i + 1}`);
 +        }
 +        vue3_app.items = vue3_items;
 +        ms = procTime.end('Vue3.Append');
 +        vue3_term.echo(`Vue3 Append Div * ${COUNTER} Process time: ${ms}ms`);
 +        
         $vue2_test.html('<div v-for="item in items">{{ item }}</div>');         $vue2_test.html('<div v-for="item in items">{{ item }}</div>');
-         
         vue2_term.echo(`Vue2 Append Div * ${COUNTER} start!`);         vue2_term.echo(`Vue2 Append Div * ${COUNTER} start!`);
         const vue2_items = [];         const vue2_items = [];
行 116: 行 134:
         });         });
         for (let i = 0; i < COUNTER; i++) {         for (let i = 0; i < COUNTER; i++) {
-          items.push(`Test${i + 1}`);+          vue2_items.push(`Test${i + 1}`);
         }         }
         ms = procTime.end('Vue2.Append');         ms = procTime.end('Vue2.Append');
         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('<div v-for="item in items">{{ item }}</div>'); 
-         
-        vue3_term.echo(`Vue3 Append Div * ${COUNTER} start!`); 
-        const vue3_items = []; 
-        procTime.start('Vue3.Append'); 
-        createApp({ 
-          data() { 
-            return {, 
-              items: vue3_items, 
-            } 
-          } 
-        }).mount('#vue3_container') 
-        for (let i = 0; i < COUNTER; i++) { 
-          items.push(`Test${i + 1}`); 
-        } 
-        ms = procTime.end('Vue3.Append'); 
-        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:
 </html> </html>
 ====== Vue.js vs jQuery ====== ====== Vue.js vs jQuery ======
-<WRAP prewrap 100% #vue2_test> +<WRAP prewrap 100% #vue3_test></WRAP>
-</WRAP>+
 \\ \\
-<WRAP prewrap 100% #vue2_container> +<WRAP prewrap 100% #vue3_container></WRAP>
-</WRAP>+
 \\ \\
-<WRAP prewrap 100% #vue3_test> +<WRAP prewrap 100% #vue2_test></WRAP>
-</WRAP>+
 \\ \\
-<WRAP prewrap 100% #vue3_container> +<WRAP prewrap 100% #vue2_container></WRAP>
-</WRAP>+
 \\ \\
-<WRAP prewrap 100% #jquery_test> +<WRAP prewrap 100% #jquery_test></WRAP>
-</WRAP>+
 \\ \\
-<WRAP prewrap 100% #jquery_container> +<WRAP prewrap 100% #jquery_container></WRAP>
-</WRAP>+
  
  • javascript/vuejs_vs_jquery.1665884167.txt.gz
  • 最終更新: 2022/10/16 10:36
  • by ともやん