I have a simple app with three things:

• counter
• button that increases counter
• onBeforeUpdate and onUpdate hooks

VERY IMPORTANT: I tried to replicate this on a pure Vue Vite project and I had NO problem there. The onBeforeUpdate and onUpdate hooks did trigger, so I must be Quasar specific or I must be missing something.

Project: When I press the increase button the onBeforeUpdate and onUpdate hooks DON'T trigger (they should just do some console.log)

Reproduction URL

https://stackblitz.com/edit/quasarframework-aj9suk?file=src/pages/IndexPage.vue

How to reproduce?

1. Go to link and wait until the project loads (you see text and btn)
2. Open console (F12 or Right click and Inspect)
3. Click the button, counter should increase, but the methods won't trigger

Relevant packages:

• NodeJs - 16.15.0
• NPM - 8.19.2
• quasar - 2.8.3
• @quasar/app-vite - 1.1.1
• vue - 3.2.39
• vue-router - 4.1.5

Code:

<template>
  <q-page >
    <div >
      Open console, you will see that onBeforeUpdate and onUpdated are not being
      triggered when counter is being changed
    </div>
    <div>{{ counter }}</div>
    <button @click="counter  ">Increase</button>
  </q-page>
</template>

<script>
import {
  ref,
  onUpdated,
  onBeforeUpdate,
} from 'vue';
export default {
  setup() {
    const increaseCounter = () => {
      counter.value  ;
    };
    let counter = ref(1);

    onBeforeUpdate(() => {
      debugger;
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      debugger;
      console.log('onBeforeUpdate');
    });
    console.log('setup');

    return {
      increaseCounter,
      counter
    };
  },
};
</script>

CodePudding user response：

Since you are rendering your variable inside the q-page component so the hook of the parent component will not be triggered. Let's consider this example

<!-- App.vue -->
<script setup>
import { ref } from 'vue'
import { onUpdated } from 'vue'
import Test from './Test.vue'

const counter1 = ref(1)
const counter2 = ref(2)
onUpdated(() => {
  console.log('on updated')
})
</script>

<template>
  <Test>
    Counter 1: {{ counter1 }} <br />
    Counter 2: {{ counter2 }} <br />
  </Test>
  <br />
  Counter 1: {{ counter1 }} <br />
  <button @click="counter1  ">Increase counter 1</button>
  <button @click="counter2  ">Increase counter 2</button>
</template>

<!-- Test.vue -->
<template>
  <div >
    <h1>Test component</h1>
    <slot></slot>
  </div>
</template>

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('on updated inside test component')
})
</script>

When you click on the Increase counter 1 button the hook onUpdated will be triggered in both App.vue and Test.vue.

But when you click on the Increase counter 2 button, the hook onUpdated will be triggered in only the Test.vue component. Because the counter1 variable is rendered inside both App.vue and Test.vue components. And the counter2 variable is rendered only inside the Test.vue components