vue实时刷新页面数据

Vue不断请求数据 用定时器SetTimeOut

不带参数发给后端

<template>
  <div>
    <el-button @click="getData">点击</el-button>
    <div>{{one}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      one: {}
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const { data: res } = await this.$http.get('/data01')
      console.log(res)
      this.one = res
      console.log(this.one)
    },
    // 定时器
    timer () {
      return setTimeout(() => {
        this.getDataone()
      }, 1000)
    }
  },
  watch: {
     // watch就是用来监控数据变化，只有变化了才会调用定时器的变化
    one () {
      // 调用定时器
      this.timer()
    }
  },
  // 页面销毁后 停止计时器
  destroyed () {
    clearTimeout(this.timer)
  }
}
</script>

带参数发给后端

<template>
  <div>
    <el-button @click="getData">带参数发送</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fourData: [],
      fourParams: ['Simulator.cemsSO2.anshui', 'Simulator.cemsSO2.humidity', 'Simulator.cemsSO2.shs', 'Simulator.cemsSO2.soot']
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await this.$http.post('/index/test', this.fourParams)
      console.log(res)
      this.one = res
    },

    // 定时器
    timer () {
      return setTimeout(() => {
        this.getData()
      }, 1000)
    }
  },
  watch: {
    fourData() {
      this.timer()
    }
  },
  destroyed () {
    clearTimeout(this.timer)
  }
}
</script>