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

    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 />
    8. <div class="p-4">
    9. <h1>{{ count }}</h1>
    10. <button @click="count++">修改</button>
    11. </div>
    12. </AConfigProvider>
    13. </template>
    14. <script setup lang="ts">
    15. import zhCN from 'ant-design-vue/es/locale/zh_CN';
    16. import dayjs from 'dayjs';
    17. import 'dayjs/locale/zh-cn';
    18. import { ref, onBeforeUpdate, onUpdated } from 'vue';
    19. dayjs.locale('en');
    20. const count = ref(0);
    21. onBeforeUpdate(() => {
    22. console.log('1 update');
    23. });
    24. onUpdated(() => {
    25. console.log('onUpdated');
    26. });
    27. </script>
    28. <style lang="less"></style>

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

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

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

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