Add without-virtual-list to compare experience.

Author: tangbc

demos/common/Header.vue

@@ -1,10 +1,10 @@
 <template>
-<header>
+<header v-bind:class="warning ? 'warning': ''">
     <h1>{{ title }}</h1>
     <section>
-        <span>{{ desciption }}</span>
-        <span class="memory" v-if="supportMemory">Memory used: {{memoryUsed}} MB.</span>
-        <div class="icon" v-bind:class="showSetting ? 'active' : ''" v-on:click="clickIcon">
+        <span class="desciption">{{ desciption }}</span>
+        <span class="memory" v-if="supportMemory && isRenderSetting">Memory used: {{memoryUsed}} MB.</span>
+        <div class="icon" v-if="isRenderSetting" v-bind:class="showSetting ? 'active' : ''" v-on:click="clickIcon">
             <svg width="25" height="25" t="1553394278598" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8690" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <path d="M809.21 474.749H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.864-16.101-35.966-35.966-35.966m0 215.796H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966H809.21c19.865 0 35.966-16.107 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966M220.52 258.954c-19.865 0-35.966 16.101-35.966 35.966 0 19.865 16.101 35.966 35.966 35.966s35.966-16.101 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966m153.502 71.932H809.21c19.865 0 35.966-16.101 35.966-35.966 0-19.865-16.101-35.966-35.966-35.966H374.022c-19.865 0-35.966 16.101-35.966 35.966 0 19.864 16.102 35.966 35.966 35.966M220.52 474.749c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.864-16.102-35.966-35.966-35.966m0 215.796c-19.865 0-35.966 16.101-35.966 35.966 0 19.859 16.101 35.966 35.966 35.966s35.966-16.107 35.966-35.966c0-19.865-16.102-35.966-35.966-35.966" p-id="8691" fill="#2c2c2c"></path>
             </svg>
@@ -51,6 +51,7 @@ export default {
     },
 
     props: {
+        warning: Boolean,
         title: String,
         desciption: String,
         startIndex: Number,
@@ -166,4 +167,9 @@ header {
         }
     }
 }
+header.warning {
+    h1  {
+        color: #ffc107;
+    }
+}
 </style>

demos/item-mode/build.js

@@ -29,6 +29,10 @@ module.exports = multiConfigs.map((config) => {
 
         watch: !isProduction,
 
+        performance: {
+            hints: false
+        },
+
         mode: isProduction ? 'production' : 'development',
 
         resolve: {

demos/variable-height/build.js

@@ -0,0 +1,73 @@
+<template>
+<div class="app">
+    <div class="container">
+        <Header
+            :warning="true"
+            title="without-virtual-list"
+            :desciption="'Build ' + itemCount.toLocaleString() + ' full items, without using virtual list.'"
+        ></Header>
+        <div class="main">
+            <div class="list" :style="rootStyle">
+                <div>
+                    <item
+                        v-for="item in items"
+                        v-bind:key="item.index"
+                        :index="item.index"
+                        :height="size"
+                        :info="item.info"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import Item from '../common/Item.vue'
+import { getRandomUser } from '../common/util'
+
+const remain = 6
+const itemSize = 80
+const itemCount = 1000 * 10
+
+let itemList = []
+for (let idx = 0; idx < itemCount; idx++) {
+    itemList.push({
+        index: idx,
+        height: itemSize,
+        info: getRandomUser()
+    })
+}
+
+export default {
+    name: 'app',
+
+    components: {
+        'item': Item
+    },
+
+    data () {
+        return {
+            remain,
+            itemCount,
+            size: itemSize,
+            items: itemList
+        }
+    },
+
+    computed: {
+        rootStyle () {
+            return {
+                'display': 'block',
+                'overflow-y': 'auto',
+                'height': this.remain * this.size + 'px'
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import '../common/app.less';
+</style>

demos/vfor-mode/build.js

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <title>without use virtual-list</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="build.js"></script>
+</body>
+</html>

demos/webpack.conf.js

@@ -0,0 +1,4 @@
+import App from './App.vue'
+import createApp from '../common/createApp'
+
+createApp(App)