在vue3中，当要被更改的内容处于一个组件的插槽内时，插槽里的dom元素身上的数据更新时，将不会触发onBeforeUpdate与onUpdate钩子函数。
    如下：

    1. <template>
    2.   <AConfigProvider :locale="zhCN">
    3.     <nav>
    4.       <router-link to="/">Home</router-link> |
    5.       <router-link to="/about">About</router-link>
    6.     </nav>
    7.     <router-view />
    9.     <div class="p-4">
    10.       <h1>{{ count }}</h1>
    11.       <button @click="count++">修改</button>
    12.     </div>
    13.   </AConfigProvider>
    14. </template>
    16. <script setup lang="ts">
    17.   import zhCN from 'ant-design-vue/es/locale/zh_CN';
    18.   import dayjs from 'dayjs';
    19.   import 'dayjs/locale/zh-cn';
    20.   import { ref, onBeforeUpdate, onUpdated } from 'vue';
    22.   dayjs.locale('en');
    24.   const count = ref(0);
    26.   onBeforeUpdate(() => {
    27.     console.log('1 update');
    28.   });
    30.   onUpdated(() => {
    31.     console.log('onUpdated');
    32.   });
    33. </script>
    35. <style lang="less"></style>

    image.png
    将需要变更的dom元素我们放到了AConfigProvider组件的默认插槽中了，我们发现当去更新count值时，此函数不会被触发。

    将此dom元素迁出组件插槽的范围：
    image.png
    image.png
    我们发现正常了。

    此点需要提别注意，那么我们就是需要将需要变动数据的dom需要放到元素的插槽内，该怎么监听它的更新呢？
    此时我们用vue2就用过（很少人用过）的监听钩子的执行方法：

    在组建身上监听 比如：@vnode-before-update监听此组件更新前。