VUE3onMounted方法更新data()的数据

需求

VUE3项目中，需求是页面加载后就有几个指标数据，希望在页面自动刷新，页面的数据希望做ajax更新。

背景知识

1. Vue 3 生命周期完整指南
   https://segmentfault.com/a/1190000039680245?utm_source=tag-newest

2. onmounted vue3_Vue3.x 生命周期 和 Composition API 核心语法理解
   http://www.wityx.com/post/49199_1_1.html

简而言之，这个更新的方法应该写在VUE组件的 setup() 中的onMounted事件下。

如果页面初次加载获取的数据可以直接从data()方法中返回：

  data() {
    return {
      n: 90,
      value1: "1",
    }

问题

问题出在onMounted里，要周期性地更新data中数据，可以写定时器触发更新，可是这个时候访问不到组件的data对象，试了很多办法，求助了七七后，得到了解法：

现在问题就是在定时器里怎么能访问到这个组件的data()数据呢?

解答

解决方法：
在setup方法中获取到组件实例对data()数据进行访问。

  setup() {
    const ins = getCurrentInstance();
    onMounted(() => {
      // 这个不行，不能访问methods对象
      // context.methods.loadMainPageIndex();
      // 还可以对data中的值进行修改，也可以促发自动更新到页面
      console.log(ins.data.value1);

记录一下

这篇好文章是转载于：学新通技术网