我有一个简单的应用程序，有三个功能：

• 计数器
• 增加计数器的按钮
• onBeforeUpdate和onUpdate挂接
  非常重要：我试着在一个纯Vue Vite项目上复制这个，我在那里没有问题。OnBeforeUpdate和OnUpdate钩子确实触发了，所以我必须是Quasar特定的，否则我一定遗漏了什么。

项目：x1c 0d1x当我按下增加按钮时，onBeforeUpdate和onUpdate钩子不会触发（它们应该只执行一些console.log）

复制URL

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

如何复制？

1.转到链接，等待直到项目加载（你看到文本和btn）
1.打开控制台（F12或右键单击并检查）
1.单击按钮，计数器应增加，但方法不会触发

相关软件包：

• 节点J- 16.15.0
• 国家预防机制- 8.19.2
• 类星体-2.8.3
• @类星体/应用程序-vite- 1.1.1
• 版本-3.2.39
• vue-路由器-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>