【vue3】组合式API之setup()介绍与reactive()函数的使用

这篇具有很好参考价值的文章主要介绍了【vue3】组合式API之setup()介绍与reactive()函数的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【vue3】组合式API之setup()介绍与reactive()函数的使用
==>😉博主:初映CY的前说(前端领域) ,📒本文核心:setup()概念、 reactive()的使用

【前言】vue3作为vue2的升级版,有着很多的新特性,其中就包括了组合式API,也就是是 Composition API。学习组合式API有什么优点呢?之前的vue2中结构不是挺不错的吗?那么接下来的事件,我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式。

⭐一、组合式API对比vue2项目结构

在vue2当中

  • 1.优点:易于学习和使用,写代码的位置已经约定好。

  • 2.缺点:对于大型项目,不利于代码的复用、不利于管理和维护。

  • 3.解释:同一功能的数据和业务逻辑分散在同一个文件的 N 个地方,随着业务复杂度的上升,我们需要经常在类似于data()以及methods中进行来回的处理

在vue3当中

  • 1.优点:可以把同一功能的数据和业务逻辑组织到一起,方便复用和维护。

  • 2.缺点:需要有良好的代码组织和拆分能力,相对没有 Vue2 容易上手。

  • 3.解释:注意:为了能让大家较好的过渡到 Vue3.0 版本,目前也是支持 Vue2.x 选项 API 的写法。
    【vue3】组合式API之setup()介绍与reactive()函数的使用

⭐二、setup()函数的使用

2.1setup()函数的基础概念

Vue3 中的 setup() 是 Vue3 新增的组件配置项,用于替代 Vue2 中的 data()、methods()、computed() 等配置项。setup() 提供了更简洁的编写方式,且能够更好地利用 Vue3 提供的 Composition API。setup() 函数接受两个参数,分别是 props 和 context。其中,props 是组件接收的属性值,context 包含了一些组件的配置信息。

  • 1.是什么:setup 是 Vue3 中新增的组件配置项,作为组合 API 的入口函数。

  • 2.执行时机:实例创建前调用,甚至早于 Vue2 中的 beforeCreate。

  • 3.注意点:由于执行 setup 的时候实例还没有 created,所以在 setup 中是不能直接使用 data 和 methods 中的数据的,所以 Vue3 setup 中的 this 也被绑定为了 undefined。

虽然 Vue2 中的 data 和 methods 配置项虽然在 Vue3 中也能使用,但不建议了,建议数据和方法都写在 setup 函数中,并通过 return 进行返回可在模版中直接使用(一般情况下 setup 不能为异步函数)。

2.2.setup()初体验

App.vue

<template>
    <h1 @click="say()">{{ msg }}</h1>
</template>
<script>
    export default {
        setup() {
            const msg = 'Hello Vue3'
            const say = () => {
                console.log(msg)
            }
            return { msg, say }
        },
    }
</script>

效果查看:
【vue3】组合式API之setup()介绍与reactive()函数的使用
注意:酷似于vue2中的data()与methods都是需要写在return才可作为结果进行调用。
【小小面试题补充】setup 中 return 的一定只能是一个对象吗?(setup 也可以返回一个渲染函数)
App.vue

<script>
    import { h } from 'vue'
    export default {
        name: 'App',
        setup() {
            return () => h('h2', 'Hello Vue3')
        },
    }
</script>

控制台则是打印出了h2标签的Hello Vue3。

2.3.reactive()函数

使用 reactive 函数包装数组为响应式数据。reactive 是一个函数,用来将普通对象/数组包装成响应式式数据使用,无法直接处理基本数据类型(因为它是基于 Proxy 的,而 Proxy 只能代理的是对象)。

比如当我有一个需求:点击删除当前行信息
App.vue

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

<script>
    export default {
        name: 'App',
        setup() {
            const arr = ['a', 'b', 'c']
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>

通过vueTools查看,我点击过后数据是被删除了,但页面上并没有事实的渲染出来
【vue3】组合式API之setup()介绍与reactive()函数的使用
此时,使用 reactive()包装数组使变成响应式数据,别忘了导入

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

<script>
    import { reactive } from 'vue'
    export default {
        name: 'App',
        setup() {
            const arr = reactive(['a', 'b', 'c'])
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>

【vue3】组合式API之setup()介绍与reactive()函数的使用
此刻页面也就具有了响应式,点击时删除,页面则是响应式的
同理:我们用reactive()来包裹我们的对象来使用

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from 'vue'
    export default {
        name: 'App',
        setup() {
            const state = reactive({
                arr: [
                    {
                        id: 0,
                        name: 'ifer',
                    },
                    {
                        id: 1,
                        name: 'elser',
                    },
                    {
                        id: 2,
                        name: 'xxx',
                    },
                ],
            })
            const removeItem = (index) => {
                // 默认是递归监听的,对象里面任何一个数据的变化都是响应式的
                state.arr.splice(index, 1)
            }

            const user = reactive({
                id: '',
                name: '',
            })
            const handleSubmit = () => {
                state.arr.push({
                    id: user.id,
                    name: user.name,
                })
                user.id = ''
                user.name = ''
            }
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

【vue3】组合式API之setup()介绍与reactive()函数的使用
上述代码的解意:
我定义了输入框,定义了删除、添加事件的操作,通过v-model打到双向绑定数据来完成对我的数据进行增加与删除。
到目前你是不是对setup()的使用有了更加清晰的认识呢?下面再来简化一下我们的写法。

2.3.1reactive()的进一步抽离

优化:将同一功能的数据和业务逻辑抽离为一个函数,代码更易读,更容易复用。

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from 'vue'
    function useRemoveItem() {
        const state = reactive({
            arr: [
                {
                    id: 0,
                    name: 'ifer',
                },
                {
                    id: 1,
                    name: 'elser',
                },
                {
                    id: 2,
                    name: 'xxx',
                },
            ],
        })
        const removeItem = (index) => {
            state.arr.splice(index, 1)
        }
        return { state, removeItem }
    }
    function useAddItem(state) {
        const user = reactive({
            id: '',
            name: '',
        })
        const handleSubmit = () => {
            state.arr.push({
                id: user.id,
                name: user.name,
            })
            user.id = ''
            user.name = ''
        }
        return {
            user,
            handleSubmit,
        }
    }
    export default {
        name: 'App',
        setup() {
            const { state, removeItem } = useRemoveItem()
            const { user, handleSubmit } = useAddItem(state)
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

将方法抽离出来,用类似于导入的方式进行一个抽离,将数据与方法放在一起,便于我们的统一管理。

2.3.2reactive()再进行进一步文件拆分并且引入

【vue3】组合式API之setup()介绍与reactive()函数的使用
App.vue

<template>
  <form >
      <input type="text" v-model="user.id" />
      <input type="text" v-model="user.name" />
      <button type="submit" @click.prevent="submit">提交</button>
  </form>
  <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
  </ul>
</template>

<script>
import {useRemoveItem,handleSubmit} from './hooks'
  export default {
      name: 'App',
      setup() {
          const { state, removeItem } = useRemoveItem()
          const { user, submit } = handleSubmit(state)
          return {
              state,removeItem,user,submit
          }
      },
  }
</script>

hooks/index.js

import { reactive } from 'vue'
export const useRemoveItem=()=> {
  const state= reactive( {
          arr: [
                    {
                        id: 0,
                        name: 'ifer',
                    },
                    {
                        id: 1,
                        name: 'elser',
                    },
                    {
                        id: 2,
                        name: 'xxx',
                    },
                ]
              })
  const removeItem=(index)=>{
      state.arr.splice(index,1)
            console.log(state.arr);
          }
      return { state, removeItem }
}
export const handleSubmit=(state)=>{
  const user = reactive({
                id: '',
                name: '',
            })
            console.log(1);
  const submit = () => {
       state.arr.push({
        ...user
       })
       user.id = ''
       user.name = ''
            }
      return { user, submit }
}

至此本文结束,愿你有所收获!
期待大家的关注与支持! 你的肯定是我更新的最大动力!!!文章来源地址https://www.toymoban.com/news/detail-408287.html

到了这里,关于【vue3】组合式API之setup()介绍与reactive()函数的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3组合式API介绍

    根据官方的说法,vue3.0的变化包括性能上的改进、更小的 bundle 体积、对 TypeScript 更好的支持、用于处理大规模用例的全新 API,全新的api指的就是本文主要要说的组合式api。 在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式: M

    2023年04月22日
    浏览(63)
  • 【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由

    注意了,在vue3中的setup函数中是不可以使用beforeRouterEnter这个路由守卫的,请看vue-router的官方文档  导航守卫 | Vue Router 由此可见,在使用组合式api的时候,只有update和leave守卫,不符合我们的要求。 使用 script  setup/script这种形式的脚本,无法监听来源路由 方法一、我们可以

    2024年02月13日
    浏览(38)
  • Vue3组合式API

    目录 composition API vs options API 体验 composition API setup 函数 reactive 函数 ref 函数 script setup 语法 计算属性 computed 函数 监听器 watch 函数 生命周期 模板中 ref 的使用 组件通讯 - 父传子 组件通讯 - 子传父 依赖注入 - provide 和 inject 保持响应式 - toRefs 函数 vue2 采用的就是 options API (

    2024年02月07日
    浏览(66)
  • 快速入门vue3组合式API

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 使用create-vue创建项目 熟悉项目目录和关键文件  组合式API  setup选项 setup选项的写法和执行时机 script setup 语法糖 reactive和ref函数 reactive() ref() computed watch 侦听单个数据

    2024年02月12日
    浏览(50)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(65)
  • vue3 组合式 api 单文件组件写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API,Composition API 更加灵活和可扩展。 在 Composition API 中,我们使用 setup 函数来定义组件的逻辑部分。setup 函数是一个特殊的函数,在创建组

    2024年02月12日
    浏览(41)
  • vue3组合式api单文件组件写法

    一,模板部分  二,js逻辑部分 

    2024年02月13日
    浏览(51)
  • 带你了解vue3组合式api基本写法

    本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 一、Vue3 里 script 的三种写法 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vu

    2024年02月01日
    浏览(81)
  • vue3:7、组合式API-watch

     

    2024年02月09日
    浏览(44)
  • Vue3: 选项式API和组合式API的优缺点

    Vue框架提供了两种不同的API风格来编写组件,分别是 选项式API 和 组合式API 。 一.选项式API: 选项式API是vue2.x版本中默认使用的API风格,它是基 于对象的方式 来描述组件的行为和状态的。选项式API需要在Vue组件的选项对象中声明组件的属性和方法,如data、methods、computed、

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包