一文详解Vue3中的setup函数的用法和原理

 更新时间:2024年02月20日 08:37:09   作者:小馒头学python  
在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑,本文将主要介绍Setup的基本用法和少量原理

OptionsAPI 与 CompositionAPI

Options API

Options API 是 Vue.js 2.x 中使用的传统组件设计模式。它基于选项对象,将组件的数据、计算属性、方法、生命周期钩子等功能按照选项的形式进行组织。Options API 的特点包括:

易于上手:Options API 的结构清晰,容易理解和学习,适合初学者入门。
逻辑分离:不同功能的代码被分离到不同的选项中,使得代码更易维护和阅读。
依赖注入:通过 this 上下文可以方便地访问到组件的属性和方法。

Composition API

Composition API 是 Vue.js 3.x 中引入的新特性,旨在解决 Options API 在复杂组件中难以维护的问题。Composition API 允许将组件的逻辑按照功能相关性进行组织,而不是按照选项分散组织。Composition API 的特点包括:

逻辑复用:可以将逻辑抽取为可复用的函数,更方便地在不同组件之间共享逻辑。
代码组织:将相关逻辑放在一起,使得组件更加清晰和易于维护。
更好的类型推断:由于函数可以提供更多信息,TypeScript 在使用 Composition API 时能够提供更好的类型推断。

对比

Options类型的 API,数据、方法、计算属性等,集中在:datamethodscomputed中的,若想改动一个需求,就需要分别修改:datamethodscomputed,不便于维护和复用。

Composition 可以用函数的方式,更加优雅的组织代码,让相关功能的代码更加有序的组织在一起。

上面我将两种形式的API都列出来了,总的来说OptionsAPI属于Vue2,CompositionAPI属于Vue3,本文主要结合两者进行介绍

介绍

在 Vue3 中,setup 函数是一个新引入的概念,它代替了之前版本中的 data、computed、methods 等选项,用于设置组件的初始状态和逻辑。setup 函数的引入使得组件的逻辑更加清晰和灵活,本文将主要介绍Setup的基本用法和少量原理

  • 更灵活的组织逻辑:setup 函数可以将相关逻辑按照功能进行组织,使得组件更加清晰和易于维护。不再受到 Options API 中选项的限制,可以更自由地组织代码。
  • 逻辑复用:可以将逻辑抽取为可复用的函数,并在 setup 函数中进行调用,实现逻辑的复用,避免了在 Options API 中通过 mixins 或混入对象实现逻辑复用时可能出现的问题。
  • 更好的类型推断:由于 setup 函数本身是一个普通的 JavaScript 函数,可以更好地与 TypeScript 配合,提供更好的类型推断和代码提示。
  • 更好的响应式处理:setup 函数中可以使用 ref、reactive 等函数创建响应式数据,可以更方便地处理组件的状态,实现数据的动态更新。
  • 更细粒度的生命周期钩子:setup 函数中可以使用 onMounted、onUpdated、onUnmounted 等函数注册组件的生命周期钩子,可以更细粒度地控制组件的生命周期行为。
  • 更好的代码组织:setup 函数将组件的逻辑集中在一个地方,使得代码更易读、易维护,并且可以更清晰地看到组件的整体逻辑。

上述特点有些暂时用不到,本节主要介绍下面三个特点

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。

在这里插入图片描述

从下面的图就可以看出Setup的执行要更优先,以及this的不适用

在这里插入图片描述

<template>
   <div class="person">
     <h2>姓名:{{name}}</h2>
     <h2>年龄:{{age}}</h2>
     <button @click="changeName">修改名字</button>
     <button @click="changeAge">修改年龄</button>
     <button @click="showTel">查看联系方式</button>
   </div>
 </template>
 
 <script lang="ts">
   export default {
     name:'Person',
     setup(){
       console.log('~',this) 
       let name = '花卷' //非响应式
       let age = 22  //非响应式
       let tel = '12435143545'  //非响应式
       
       // 方法
       function changeName() {
         name = '馒头' 
         console.log(name) 
       }
       function changeAge() {
         age += 1 
         console.log(age) 
       }
       function showTel() {
         alert(tel)
       }
 
       // 将数据、方法交出去
       return {name,age,tel,changeName,changeAge,showTel}
     }
   }
 </script>

setup 的返回值

若返回一个对象:则对象中的:属性、方法等,在模板中均可以直接使用**(重点关注)。**

在这里插入图片描述

若返回一个函数:则可以自定义渲染内容,代码如下:

setup(){
  return ()=> '你好啊!'
}

Setup语法糖

大家十分清楚语法糖到哪都是为了使代码更简便

接下来我介绍一下语法糖的写法

<script setup>
</script>

它可以自动返回,无需return返回,我们测试一下,首先在模版把a写上

在这里插入图片描述

然后再script里面写,这里的let a = 111,就自带返回了,我们接下来看看页面

<script setup>
   let a = 111
</script>

很不幸,报错了,我们读一下报错内容,两个标签必须采用相同类型,那么我们统一就好

在这里插入图片描述

在这里插入图片描述

<script lang="ts" setup>
   let a = 111
</script>

这样结果就出来了

在这里插入图片描述

我们如果想要修改下面的名字,除了重命名文件(大部分情况不采用),可以采用一个插件

在这里插入图片描述

我们可以借助vite中的插件简化

  • 第一步控制台运行:npm i vite-plugin-vue-setup-extend -D
  • 第二步:vite.config.ts

在这里插入图片描述

完整代码如下

<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>地址:{{address}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts" setup name="Person">  //自定义命名
  // 此时的name、age、tel都不是响应式的数据
  let name = '张三'
  let age = 22
  let tel = '1424423451'
  let address = '北京市朝阳区'

  // 方法
  function changeName() {
    name = '' 
    console.log(name) 
  }
  function changeAge() {
    age += 1 
    console.log(age)
  }
  function showTel() {
    alert(tel)
  }
</script>

总结

一开始介绍了Vue2,3对应的两种API以及对比,之后简单介绍了一下Vue3特有的函数—Setup,最后围绕Setup介绍使用语法糖后,可以省略 export default 和 setup 属性,使得组件的代码更加简洁和易读。同时,Vue 3 也会将 参数地注入到 setup 函数中,使得在使用这些参数时不需要显式地声明。

以上就是一文详解Vue3中的setup函数的用法和原理的详细内容,更多关于Vue3 setup函数的资料请关注脚本之家其它相关文章!

相关文章

  • Vue2 Observer实例dep和闭包中dep区别详解

    Vue2 Observer实例dep和闭包中dep区别详解

    这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 在 Vue 中使用 JSX 及使用它的原因浅析

    在 Vue 中使用 JSX 及使用它的原因浅析

    这篇文章主要介绍了在 Vue 中使用 JSX 及使用它的原因浅析,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Mixin混入分发Vue组件可复用功能基础示例

    Mixin混入分发Vue组件可复用功能基础示例

    这篇文章主要为大家介绍了Mixin混入分发Vue组件可复用功能基础示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 在vue中实现表单验证码与滑动验证功能的代码详解

    在vue中实现表单验证码与滑动验证功能的代码详解

    在Web应用程序中,表单验证码和滑动验证是常见的安全机制,用于防止恶意攻击和机器人攻击,本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下
    2023-06-06
  • 深入探讨Vue计算属性与监听器的区别和用途

    深入探讨Vue计算属性与监听器的区别和用途

    在Vue的开发中,计算属性(Computed Properties)和监听器(Watchers)是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
    2023-09-09
  • vue动态路由匹配和路由懒加载多种方法详解

    vue动态路由匹配和路由懒加载多种方法详解

    这篇文章主要介绍了vue动态路由匹配和路由懒加载,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 解决Vue-cli npm run build生产环境打包,本地不能打开的问题

    解决Vue-cli npm run build生产环境打包,本地不能打开的问题

    今天小编就为大家分享一篇解决Vue-cli npm run build生产环境打包,本地不能打开的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • element table列表根据数据设置背景色

    element table列表根据数据设置背景色

    在使用elementui中的el-table时,需要将表的背景色和字体颜色设置为新颜色,本文就来介绍一下element table列表根据数据设置背景色,感兴趣的可以了解一下
    2023-08-08
  • vue 动态表单开发方法案例详解

    vue 动态表单开发方法案例详解

    这篇文章主要介绍了vue 动态表单开发方法,结合具体案例形式详细分析了vue.js动态表单相关原理、开发步骤与实现技巧,需要的朋友可以参考下
    2019-12-12
  • 浅谈Vue的双向绑定和单向数据流冲突吗

    浅谈Vue的双向绑定和单向数据流冲突吗

    单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?本文就详细的介绍一下
    2022-04-04

最新评论