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

#晚来天欲雪

已于 2022-06-27 15:31:03 修改

阅读量1.6w

点赞数 3

分类专栏： Vue.js 文章标签： vue.js javascript 前端 web开发

于 2021-10-03 17:12:10 首次发布

本文链接：https://blog.csdn.net/YIZHILIUSHA2020/article/details/120596211

版权

Vue.js 专栏收录该内容

6 篇文章 5 订阅

订阅专栏

前景提要：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>

#晚来天欲雪

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
【Vue】如何在onMounted钩子中使用data中的数据

前景提要：onMounted钩子是vue3新添加的特性，属于组合式api，在setup中调用，而setup相当于组件编译的入口，setup在beforeCreate钩子执行前运行，此时只初始化了prop（属性）和context等，而data是在beforeCreate钩子之后created之前执行的。注意：onMounted虽然写在setup函数中，但却是在组件挂载到父组件时才被调用的。方法：由于setup中不能使用this，因此需要使用getCurrentInstance 方法获得当前活跃的组件，具体
复制链接

扫一扫