Vue3 setup函数

vue2 和 vue3 开发的区别

首先，目前来说 vue3 发布已经有一段时间了，但是呢，由于还处于优化完善阶段，对于 vue3 开发项目的需求不是很高，主要还是以 vue2 开发为主，但是相信，vue3 进行项目开发是大势所趋。

vue2 开发项目过程中，会存在代码冗余和结构杂乱问题，这是 vue3 主要解决的问题，vue3 可以将相关功能的代码抽离分割在一起，方便开发者快速阅读，提高项目代码的可读性和可维护性。

使用 setup 原因

在 vue3 版本中，引入了一个新的函数，叫做 setup，引入他的原因总结一下主要原因是：为了使用组合式 API，setup 函数是 Composition 的入口。

为什么不继续使用 vue2 当中的选项 API 了呢，原因也很简单，像 data、computed、methods、watch 在组织逻辑大多数的情况下都是没有问题的，但是当组件逻辑变得更加丰富，那么逻辑处理关注点就会越来越多，很容易导致组件阅读和维护成本提高，通过 setup 函数能够将该部分逻辑抽离成函数，让开发者不必在关心该部分的逻辑问题。

setup 用法

• setup 函数是组合式 API 的入口。
• setup 函数是启动页面后自动执行的函数。
• 页面中所涉及的变量和方法等，都需要写在 setup 函数中。
• 在 setup 中定义的变量、方法需要通过 return 返回出去才可以使用，否则无法在视图中使用。
• setup 函数位于 created 和 beforCreated 钩子之前，用来代替这两个钩子。

setup 可以接受哪些参数

setup 函数可以接受 props、context，其中， props 由于是响应式数据，不能直接解构赋值，context 不是响应式数据，可以通过解构赋值，setup 函数必须返回一个对象，只要返回对象，便可以向 vue2 的方式一样使用返回的属性或方法。

setup 详解

setup 函数自动执行

上边提到，setup 函数是页面打开之后自动执行的一个方法，当页面打开会自动执行 setup 函数当中的逻辑代码。

<template>
  <div>
    <h1>setup 函数</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      console.log('我是