vue如何判断请求数据是否发生改变

Vue可以通过使用computed属性或watch属性来判断请求数据是否发生改变。

1. 使用computed属性

computed属性可以根据响应式数据计算出一个新的值，如果请求数据发生改变，则计算结果也会发生改变。因此，我们可以在computed属性中计算请求数据的哈希值，并将其保存在一个变量中，然后在页面渲染时与上一次的哈希值进行比较，如果不相同，则说明请求数据发生了改变。

例如：

computed: {
  requestHash() {
    return JSON.stringify(this.requestData)
  }
}

2. 使用watch属性

watch属性可以监听数据的变化，并在数据变化时执行相应的操作。我们可以在watch属性中监听请求数据的变化，并在数据变化时记录一个标志位，然后在页面渲染时判断标志位是否发生改变，如果发生改变，则说明请求数据发生了改变。

例如：

watch: {
  requestData: {
    handler(val) {
      this.requestDataChanged = true
    },
    deep: true
  }
}

在以上示例中，我们使用了深度监听来监听requestData对象的变化，并在handler函数中将requestDataChanged标志位设置为true。在页面渲染时，我们可以通过判断requestDataChanged标志位是否为true来判断请求数据是否发生了改变。

相关问题

vue3当请求的数据发生变化时自动刷新页面

在Vue3中，当请求的数据发生变化时，可以通过`watch` API来实现自动刷新页面。`watch`可以监听一个响应式数据的变化，并在数据变化时执行回调函数。

以下是一个示例代码，当请求的数据`data`发生变化时，会自动刷新页面：

<template>
  <div v-for="item in data" :key="item.id">{{ item.name }}</div>
</template>

<script>
  import { reactive, watch } from 'vue'
  import axios from 'axios'

  export default {
    setup() {
      const state = reactive({
        data: []
      })

      const fetchData = async () => {
        const res = await axios.get('/api/data')
        state.data = res.data
      }

      fetchData()

      watch(() => state.data, () => {
        console.log('data changed')
        // 执行一些更新页面的操作
      })

      return {
        data: state.data
      }
    }
  }
</script>

在上面的代码中，我们使用了`watch` API监听了`data`的变化，当`data`发生变化时会执行回调函数并输出一条日志。在回调函数中可以执行一些更新页面的操作，例如重新渲染组件、修改页面中的文本内容等等，从而实现自动刷新页面的效果。

vue2 监听数据 改变重新请求

可以通过监听 Vue 实例的 data 属性来实现数据改变后重新请求的效果。

具体实现可以参考以下步骤：

1. 在 Vue 实例中定义需要监听的数据变量，例如：

data() {
  return {
    keyword: '',
    searchResult: []
  }
}

2. 监听数据变化，当 `keyword` 发生改变时，重新请求数据：

watch: {
  keyword: function(newKeyword, oldKeyword) {
    // 发送请求获取数据
    this.$http.get('/api/search', { params: { keyword: newKeyword }})
      .then(response => {
        this.searchResult = response.data
      })
  }
}

在上述代码中，使用了 Vue.js 提供的 `watch` 方法来监听 `keyword` 的变化，当 `keyword` 改变时，发送请求获取数据，并将结果赋值给 `searchResult` 变量。

当 `keyword` 发生改变时，会触发 `watch` 方法，从而实现重新请求的效果。