vue3中的setup(vue3.0 setup)

setup在vue3.0中的使用本文主要介绍setup在vue3.0中的使用。本文非常详细地介绍了这两种用法。对于大家的学习或者工作都有一定的参考价值。有需要的朋友可以参考一下

1.设置功能的特性和功能

可以肯定的是，vue3.0与vue2.x版本兼容，这意味着我们可以在日常工作中使用vue3中的vue2.x的相关语法。但是，当您实际开始使用VUE3编写项目时，您会发现它比VUE2更好。x更方便

VUE3的主要功能----设置

1.设置函数是生命周期函数与创建和创建之间的函数。换句话说，数据和方法中的数据和方法不能在设置函数中使用。

2.设置函数是组成API的入口

3、setup函数中定义的变量和方法最后需要返回，否则无法在模板中使用。

2.设置功能上的注释：

1、由于执行setup函数时还没有执行Created生命周期方法，所以在setup函数中不能使用data和methods的变量和方法。

2.由于我们不能在setup函数中使用数据和方法，所以Vue直接将setup函数中的this改为undefined，以避免我们错误的使用。

3.设置函数只能是同步的，而不是异步。

用法1:与Ref结合使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17号

18

19

20

21

22

23

24

25

26

27

28

29

模板

divid='应用程序'

{{姓名}}

p{{年龄}}/p

按钮@click='plusOne()'+/按钮

/div

/模板

脚本

从'vue'导入{ref}

导出默认值{

name:'应用程序',

数据{

返回{

名称：'xiaosan'

}

},

设置{

constname=ref

constage=ref

函数plusOne(){

age.value++//如果要更改值或获得值，则必须。

}

返回{//必须返回到使用模板

名称，年龄，加上

}

}

}

/脚本

用法2：代码拆分

选项API和组成API

选项API约定：

我们需要在道具中设置接收参数

我们需要在数据中设置变量

我们需要在计算中设置计算的属性

我们需要在手表中设置听力属性

我们需要在methods中设置事件方法

您会发现选项API规定了我们应该在哪里做的事情，这又迫使我们在一定程度上执行代码分裂。

现在使用构图API，不再是这样的情况。因此，代码组织非常灵活，我们的控制代码可以写在设置中。

设置功能提供了两个参数，道具和上下文。重要的是，设置函数中没有此功能。在vue3.0中，访问它们成为以下形式：this.xxx=》context.xxx

我们不再有这种上下文，也不再与选项API强制进行代码分离。构图API为我们提供了一个更广阔的世界，因此我们需要更加谨慎和受到约束。

对于复杂的逻辑代码，我们必须更加关注组成API的原始意图，并毫不犹豫地使用构图API将代码分开并将其切成各种模块以进行导出。

我们期望的是：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17号

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

ImportUseafrom'./a';

ImportUseBfrom'./b';

importuseCfrom'./c';

导出默认值{

设置{

让{a，methodsA}=useA();

令{b，methodsb}=usea;

令{c，methodsc}=usec;

返回{

A，

methodsa，

乙、

methodsb，

C，

MethodSc

}

}

}

即使设置内容中的代码量越来越大，但总是以大而不乱、代码结构清晰的方式前进。