【Vue】如何在onMounted钩子中使用data中的数据

前景提要：onMounted钩子是vue3新添加的特性，属于组合式api，在setup中调用，而setup相当于组件编译的入口，setup在beforeCreate钩子执行前运行，此时只初始化了prop（属性）和context等，而data是在beforeCreate钩子之后created之前执行的。

注意：onMounted虽然写在setup函数中，但却是在组件挂载到父组件时才被调用的。

方法：由于setup中不能使用this，因此需要使用getCurrentInstance 方法获得当前活跃的组件，具体方式见代码。

<template>
  <div>
    <p>{{ aa.a }}</p>
    <p>{{ b }}</p>
  </div>
</template>

<script>
import { reactive, onMounted,getCurrentInstance } from "vue";
export default {
  data() {
    return {
      b: 111,
    };
  },
  setup(props) {
    const aa = reactive({
      a: 1,
    });
    const ins = getCurrentInstance();
    // console.log(b)
    onMounted(() => {
      console.log("hello");
      console.log(ins)
      // 注意数据b和a的使用方法
      console.log(ins.data.b)
      console.log(aa.a)
    });
    return {
      aa,
    };
  },
};
</script>
<style>
</style>