首页 > 其他分享> 文章详细

# Vue3 setup 函数

2022-07-03 20:33:51 阅读：140 来源： 互联网

标签：return 函数 setup name Vue3 const 页面

Vue3 setup 函数

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 函数是页面打开之后自动执行的一个方法，当页面打开会自动执行 setup 函数当中的逻辑代码。

<template>
  <div>
    <h1>setup 函数</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      console.log('我是 
 
标签：return,函数,setup,name,Vue3,const,页面	

来源： https://www.cnblogs.com/wjw1014/p/16440772.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9