CODEWITHSUNDEEP
javascriptvue.jsstring-interpolation
CMTV
CMTV

Reputation: 2851

Vue text interpolation watches all elements?

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?

Upvotes: 0

Views: 21

Answers (0)

Related Questions