vue3 中setup的执行时机及在生命周期中的位置

(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

已于 2022-03-20 20:55:53 修改

阅读量4.5k

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

于 2022-03-20 20:47:52 首次发布

本文链接：https://blog.csdn.net/weixin_47300795/article/details/123620991

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文探讨了Vue.js组件的生命周期，详细介绍了`setup`函数的执行时机，它位于`props`解析后，`beforeCreate`之前。同时，文章通过实例展示了在`setup`中与外部调用生命周期函数的顺序，说明`setup`内的生命周期函数会先于外部执行。通过阅读，读者可以更好地理解和应用Vue.js的生命周期钩子。

摘要由CSDN通过智能技术生成

结果：
1 setup是在props解析之后，beforeCreate执行之前进行调用
2 如果在setup中和外部同时调用一个生命周期函数，setup的生命周期函数在外部的生命周期函数之前执行

在这里插入图片描述

<template>
  <div>setup的执行时机</div>
</template>
<script>
import { onMounted } from "@vue/runtime-core";
export default {
  data() {
    console.log("data");
    return {
      name: "111",
    };
  },
  methods: {
    changeName: () => {
      console.log("changeName");
      console.log(this.name);
    },
  },
  computed: {
    newName() {
      console.log("computed");
      console.log(this.name);
      return "123";
    },
  },

  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  setup() {
    console.log("setup");
    onMounted(() => {
      console.log("onMounted");
    });
  },
};
</script>