Vue3 Mounted() 被多次调用

Question

我有一个 vue 模板，其中有一个表格呈现数组的所有项目，看起来很像这样：

<template>
    <thead>
        my table heads...
    </thead>
    <tr v-for="item in items"
        my items
    </tr> 
</template>

我有一个函数可以让我过滤数据库并替换项目数组的值。我的脚本标签如下所示：

<script>
    data(){
        return: {
            items: []
        }
    },
    methods: {
        async getList(){
            here i do my query...
                .then(this.items = response.data)
        },

        async filter(){
           here i do my query with my filterObj...
                .then(this.items = response.data)
        },
    async mounted(){
        this.getList()
    }

这个效果很好。我开始过滤，vue 的 reactiviy 自动用新数据重新加载我的表。问题是我注意到有时过滤器会“自行取消”并调用“getList”函数。我在该函数上添加了一个 console.log() ，我注意到首次加载页面时它会被调用 7-8 次，并且在应用过滤器后有时会随机调用它。有什么想法吗？

我读到了这个：https://github.com/vitejs/vite/issues/9231 我是用vite来编译的。这可能是我的问题吗？任何人都可以在项目中重现这个吗？

我注意到 Mounted() 属性中的函数被调用了几次

Answer 1

谢谢大家，我知道发生了什么事，我想让这个，因为它可能会帮助像我这样的菜鸟在未来

我在每个表格行上调用了一个组件，因此您可以单击它们并打开该对话框。问题是，由于某种原因，我在该组件上在 Mounted() 对象上调用了 $emit 。可能是我测试的时候忘记删掉了。这个 $emit 配置为触发我在父组件上的 Mounted() 对象上的函数，因此看起来它被调用了几次。太蠢了

谢谢大家的帮助