四、vue3.0之setup函数的理解

最新推荐文章于 2024-05-29 17:54:26 发布

arguments_zd

最新推荐文章于 2024-05-29 17:54:26 发布

阅读量2.4k

点赞数 1

分类专栏： vue3.0的开发和学习文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/qq_43185384/article/details/125152461

版权

vue3.0的开发和学习专栏收录该内容

26 篇文章 1 订阅 ¥199.90 ¥299.90

订阅专栏

超级会员免费看

本文探讨了Vue3中的核心组件选项setup，它作为组合API的起点，在组件实例创建前执行。setup中this为undefined，需返回模板中使用的数据和函数。props用于接收父组件传递的数据，而context包含attrs（接收未声明的props）、emit（子传父事件）和slots（接收父级的插槽内容）。理解这些对于掌握Vue3的开发至关重要。

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

今天我们来看看在面试面试官会经常问道的一个重点（setup）,通常面试官会问道你对vue3中setup函数的理解或者setup函数中形参props和context分别代表什么意思。

setup函数:

1、新的组件选项，作为组件中使用组合API的起点

2、它的执行在组件实例创建之前即vue2.x的beforeCreate执行

3、由第二点得知，setup函数中this还不是组件实例，即this就是undefined

4、在模板中使用的数据和函数，都需要setup将其return出来

5、setup只能是同步不能是异步

// HTML
<template>
  <div class="home">
    {
  {state}}
  </div>
</template>

// JavaScript
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "Home",
  /**
   * setup函数，
   * 1、无this指向，如果在setup中打印this，this是undefined
   * 2、在模板中使用的数据和函数，都需要setup将其return出来
   *   如果不return，页面无法获取到数据和方法
   * 3、从setup函数中，我们可以看出，代码属于同步执行
   */
  setup() {
    console.log(this) // undefined
    const stat