Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bb026d2

Browse files
yyx990803yyx990803
committed
update vue to 3.2
1 parent cc36494 commit bb026d2

File tree

11 files changed

+2224
-7545
lines changed

11 files changed

+2224
-7545
lines changed

‎frameworks/keyed/vue/.babelrc

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎frameworks/keyed/vue/package-lock.json

Lines changed: 882 additions & 3590 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/vue/package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"frameworkVersionFromPackage": "vue"
77
},
88
"scripts": {
9-
"build-dev": "webpack -w -d",
10-
"build-prod": "webpack -p"
9+
"build-dev": "webpack --mode development --watch",
10+
"build-prod": "webpack --mode production"
1111
},
1212
"keywords": [
1313
"vue"
@@ -20,12 +20,12 @@
2020
"url": "https://github.com/krausest/js-framework-benchmark.git"
2121
},
2222
"devDependencies": {
23-
"@vue/compiler-sfc": "3.1.5",
24-
"vue-loader": "16.1.2",
25-
"webpack": "4.41.4",
26-
"webpack-cli": "3.3.10"
23+
"@vue/compiler-sfc": "3.2.1",
24+
"vue-loader": "16.5.0",
25+
"webpack": "5.49.0",
26+
"webpack-cli": "4.7.2"
2727
},
2828
"dependencies": {
29-
"vue": "3.1.5"
29+
"vue": "3.2.1"
3030
}
3131
}

‎frameworks/keyed/vue/src/App.vue

Lines changed: 147 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,161 @@
1-
<template>
2-
<div class="jumbotron">
3-
<div class="row">
4-
<div class="col-md-6">
5-
<h1>Vue.js (keyed)</h1>
6-
</div>
7-
<div class="col-md-6">
8-
<div class="row">
9-
<div class="col-sm-6 smallpad">
10-
<button type="button" class="btn btn-primary btn-block" id="run" @click="run">Create 1,000 rows</button>
11-
</div>
12-
<div class="col-sm-6 smallpad">
13-
<button type="button" class="btn btn-primary btn-block" id="runlots" @click="runLots">Create 10,000 rows</button>
14-
</div>
15-
<div class="col-sm-6 smallpad">
16-
<button type="button" class="btn btn-primary btn-block" id="add" @click="add">Append 1,000 rows</button>
17-
</div>
18-
<div class="col-sm-6 smallpad">
19-
<button type="button" class="btn btn-primary btn-block" id="update" @click="update">Update every 10th row</button>
20-
</div>
21-
<div class="col-sm-6 smallpad">
22-
<button type="button" class="btn btn-primary btn-block" id="clear" @click="clear">Clear</button>
23-
</div>
24-
<div class="col-sm-6 smallpad">
25-
<button type="button" class="btn btn-primary btn-block" id="swaprows" @click="swapRows">Swap Rows</button>
26-
</div>
27-
</div>
28-
</div>
29-
</div>
30-
</div>
31-
<table class="table table-hover table-striped test-data">
32-
<tbody>
33-
<tr
34-
v-for="row in rows"
35-
:key="row.id"
36-
:class="{'danger': row.id === selected}">
37-
<td class="col-md-1">{{row.id}}</td>
38-
<td class="col-md-4">
39-
<a @click="select(row.id)">{{row.label}}</a>
40-
</td>
41-
<td class="col-md-1">
42-
<a @click="remove(row.id)">
43-
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
44-
</a>
45-
</td>
46-
<td class="col-md-6"></td>
47-
</tr>
48-
</tbody>
49-
</table>
50-
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
51-
</template>
52-
53-
<script>
54-
import { ref, markRaw } from 'vue';
55-
56-
let ID = 1;
57-
let startTime;
58-
let lastMeasure;
1+
<script setup>
2+
import { ref, shallowRef } from 'vue'
3+
import { buildData } from './data'
594
5+
const selected = ref()
6+
const rows = shallowRef([])
607
61-
const startMeasure = function(name) {
62-
startTime = performance.now();
63-
lastMeasure = name;
64-
};
65-
const stopMeasure = function() {
66-
const last = lastMeasure;
67-
if (lastMeasure) {
68-
window.setTimeout(function () {
69-
lastMeasure = null;
70-
const stop = performance.now();
71-
console.log(last+" took "+(stop-startTime));
72-
}, 0);
73-
}
74-
};
75-
76-
function _random(max) {
77-
return Math.round(Math.random()*1000)%max;
8+
function setRows(update = rows.value.slice()) {
9+
rows.value = update
7810
}
7911
80-
function buildData(count = 1000) {
81-
const adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
82-
const colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
83-
const nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
84-
const data = [];
85-
for (let i = 0; i < count; i++)
86-
data.push({id: ID++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
87-
return data;
12+
function add() {
13+
rows.value = rows.value.concat(buildData(1000))
8814
}
8915
90-
export default {
91-
setup() {
92-
const selected = ref(null);
93-
const rows = ref([]);
94-
95-
function setRows(update = rows.value.slice()) {
96-
rows.value = markRaw(update)
97-
}
98-
99-
function add() {
100-
startMeasure("add");
101-
setRows(rows.value.concat(buildData(1000)));
102-
stopMeasure();
103-
}
104-
105-
function remove(id) {
106-
startMeasure("remove");
107-
rows.value.splice(rows.value.findIndex(d => d.id === id), 1);
108-
setRows();
109-
stopMeasure();
110-
}
111-
112-
function select(id) {
113-
startMeasure("select");
114-
selected.value = id;
115-
stopMeasure();
116-
}
117-
118-
function run() {
119-
startMeasure("run");
120-
setRows(buildData());
121-
selected.value = undefined;
122-
stopMeasure();
123-
}
124-
125-
function update() {
126-
startMeasure("update");
127-
for (let i = 0; i < rows.value.length; i += 10) {
128-
rows.value[i].label += ' !!!';
129-
}
130-
setRows();
131-
stopMeasure();
132-
}
133-
134-
function runLots() {
135-
startMeasure("runLots");
136-
setRows(buildData(10000));
137-
selected.value = undefined;
138-
stopMeasure();
139-
}
16+
function remove(id) {
17+
rows.value.splice(
18+
rows.value.findIndex((d) => d.id === id),
19+
1
20+
)
21+
setRows()
22+
}
14023
141-
function clear() {
142-
startMeasure("clear");
143-
setRows([]);
144-
selected.value = undefined;
145-
stopMeasure();
146-
}
24+
function select(id) {
25+
selected.value = id
26+
}
14727
148-
function swapRows() {
149-
startMeasure("swapRows");
28+
function run() {
29+
setRows(buildData())
30+
selected.value = undefined
31+
}
15032
151-
if (rows.value.length > 998) {
152-
const d1 = rows.value[1];
153-
const d998 = rows.value[998];
33+
function update() {
34+
const _rows = rows.value
35+
for (let i = 0; i < _rows.length; i += 10) {
36+
_rows[i].label += ' !!!'
37+
}
38+
setRows()
39+
}
15440
155-
rows.value[1] = d998;
156-
rows.value[998] = d1;
41+
function runLots() {
42+
setRows(buildData(10000))
43+
selected.value = undefined
44+
}
15745
158-
setRows();
159-
}
160-
stopMeasure();
161-
}
46+
function clear() {
47+
setRows([])
48+
selected.value = undefined
49+
}
16250
163-
return {
164-
rows,
165-
selected,
166-
run,
167-
clear,
168-
swapRows,
169-
runLots,
170-
update,
171-
select,
172-
remove,
173-
add,
174-
}
175-
}
51+
function swapRows() {
52+
const _rows = rows.value
53+
if (_rows.length > 998) {
54+
const d1 = _rows[1]
55+
const d998 = _rows[998]
56+
_rows[1] = d998
57+
_rows[998] = d1
58+
setRows()
59+
}
17660
}
17761
</script>
62+
63+
<template>
64+
<div class="jumbotron">
65+
<div class="row">
66+
<div class="col-md-6">
67+
<h1>Vue.js 3 (keyed)</h1>
68+
</div>
69+
<div class="col-md-6">
70+
<div class="row">
71+
<div class="col-sm-6 smallpad">
72+
<button
73+
type="button"
74+
class="btn btn-primary btn-block"
75+
id="run"
76+
@click="run"
77+
>
78+
Create 1,000 rows
79+
</button>
80+
</div>
81+
<div class="col-sm-6 smallpad">
82+
<button
83+
type="button"
84+
class="btn btn-primary btn-block"
85+
id="runlots"
86+
@click="runLots"
87+
>
88+
Create 10,000 rows
89+
</button>
90+
</div>
91+
<div class="col-sm-6 smallpad">
92+
<button
93+
type="button"
94+
class="btn btn-primary btn-block"
95+
id="add"
96+
@click="add"
97+
>
98+
Append 1,000 rows
99+
</button>
100+
</div>
101+
<div class="col-sm-6 smallpad">
102+
<button
103+
type="button"
104+
class="btn btn-primary btn-block"
105+
id="update"
106+
@click="update"
107+
>
108+
Update every 10th row
109+
</button>
110+
</div>
111+
<div class="col-sm-6 smallpad">
112+
<button
113+
type="button"
114+
class="btn btn-primary btn-block"
115+
id="clear"
116+
@click="clear"
117+
>
118+
Clear
119+
</button>
120+
</div>
121+
<div class="col-sm-6 smallpad">
122+
<button
123+
type="button"
124+
class="btn btn-primary btn-block"
125+
id="swaprows"
126+
@click="swapRows"
127+
>
128+
Swap Rows
129+
</button>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
<table class="table table-hover table-striped test-data">
136+
<tbody>
137+
<tr
138+
v-for="{ id, label } of rows"
139+
:key="id"
140+
:class="{ danger: id === selected }"
141+
:data-label="label"
142+
v-memo="[label, id === selected]"
143+
>
144+
<td class="col-md-1">{{ id }}</td>
145+
<td class="col-md-4">
146+
<a @click="select(id)">{{ label }}</a>
147+
</td>
148+
<td class="col-md-1">
149+
<a @click="remove(id)">
150+
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
151+
</a>
152+
</td>
153+
<td class="col-md-6"></td>
154+
</tr>
155+
</tbody>
156+
</table>
157+
<span
158+
class="preloadicon glyphicon glyphicon-remove"
159+
aria-hidden="true"
160+
></span>
161+
</template>

0 commit comments

Comments
 (0)