vue3中的setup,vue3.0 setup

　　摘要：本文主要介绍了vue3.0中setup的使用方法。本文详细介绍了两种使用方法，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

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

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

　　设置，Vue3的主要特征功能

　　1.setup函数介于生命周期函数beforeCreate和Created的钩子函数之间，也就是说data and methods中的数据和方法不能用在setup函数中。

　　2.设置功能是组合API的入口。

　　3.设置函数中定义的变量和方法最后都需要返回，否则不能在模板中使用。

　　二、setup函数的注意点:

　　1.由于在执行设置功能时尚未执行所创建的生命周期方法，因此不能在设置功能中使用数据和方法的变量和方法。

　　2.因为我们不能在设置函数中使用数据和方法，Vue为了避免我们的错误使用，直接在设置函数中把这个改成了undefined。

　　3.设置功能只能是同步的，不能是异步的。

　　用法1:结合ref使用

　　模板

　　div id=应用程序

　　{{name}}

　　p{{age}}/p

　　按钮@ click= plus one()/按钮

　　/div

　　/模板

　　脚本

　　从“vue”导入{ref}

　　导出默认值{

　　名称：“应用程序”，

　　data(){

　　返回{

　　姓名：“三笑”

　　}

　　},

　　setup(){

　　Const name=ref (Primary Four )

　　const age=ref(18)

　　函数plusOne(){

　　Age.value //你必须。值，如果您想要更改该值或获取该值。

　　}

　　Return {//您必须返回模板才能使用它。

　　姓名、年龄、加号

　　}

　　}

　　}

　　/脚本

　　用法2：代码分割

　　Options API 和 Composition API

　　选项API约定：

　　我们需要在props中设置接收参数。

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

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

　　我们需要在watch中设置监控属性。

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

　　你会发现Options APi都规定了我们应该在哪里做什么，这又在一定程度上迫使我们拆分代码。

　　现在有了Composition API，就不再这么约定了。因此，代码组织非常灵活，我们的控制代码可以在setup中编写。

　　setup函数提供了两个参数props和context。重要的是设置函数里没有这个。在vue3.0中，访问它们变成了以下形式：this . XXX=" context . XXX "

　　我们没有这个上下文，没有选项API的强制代码分离。Composition API给了我们更广阔的天地，我们需要谨慎对待自我参与。

　　对于复杂的逻辑代码，更要注重组合API的初心，不要吝啬用组合API把代码分离出来，切割成各种模块导出。

　　我们的期望是：

　　importuseAfrom。/a ；

　　importuseBfrom。/b ；

　　importuseCfrom。/c ；

　　导出默认值{

　　设置(道具){

　　设{ a，methods a }=use a()；

　　设{ b，methods b }=use a()；

　　设{ c，methods c }=useC()；

　　返回{

　　一，

　　方法a，

　　b，

　　方法b，

　　c，

　　方法c

　　}

　　}

　　}

　　即使设置内容中的代码量在增加，它也总是保持着大而不乱且清晰的代码结构。

　　关于vue3.0中设置使用的这篇文章到此为止，关于vue3.0设置使用的更多信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。