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

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

# 后端代码--使用pywebview
class Api:def greet(self):greet_text= 'pywebview and vue3'response = {}response['text'] = greet_textreturn responseif __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>