目录 vue2 和 vue3 开发的区别 使用 setup 原因 setup 用法 setup 可以接受哪些参数 setup 详解 setup 函数自动执行 setup 函数定义变量 setup 创建方法 动态更新数据 vue2 和 vue3 开发的区别 首先，目
目录
- vue2 和 vue3 开发的区别
- 使用 setup 原因
- setup 用法
- setup 可以接受哪些参数
- setup 详解
- setup 函数自动执行
- setup 函数定义变量
- 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('我是