setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
执行时期：setup 函数会在 beforeCreate 之后、created 之前执行
接收 props 数据：在 props 中定义当前组件允许外界传递过来的参数名称 通过 setup 函数的第一个形参，接收 props 数据
setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性， 这些属性在 vue 2.x 中需要通过 this 才能访问到， 在 vue 3.x 中，它们的访问方式如下：
[图片上传失败...(image-b631b3-1639118280368)]
image.png
2、对比vue2 好处和特点
特点：业务相关的代码在放在同一个位置来写
vue2中：与数据相关的代码分散在不同的配置项中，并没有集中起来，不方便写代码：你往往需在不同配置项中跳转。 例如：添加一个数据要去data中，添加对应的操作方法要在methods中.....。
这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外， 在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。
data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。 这可能会导致组件难以阅读和理解，而通过setup可以将该部分抽离成函数, 让其他开发者就不用关心该部分逻辑了.
3、vue3.2 版本以上 script setup 进一步减少代码量
a、区别
首先是 <script /> 标签加上了 setup 属性，它里边的代码可以直接视为在 setup() 函数中编写的， 同时，import 语句也可以使用，仍然需要放在最上方。
在 script setup 里边定义的变量、函数和导入的模块可以直接在 <template /> 模板中使用：
[图片上传失败...(image-88d535-1639118280368)]
image.png
b、访问属性
由于使用了 script setup 之后不能访问 setup() 函数的参数了，如果要获取父组件传递来的属性，那么需要使用 defineProps 函数， 可以从 vue 库中导入进来，它接收一个对象作为参数
[图片上传失败...(image-c1b98c-1639118280368)]
image.png
c、触发事件
使用 script setup 也不能通过访问 setup 函数中的 context 参数来触发事件，这时可以用 defineEmit 来实现，它接收一个数组作为参数， 定义当前组件将会触发的自定义事件
[图片上传失败...(image-9cf58a-1639118280368)]
image.png
d、获取 Context
获取 context 信息可以使用 useContext() 函数，也是从 vue 库中导入进来，里边可以获取 slots 和 attrs 等信息
网友评论