如何访问vue3组合API中onMounted内部的方法？

Question

我想做的是在设置完成并且页面安装在组合 API 中后访问方法，但 vue 没有访问该方法

我做错了什么？这是我的代码 -

export default defineComponent({  
  setup() {
    onMounted(() => {
      this.calcStartIndex();
    });
    return {};
  },
  methods: { 
    calcStartIndex() {
      console.log("startIndex");
    }
  },
})

我收到的错误 -

TypeError: Cannot read properties of undefined (reading 'calcStartIndex')

Answer 1

您应该在setup函数内声明方法

export default defineComponent({  
  setup() {
    function calcStartIndex() {
      console.log("startIndex");
    }

    onMounted(() => {
      calcStartIndex();
    });

    return {};
  },
})

或者更好地使用script setup

<script setup>
  function calcStartIndex() {
    console.log("startIndex");
  }

  onMounted(() => {
    calcStartIndex();
  });
})
</script>