如何避免Vue组件中getList()随v-model变更重复执行？

问题根源 #

你遇到的核心问题是：模板中直接绑定方法到items属性（:items="getList()"）会在组件每次重渲染时执行该方法。Vue的响应式系统中，只要组件内任何响应式数据（比如其他输入框的v-model）发生变化，都会触发组件重渲染，进而反复调用getList()，导致大量重复API请求拖慢页面。

针对性解决方案 #

1. 无依赖的下拉选项：初始化一次性加载

如果下拉选项不依赖其他表单字段，直接在组件初始化时请求一次数据，存到data变量中，再绑定到items：

<template>
  <v-autocomplete
    label="独立下拉"
    :items="staticOptions"
    v-model="selectedValue"
  />
</template>

<script>
export default {
  data() {
    return {
      staticOptions: [],
      selectedValue: ''
    }
  },
  async mounted() {
    // 仅在组件挂载时请求一次API
    const res = await fetch('/api/static-options')
    this.staticOptions = await res.json()
  }
}
</script>

2. 依赖其他字段的下拉选项：Watch监听+缓存机制

当下拉选项依赖其他表单值时，用watch监听依赖字段的变化，仅在该字段变更时才发起API请求，同时加入缓存避免重复请求相同参数：

<template>
  <v-container>
    <v-autocomplete
      label="父选项"
      :items="parentOptions"
      v-model="parentValue"
    />
    <v-autocomplete
      label="依赖父选项的子下拉"
      :items="childOptions"
      v-model="childValue"
      :loading="isChildLoading"
    />
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      parentValue: '',
      childValue: '',
      parentOptions: ['A', 'B'],
      childOptions: [],
      isChildLoading: false,
      // 缓存已请求过的结果，避免重复请求
      optionCache: {}
    }
  },
  watch: {
    async parentValue(newVal) {
      if (!newVal) {
        this.childOptions = []
        return
      }
      
      // 先查缓存，存在则直接复用
      if (this.optionCache[newVal]) {
        this.childOptions = this.optionCache[newVal]
        return
      }

      // 无缓存时发起API请求
      this.isChildLoading = true
      try {
        const res = await fetch(`/api/child-options?parent=${newVal}`)
        const options = await res.json()
        this.childOptions = options
        this.optionCache[newVal] = options
      } catch (err) {
        console.error('请求子选项失败:', err)
      } finally {
        this.isChildLoading = false
      }
    }
  }
}
</script>

3. 结合计算属性处理同步逻辑

如果下拉选项的逻辑是同步的（比如根据父选项值直接返回固定列表），可以用计算属性替代方法——计算属性会基于依赖的响应式数据缓存结果，仅当依赖变化时才重新计算：

<template>
  <v-autocomplete
    label="依赖父选项的下拉"
    :items="computedChildOptions"
    v-model="childValue"
  />
</template>

<script>
export default {
  data() {
    return {
      parentValue: '',
      childValue: ''
    }
  },
  computed: {
    computedChildOptions() {
      switch (this.parentValue) {
        case 'A':
          return ['x', 'y', 'z']
        case 'B':
          return ['q', 'r', 's']
        default:
          return []
      }
    }
  }
}
</script>

关键原则 #

永远不要在模板的属性绑定中直接调用方法（比如:items="getList()"），这是Vue开发中的常见性能陷阱。所有需要动态生成的列表，都应该通过计算属性或data变量+watch监听来实现，确保仅在必要时更新数据。

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