Why did you update
Tools to help you improve performance of your Vue application.
Usage
If we want to know how many times that (one of or all of) watch or computed has been updated or how long does they take. We can use whyDidYouUpdate.
For example, We have a demo project. And the major component is:
<script setup lang="ts">
import { watch, computed, ref } from "@vue/composition-api";
const sleep = (n: number) => new Promise(resolve => setTimeout(resolve, n))
const msg = ref(0);
const plusOne = computed(() => {
return msg.value + 1;
});
const plusTwo = ref(msg.value);
watch(
() => plusOne.value,
(one) => {
plusTwo.value = one + 1;
}
);
const plusTwoAfterOneSecond = ref(msg.value);
watch(
() => plusOne.value,
async (one) => {
await sleep(1000)
plusTwoAfterOneSecond.value = one + 1;
}
);
</script>
<template>
<div class="hello">
<p>value: {{ msg }}</p>
<p>value plus one: {{ plusOne }}</p>
<p>value plus two: {{ plusTwo }}</p>
<p>value plus two after one second: {{ plusTwoAfterOneSecond }}</p>
<button @click="msg++">Plus</button>
</div>
</template>
If we click Start in devtools panel. And then click Plus button a few times. And then click End in devtools panel. We can see the result:
In above table, you can see how many times watch or computed has been called and how long it has been running. We can use those information to find out which watch or computed has useless/repeated/unexpected calls and which watch or computed is the bottleneck of performance.
FPM
You can also use Reload and Start (in the dropdown) to monit your app when it first render.
Install
yarn add babel-plugin-why-did-you-update.- add
why-did-you-updateto your babel config file.
// babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: ["why-did-you-update"],
};
- Install Chrome extension WhyDidYouUpdate
- For nightly version, youcan unzip extension and load it in Chrome.
- You can download nightly build of Chrome extension at CI artifacts.
- For nightly version, youcan unzip extension and load it in Chrome.
- Build or serve your project.
- Open your project with Chrome.
- Open
why did you updatetab in Chrome devtools. - Click
Start - Do something in your page.
- Click
Stop. - Here we go.
2 Nov 11, 2022
40 Dec 28, 2022
3 Oct 4, 2022
5 Dec 8, 2022
25 Nov 17, 2022
34 Dec 12, 2022
9 Dec 17, 2022
22 Aug 14, 2022
9 Jan 1, 2023
4 Dec 21, 2022