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 函数最后通过 return 返回，才可以像 vue2 一样在模板中使用。

定义一个基本类型变量

在 setup 函数中，创建一个 name 参数，并且在页面中渲染该字段的内容。

上面的代码编写完成，保存刷新页面，发现名称渲染出现问题，展示不出来，同时控制台报错告警。

出现这个问题的原因其实很简单，如果从 vue2 转到 vue3 ,很容易就遇到这种问题，因为上面提到过，在 setup 中创建的变量需要在 setup 函数最后通过 return 返回，才可以使用。

将创建的 name 参数抛出后，重新保存刷新页面，数据渲染就正常了。

同样，创建其他基本类型也是一样的编写方式。

切记，声明的变量如果需要在页面中展示，必须使用 return 将声明的变量抛出。

setup 创建复杂数据类型

setup 函数创建复杂数据类型，例如数组，对象之类的和基本数据类型相同，也是必须通过 return 抛出后，才可以在页面中使用。

刷新页面，渲染正常

setup 创建方法

除了变量，方法也是需要写在 setup 函数当中的，同时和变量一样，需要 return 抛出才可以使用。
创建方法的方式有两种：

第一种就是很常见的通过 function 的方式创建

// 一、通过 function 的方式创建
    function btn() {
        console.log('按钮被点击了')
    }

另一种使用过箭头函数的方式创建

  // 二、通过箭头函数的方式创建
  const btn = () => {
    console.log('按钮被点击了')
  }

例如：在页面添加一个按钮，点击按钮打印一段话在控制台输出。

保存代码，刷新页面，点击按钮在控制台输出内容。

Vue3setup函数

LjylWnxx