Quasar Vue项目中onBeforeUpdate与onUpdate钩子未触发问题

我开发了一个简单应用，包含计数器、递增按钮，以及Vue的onBeforeUpdate和onUpdated钩子。在纯Vue Vite项目中这些钩子能正常触发，但在Quasar项目里，点击递增按钮时counter数值正常增加，却无法触发钩子的console.log输出。

重现步骤 #

• 启动Quasar项目并等待加载完成
• 打开浏览器控制台（F12或右键审查元素）
• 点击递增按钮，counter数值递增，但钩子方法无任何输出

相关依赖版本 #

• 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

问题代码 #

<template>
  <q-page class="flex flex-center">
    <div class="q-pa-lg">
      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>

解决方案 #

方案1：切换到<script setup>语法 #

将组件的script部分改为<script setup>，这种写法在Quasar环境中能正常触发Vue的生命周期钩子：

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

<script setup>
import { ref, onUpdated, onBeforeUpdate } from 'vue';

const counter = ref(1);

onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
});
onUpdated(() => {
  console.log('onUpdated'); // 修正原代码中的笔误
});
</script>

方案2：使用选项式API的生命周期钩子 #

如果偏好选项式API写法，可以直接在组件选项中声明钩子，而非在setup函数中注册：

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

<script>
export default {
  data() {
    return {
      counter: 1
    };
  },
  onBeforeUpdate() {
    console.log('onBeforeUpdate');
  },
  onUpdated() {
    console.log('onUpdated');
  }
};
</script>

方案3：升级@quasar/app-vite版本 #

当前使用的@quasar/app-vite@1.1.1存在与Vue生命周期钩子相关的兼容性问题，升级到最新稳定版本可解决该问题：

npm install @quasar/app-vite@latest

内容的提问来源于stack exchange，提问作者Pero122