vue3.0中setup使用(两种用法)

2023-07-08 23:01:06 182

一、setup函数的特性以及作用

可以确定的是Vue3.0是兼容Vue2.x版本的也就是说我们再日常工作中可以在Vue3中使用Vue2.x的相关语法但是当你真正开始使用Vue3写项目时你会发现他比Vue2.x方便的多

Vue3的一大特性函数----setup

1、setup函数是处于生命周期函数beforeCreate和Created两个钩子函数之间的函数也就说在setup函数中是无法使用data和methods中的数据和方法的

2、setup函数是CompositionAPI（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要return出去的不然无法再模板中使用

二、setup函数的注意点：

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

2、由于我们不能在setup函数中使用data和methods，所以Vue为了避免我们错误的使用，直接将setup函数中的this修改成了undefined

3、setup函数只能是同步的不能是异步的

用法1:结合ref使用

用法2：代码分割

OptionsAPI和CompositionAPI

OptionsAPI约定：

我们需要在props里面设置接收参数

我们需要在data里面设置变量

我们需要在computed里面设置计算属性

我们需要在watch里面设置监听属性

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

你会发现OptionsAPi都约定了我们该在哪个位置做什么事，这反倒在一定程度上也强制我们进行了代码分割。

现在用CompositionAPI，不再这么约定了，于是乎，代码组织非常灵活，我们的控制代码写在setup里面即可。

setup函数提供了两个参数props和context,重要的是在setup函数里没有了this,在 vue3.0 中，访问他们变成以下形式：this.xxx=》context.xxx

我们没有了this上下文，没有了OptionsAPI的强制代码分离。CompositionAPI给了我们更加广阔的天地，那么我们更加需要慎重自约起来。

对于复杂的逻辑代码，我们要更加重视起CompositionAPI的初心，不要吝啬使用CompositionAPI来分离代码，用来切割成各种模块导出。

我们期望是这样的：

importuseAfrom'./a';

importuseBfrom'./b';

importuseCfrom'./c';

exportdefault{

setup(props){

let{a,methodsA}=useA();

let{b,methodsB}=useA();

let{c,methodsC}=useC();

return{

a,

methodsA,

b,

methodsB,

c,

methodsC

}

}

}

就算setup内容代码量越来越大，但是始终围绕着大而不乱，代码结构清晰的路子前进。

到此这篇关于vue3.0中setup使用的文章就介绍到这了,更多相关vue3.0setup使用内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

vue3.0中setup使用(两种用法)

热门推荐

随机推荐