首页 > 资讯 > 前端开发 > JavaScript >详解Vue3中setup函数的使用教程

465

分享到

详解Vue3中setup函数的使用教程

2024-04-02 19:04:59 465人浏览八月长安

摘要

目录Vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量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('我是??.')
    }
  }
</script>

打开页面，可以看到我们输出打印的 我是??. 输出在控制台。

setup 函数定义变量

组件中所有的变量都要在 setup 函数中定义，并且需要在 setup 函数最后通过 return 返回，才可以像 vue2 一样在模板中使用。

定义一个基本类型变量

在 setup 函数中，创建一个 name 参数，并且在页面中渲染该字段的内容。

<template>
  <div>
    <h1>setup 函数</h1>
    <h1>名称：{{name}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是??.'   // 定义一个基本类型变量
    }
  }
</script>

上面的代码编写完成，保存刷新页面，发现名称渲染出现问题，展示不出来，同时控制台报错告警。

出现这个问题的原因其实很简单，如果从 vue2 转到 vue3 的人很容易就遇到这种问题，因为上面提到过，在 setup 中创建的变量需要在 setup 函数最后通过 return 返回，才可以使用。

所以说修改上面的代码：

<template>
  <div>
    <h1>setup 函数</h1>
    <h1>名称：{{name}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是??.'   // 定义一个基本类型变量
      return { name }  // 将 name 参数抛出 【重要】
    }
  }
</script>

将创建的 name 参数抛出后，重新保存刷新页面，数据渲染就正常了。

同样，创建其他基本类型也是一样的编写方式。

<template>
  <div>
    <h1>setup 函数</h1>
    <h1>名称：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <h1>性别：{{sex}}</h1>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '我是??.'   // 定义一个基本类型变量
      const age = 10
      const sex = true
      return { name, age, sex }
    }
  }
</script>

切记，声明的变量如果需要在页面中展示，必须使用 return 将声明的变量抛出。

setup 创建复杂数据类型

setup 函数创建复杂数据类型，例如数组，对象之类的，和基本数据类型相同，也是，必须通过 return 抛出后，才可以在页面中使用。

<template>
  <div>
    <h1>setup 函数</h1>
    <h1>名称：{{boy.name}}</h1>
    <h1>年龄：{{boy.age}}</h1>
    <h1>性别：{{boy.sex}}</h1>
    <p v-for="(item, index) in todo" :key="index">{{item}}</p>
  </div>
</template>
<script>
  export default {
    setup() {
      const boy = {
        name: '我是??.',
        age: 10,
        sex: true
      }
      const todo = ['弹吉他', '做作业', '练街舞']
      return { boy, todo }
    }
  }
</script>

保存刷新页面，渲染正常。

setup 创建方法

除了变量，方法也是需要写在 setup 函数当中的，同时和变量一样，需要 return 抛出才可以使用。

创建方法的方式有两种，第一种就是很常见的通过 function 的方式创建，另一种使用过箭头函数的方式创建。

      // 一、通过 function 的方式创建
      function btn() {
        console.log('按钮被点击了')
      }

      // 二、通过箭头函数的方式创建
      const btn = () => {
        console.log('按钮被点击了')
      }

以上两种方式都可以创建方法。

例如：在页面添加一个按钮，点击按钮打印一段话在控制台输出。

<template>
  <div>
    <h1>setup 函数</h1>
    <el-button type="primary" @click="btn">按钮</el-button>
  </div>
</template>
<script>
  export default {
    setup() {
      // 通过箭头函数的方式创建
      const btn = () => {
        console.log('按钮被点击了')
      }
      return { btn }  // 将时间抛出
    }
  }
</script>

保存代码，刷新页面，点击按钮在控制台输出内容。

动态更新数据

在 vue2 里面，可以通过双向数据绑定动态修改页面内容，vue3 当然也是可以的。

例如，页面上有一个名字，点击按钮，修改名称内容。

<template>
  <div>
    <h1>setup 函数</h1>
    <h1>姓名：{{name}}</h1>
    <el-button type="primary" @click="btn">修改内容</el-button>
  </div>
</template>
<script>
  export default {
    setup() {
      const name = '??.'
      // 通过箭头函数的方式创建
      const btn = () => {
        name = '我是??.'
      }
      return { name, btn }
    }
  }
</script>

保存上面代码，刷新页面，点击按钮之后，发现姓名没有变成 我是??. 而是直接报错了。

为什么报错了累，稍微预告一下子，需要使用 ref 和 Reactive 函数。

到此这篇关于详解Vue3中setup函数的使用教程的文章就介绍到这了,更多相关Vue3 setup函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 详解Vue3中setup函数的使用教程

本文链接: https://www.lsjlt.com/news/153307.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

详解Vue3中setup函数的使用教程

目录vue2 和 vue3 开发的区别使用 setup 原因setup 用法setup 可以接受哪些参数setup 详解setup 函数自动执行setup 函数定义变量setup 创...

99+

2024-04-02
详解vue3中setUp和reactive函数的用法

1 setUp的执行时机我们都知道，现在vue3是可以正常去使用methods的。但是我们却不可以在setUp中去调用methods中的方法。为什么了？？？我们先了解一下下...

99+

2024-04-02
Vue3中SetUp函数的参数props、context详解

1.setUp函数的第1个参数props setup(props,context){} 第一个参数props: props是一个对象，包含父组件传递给子组件的所有数据。在子组...

99+

2024-04-02
vue3中的setup函数如何使用

这篇文章主要讲解了“vue3中的setup函数如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3中的setup函数如何使用”吧！概述一、初识setup函数 ...

99+

2023-06-30
关于vue3中setup函数的使用

概述一、初识setup函数组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使...

99+

2024-04-02
前端vue3 setup使用教程

目录1、简单使用2、修改 setup 中的变量值3、setup 形式下的父子组件通信3.1、父传子3.2、子传父3.2.1、子组件调用父组件方法3.2.2、子组件向父组件传递数据&n...

99+

2024-04-02
详解Vue3中的setup语法糖、computed函数、watch函数

computed函数在上篇文章中我们学了两个组合式API分别是 ref 和 reactive，现在呢我们学习cmputed函数，相信大家一定知道他即使我们的计算数据定义函数，之前呢是 computed 选项，现在是computed函数；我们...

99+

2023-05-14

setup computed watch vue3
Vue3中的setup语法糖、computed函数、watch函数详解

目录写在前面 setup 语法糖 computed函数 watch 函数写在最后写在前面专栏介绍：凉哥作为 Vue 的忠实粉丝输出过大量的 Vue 文章，应粉丝要求开始更新...

99+

2023-03-01

Vue3 setup语法糖 Vue3 computed函数 Vue3 watch函数
vue3:setup语法糖使用教程

目录1.setup语法糖简介2.setup语法糖中新增的api2.1defineProps2.2defineEmits2.3defineExpose补充：与普通的script一起使用...

99+

2024-04-02
vue3中setup()和reactive()函数怎么使用

<template> <ul> <li v-for="(item, index) in arr" :key="item" @click="...

99+

2023-05-19

Vue3 setup() reactive()
Vue3中setup方法的用法详解

目录1.参数props2.参数context3. 子组件向父组件派发事件4.优化事件派发5.获取父组件传递的值1.参数props props是一个对象，包含父组件传递给子组件的所有数...

99+

2024-04-02
vue3中＜script setup＞和 setup函数的区别对比

目录一、基本语法setup函数的写法在＜script setup＞语法糖的写法二、使用外部文件区别setup函数＜script setup＞语法糖三、注册组件setup函数＜scri...

99+

2023-05-18

vue3＜script setup＞和 setup函数区别 vue3＜script setup＞
Vue3中的setup语法糖、computed函数、watch函数怎么使用

这篇文章主要介绍“Vue3中的setup语法糖、computed函数、watch函数怎么使用”，在日常操作中，相信很多人在Vue3中的setup语法糖、computed函数、watch函数怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简...

99+

2023-07-05
Vue3 setup 的作用实例详解

目录setup 具体怎么用：setup 的数据和方法如何使用？setup 参数setup 特性总结：总结：Vue3中setup函数的作用与实现从 vue2 升级 vue3，vue3 ...

99+

2022-12-29

Vue3 setup 的作用 Vue3 setup
vue3在setup中使用mapState解读

目录vue3 setup使用mapState创建一个hookvue3 setup语法糖中使用mapState在setup函数中使用在setup语法糖中使用总结vue3 setup使用...

99+

2023-05-16

vue3 setup setup使用mapState 使用mapState
Vue3中SetUp函数的props和context参数怎么用

第一个参数props:props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传入的所有的属性的对象也就是说:如果你想通过props的方式输出父组件传递给子组件的值。你需要使用props进行接...

99+

2023-05-22

Vue3 setup props
vue3中的setup使用和原理解析

目录1.前言2.setup3.源码分析setupStatefulComponent执行setup函数 finishComponentSetup4.总结1.前言最近在做vu...

99+

2024-04-02
详解Vue3中ref和reactive函数的使用

目录前言ref 函数介绍ref 函数使用ref 函数处理基本数据类型ref 函数处理复杂数据类型ref 函数获取单个DOM元素其他相关方法reactive 函数介绍reactive ...

99+

2024-04-02
Vue3中的setup语法糖、computed函数、watch函数如何用

computed函数computed 函数的使用：其实我们什么情况下会使用计算属性呢，那一定是通过依赖的数据得到新的数据！1）从Vue中引入computed 2）在setup中进行使用，将一个函数，函数的返回值就是计算好的数据 3）最后呢通...

99+

2023-05-17

Vue3 setup computed
详解Vue3中侦听器watch的使用教程

目录watch 侦听器使用。侦听器监听 reactive监听多个参数执行各自逻辑监听多个参数执行相同逻辑上一节我们简单的介绍了一下 vue3 项目中的计算属性，这一节我们继续 vue...

99+

2024-04-02