Vue：如何创建未被引用但依赖变化时自动触发的虚拟计算属性？

嘿，这个问题我之前也碰到过，你想用响应式机制替代重复的@change指令这个思路特别棒，只是那个隐藏div的临时方案确实有点hacky——毕竟Vue的计算属性是惰性求值的，只有当它被模板引用或者在其他响应式上下文里被调用时，才会触发依赖追踪和重新计算，没被引用的计算属性自然不会运行。

下面给你几个更贴合Vue设计理念的实现方式：

1. 监听统一的参数对象（Vue2/Vue3通用） #

把所有查询参数打包到一个单独的data对象里，比如queryParams，然后用watch开启深度监听，只要任何参数改动就触发数据更新：

<script>
export default {
  data() {
    return {
      queryParams: {
        keyword: '',
        category: '',
        status: ''
        // 所有表单控件对应的参数都放这里
      }
    }
  },
  watch: {
    queryParams: {
      deep: true,
      handler() {
        this.updateTable()
      },
      // 如果页面加载时需要初始化数据，加上这个配置
      immediate: true
    }
  },
  methods: {
    async updateTable() {
      const data = await this.$axios.get('/api/data', { params: this.queryParams })
      this.$emit('update-data', data)
    }
  }
}
</script>

<template>
  <input v-model="queryParams.keyword" />
  <select v-model="queryParams.category">...</select>
  <!-- 其他表单控件直接绑定到queryParams属性，不用加@change -->
  <ChildComponent :data="tableData" />
</template>

这种方式把参数统一管理，监听逻辑集中，彻底摆脱了重复指令的困扰。

2. 使用watchEffect（Vue3专属） #

Vue3的watchEffect会自动追踪你在回调里用到的所有响应式变量，只要这些变量变化，回调就会执行，完全不用手动指定依赖，简洁到飞起：

<script setup>
import { ref, watchEffect } from 'vue'
import axios from 'axios'

const queryParams = ref({
  keyword: '',
  category: '',
  status: ''
})
const tableData = ref([])
const emit = defineEmits(['update-data'])

// 自动追踪queryParams的所有属性变化，初始化时也会执行一次
watchEffect(async () => {
  const res = await axios.get('/api/data', { params: queryParams.value })
  tableData.value = res.data
  emit('update-data', tableData.value)
})
</script>

<template>
  <input v-model="queryParams.keyword" />
  <select v-model="queryParams.category">...</select>
  <ChildComponent :data="tableData" />
</template>

watchEffect天生支持初始化执行，刚好满足页面加载时的初始数据请求需求，省了额外的初始化逻辑。

3. 关于“虚拟计算属性”的补充说明 #

如果你还是想尝试计算属性的思路，其实可以不在模板里引用它，而是在created钩子主动调用一次来触发依赖追踪，但这种方式属于“滥用”计算属性——因为计算属性的设计目的是派生状态，不是用来执行AJAX这类副作用，所以不推荐：

<script>
export default {
  data() {
    return {
      keyword: '',
      category: ''
    }
  },
  computed: {
    dummyProp() {
      // 引用所有需要监听的参数，触发依赖追踪
      const params = { keyword: this.keyword, category: this.category }
      this.updateTable(params)
      return null // 返回无关值，因为我们不需要用这个属性
    }
  },
  created() {
    // 主动调用一次，启动依赖追踪
    this.dummyProp
  },
  methods: {
    async updateTable(params) {
      const data = await this.$axios.get('/api/data', { params })
      this.$emit('update-data', data)
    }
  }
}
</script>

总结一下：最推荐的是Vue3用watchEffect，Vue2用深度监听参数对象，这两种方式都符合Vue的响应式设计逻辑，比隐藏div的hack方式优雅太多。

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