The lifecycle of functions in Vue3 templates - vue.js

Question

This may be the minimal reproduction of my problem
<template>
<span class='current-page'>
{{ get_page_param('current') }}
</span>
</template>
const get_page_param = function(direction) {
// TODO: need delete the comment
console.log(`get_page_param(${direction}) is calling`);
try {
let url_string = null;
switch (direction) {
case 'next':
url_string = info.value.next;
break;
case 'previous':
url_string = info.value.previous;
break;
default:
return route.query.page;
}
const url = new URL(url_string);
return url.searchParams.get('page');
} catch (err) {
console.log(err);
}
};
onBeforeMount(()=>{
console.log('before mounting');
axios
.get('/api/article')
.then(response => {
info.value = response.data;
});
})
onMounted(() => {
console.log('mounted');
});
When I run this code, I see get_page_param(current) is calling is printed twice in the browser's console, and both of them happen before mounting, and the second is printed after mounted
my question is
Why this function called twice
If the first call is for rendering templates, what is the reason of the second
I checked Vue's official documentation about lifecycle hooks https://cn.vuejs.org/api/composition-api-lifecycle.html#onupdated, but I still don't understand why the page will be execute the function twice during the rendering process. I think it may be front-end related knowledge, but I haven't understood it

Answer 1

The reason why the rendering is called twice is related to the lifecycle of vue components. Vue will always render the component, when a reactive value changes. As you use a function inside a template, this will be called on each render cycle of the component.
In your example the info.value update will trigger a rerender. Also if using a function, vue needs to allways trigger a rerender if you change any reactive value.
That is also why you should not use functions inside the template. Whenever possible you should use computed properties and apply it inside the template. The advantage is, that vue will internally cache the value of the computed property and only update the component, if some of the values you use inside is updated.
You should make sure, you understand how the vue lifecycle works.
A better approach would be to use a computed property that is rendered inside your template. The following shows an example that might work for you.
const direction = ref('');
const pageParam = computed(() => {
try {
let url_string = null;
switch (direction.value) {
case 'next':
url_string = info.value.next;
break;
case 'previous':
url_string = info.value.previous;
break;
default:
return route.query.page;
}
const url = new URL(url_string);
return url.searchParams.get('page');
} catch (err) {
console.log(err);
return '1'; // you need to return the fallback page
}
});
Inside the template you use
<template>
<span class='current-page'>
{{ pageParam }}
</span>
</template>