Vue3访问页面时自动获取数据

1. 使用生命周期钩子函数

# 后端代码--使用pywebview
class Api:

    def greet(self):
        greet_text= 'pywebview and vue3'
        response = {}
        response['text'] = greet_text
        return response



if __name__ == '__main__':

    # 前后端通信测试
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/index.html', js_api=api)
    webview.start(debug=True)

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 使用pywebview前后端通信
      window.pywebview.api.greet().then(response=> {
        this.data= response['text'];
      });
    }
  }
};
</script>

2、使用定时器

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      timer: null
    };
  },
  created() {
    this.fetchData();
    this.timer = setInterval(this.fetchData, 5000); // 每5秒获取一次数据
  },
  methods: {
    fetchData() {
      // 使用pywebview前后端通信
      window.pywebview.api.greet().then(response=> {
        this.data= response['text'];
      });
    },
    cancelAutoUpdate() {
      clearInterval(this.timer);
    }
  },
  beforeDestroy() {
    this.cancelAutoUpdate();
  }
};
</script>