Skip to content

Commit

Permalink
fixup! [REMOVE ME] - performance test in docs
Browse files Browse the repository at this point in the history
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
  • Loading branch information
ShGKme committed Aug 29, 2023
1 parent 87dc541 commit 5ad5179
Showing 1 changed file with 44 additions and 0 deletions.
44 changes: 44 additions & 0 deletions src/components/NcEmojiPicker/NcEmojiPicker.vue
Expand Up @@ -121,6 +121,50 @@ This component allows the user to pick an emoji.
</script>
```

### Performance test - mounting

```vue
<template>
<div>
<button @click="key += 1">Re-mount {{ count }} NcEmojiPicker-s</button> See console output for the result
<ul :key="key">
<li v-for="i in count" :key="i">
<span>#{{ i }}</span>
<NcEmojiPicker @select="select" style="display: inline-block">
<NcButton>Select Emoji</NcButton>
</NcEmojiPicker>
<span>selected emoji: {{ emoji }}</span>
</li>
</ul>
</div>
</template>
<script>
let time;
export default {
data() {
return {
count: 100,
emoji: '',
key: 1,
}
},
beforeUpdate() {
time = performance.now()
},
updated() {
const allTime = performance.now() - time
console.log(`NcEmojiPicker ${this.count} instances re-mounting time: ${allTime.toFixed(2)} ms or ${(allTime / this.count).toFixed(2)} ms per instance`)
},
methods: {
select(emoji) {
this.emoji = emoji
},
},
}
</script>
```

</docs>

<template>
Expand Down

0 comments on commit 5ad5179

Please sign in to comment.