Consider the following simple example.
Two counters are rendering, once with ref
that gets updated every second and one static:
<script setup>
import { onMounted } from 'vue';
import { ref } from 'vue'
let staticNumber = 0;
const dynamicNumber = ref(0);
onMounted(() => {
setInterval(() => dynamicNumber.value++, 1000);
setTimeout(() => staticNumber = 10);
});
</script>
<template>
<h1>This should update every second {{ dynamicNumber }}</h1>
<h1>This should not update at all! {{ staticNumber }}</h1>
</template>
The problem is, after one second pass, the second h1
tag which initially was 0
gets updated and showing 10
.
Why? Why Vue is even checking non-ref value and updates them?
I am concerned because on my site I want to support multiple languages so basically the template would look like this:
<template>
<h1>{{ phrase.greetings }}</h1> <!-- Should be static -->
<p>{{ phrase.x_visitors(numberOfVisitors) }}</p> <!-- Should be updating -->
<p>{{ phrase.site_description }}</p> <!-- Should be static -->
</template>
But with the behaviour I metioned above it means every time I update numberOfVisitors
variable it will also update all the other elements with text interpolation on the whole site!
Does this mean it will lag and freeze every time something updates?