Vuejs2 如何对vuejs中两个或多个关注属性的更改作出一次反应

有很多这样的用例，但我正在处理的一个如下。我有一个带有表的页面和两个数据属性，“页面”和“过滤器”。当这两个变量中的任何一个被更新时，我需要再次从服务器获取结果

然而，据我所知，没有办法只观察两个变量并做出一次反应，特别是在复杂的实例中，更新过滤器应该将页面重置为零

javascript

data: {
  return {
    page: 0,
    filters: {
      searchText: '',
      date: ''
    }
  }
},
watch: {
  page (nv) {
    this.fetchAPI()
  },
  filters: {
    deep: true,
    handler (nv) {
      this.page = 0
      this.fetchAPI()
    }
  }
},
methods: {
  fetchAPI () {
    // fetch data via axios here
  }
}

若我更新过滤器，它会将页面重置为0并调用fetchAPI（）两次。然而，这似乎是最直观的方式，有一个表在它的页面？过滤器应该将页面重置为零，因为您可能在第500页，然后您的过滤器会导致只有1页的结果，对页面或过滤器的更改必须再次调用api

---

想知道其他人是如何应对同样的问题的吗？

考虑一下规则-观察者是“最后的希望”。除非你有其他方法，否则你不能使用它们

在您的情况下，可以使用事件。这样，问题将自行解决：

将

@click=“onPageChange”

事件添加到

页面

按钮（或您使用的任何内容）

将

@change=“onFilterChange”

事件添加到

过滤器

组件（或您使用的任何组件）。您还可以将

@click=“onFilterChange”

与一些附加代码一起使用，以检测更改。不过，我很确定在

过滤器
组件上必须有类似
@change
的东西

然后，您的代码将如下所示：

data: {
  return {
    page: 0,
    filters: {
      searchText: '',
      date: ''
    }
  }
},
methods: {
  onPageChange () {
    this.fetchAPI()
  },
  onFilterChange () {
    this.page = 0
    this.fetchAPI()
  },
  fetchAPI () {
    // fetch data via axios here
  }
}

在这种情况下，
onFilterChange
将更改
page
数据，但不会触发
onPageChange
方法。因此，您的问题将不存在。
因为filters对象非常复杂，并且有许多选项，所以我决定将其保留在一个监视程序中，该监视程序将触发将页面设置为零并重新加载api。我现在解决问题如下所述。“pauseWatcher”数据变量有点凌乱，需要在nextTick中禁用它似乎不太划算，但不必手动连接每个过滤器输入（其中一些比一个输入复杂得多，比如两个日期之间的日期过滤器）的代价很小并让它们各自发出onChange事件，触发重新加载api。看起来悲哀的是，Vuejs没有一个生命周期钩子，在这个钩子中，您可以访问数据属性，也许还可以路由参数，并在监视程序和计算属性打开之前对其进行最终更改

data: {
  return {
    pauseWatcher: true,
    page: 0,
    filters: {
      searchText: '',
      date: ''
    }
  }
},
watch: {
  filters: {
    deep: true,
    handler (nv) {
      if (this.pauseWatcher) {
        return
      }
      this.page = 0
      this.fetchAPI()
    }
  }
},
methods: {
  fetchAPI () {
    // fetch data via axios here
  },
  goToPage(page) {
    this.page = page
    this.fetchAPI()
  },
  decodeFilters () {
    // decode filters from base64 URL string
  }
},
created () {
  this.pauseWatcher = true
  this.page = Number(this.$route.query.page) || 0
  this.filters = this.decodeFilters(this.$route.query.filters)
  this.$nextTick(() => {
    this.pauseWatcher = false
  })
}

当只有
页面
更改时，为什么需要获取数据？似乎
page
是表格的页面吗？是的，页面是表格的页面，因此仅显示1000行中的50-100行，例如，使您的
fetchAPI
a或函数？在您的情况下，当
过滤器
更改时，您可以将页面设置为
0
，因为这将自动从
页面
的监视处理程序调用
fetchAPI
。因此，无需显式调用fetch-in-filter-change。我可以从过滤器组件发出onChange事件，但老实说，我只是在那里观察过滤器项，并在深度观察程序检测到更改时发出更改。vuejs中的整个要点似乎是数据反应性，因此这种观察所有这些单独事件的方法似乎有点过时，而不是vuejs和反应性编程旨在改变事情的方式？我的过滤器组件非常复杂，有30多个过滤器，这就是为什么我试图通过观察一个父变量“filters”和deepflag来完成它，您可以在fetchapi上添加状态。因此，如果fetching处于“fetching”状态，则不要再次调用它。此外，如果结果比500毫秒更新，则不要再次获取。您需要向
fetchAPI
函数和axious回调添加一些代码来实现这一点。