Vue3组合式API：onMounted内调用方法报错，如何解决？

• Vue3的setup函数里不存在this上下文，它的执行逻辑和选项式API完全独立，这里的this是undefined，所以调用this.calcStartIndex()必然报错。
• 你混用了组合式API（setup）和选项式API（methods）的写法，组合式API的逻辑应该封装在setup内部，无法直接通过this访问methods里的方法。

推荐：纯组合式API写法 #

把方法直接定义在setup内部，在onMounted中直接调用：

import { defineComponent, onMounted } from 'vue';

export default defineComponent({  
  setup() {
    // 把方法定义在setup内部
    const calcStartIndex = () => {
      console.log("startIndex");
    };

    onMounted(() => {
      calcStartIndex(); // 直接调用方法
    });

    // 如果模板里要用到这个方法，就return出去；不需要的话可以省略
    return { calcStartIndex };
  },
})

备选：保留选项式methods（不推荐） #

如果一定要用methods选项，可以通过getCurrentInstance获取组件实例来调用，但这是Vue内部API，可能存在版本兼容问题：

import { defineComponent, onMounted, getCurrentInstance } from 'vue';

export default defineComponent({  
  setup() {
    const instance = getCurrentInstance();

    onMounted(() => {
      // 使用可选链避免实例不存在的情况
      instance?.proxy?.calcStartIndex();
    });

    return {};
  },
  methods: { 
    calcStartIndex() {
      console.log("startIndex");
    }
  },
})

内容的提问来源于stack exchange，提问作者Shesh Narayan Deshmukh