Vue3 组合式 API

简介: Vue3 组合式 API

Vue3 组合式 API(Composition API) 主要用于在大型组件中提高代码逻辑的可复用性。

传统的组件随着业务复杂度越来越高,代码量会不断的加大,整个代码逻辑都不易阅读和理解。

Vue3 使用组合式 API 的地方为 setup。

在 setup 中,我们可以按逻辑关注点对部分代码进行分组,然后提取逻辑片段并与其他组件共享代码。因此,组合式 API(Composition API) 允许我们编写更有条理的代码。

对比以下两端代码:

1、传统组件

2、组合式 API

setup 组件

setup() 函数在组件创建 created() 之前执行。

setup() 函数接收两个参数 props 和 context。

第一个参数 props,它是响应式的,当传入新的 prop 时,它将被更新。

第二个参数 context 是一个普通的 JavaScript 对象,它是一个上下文对象,暴露了其它可能在 setup 中有用的值。

以下实例使用组合 API 定义一个计数器:

<template>
    <div>
        <p>计数器实例: {{ count }}</p>
        <input @click="myFn" type="button" value="点我加 1">
    </div>
</template>
<script> 
import {ref, onMounted} from 'vue';
export default {
    setup(){
        //定义初始值为0的变量,要使用ref方法赋值,直接赋值的话变量改变不会更新 UI
        let count = ref(0);
        // 定义点击事件 myFn
        function myFn(){
            console.log(count);
            count.value += 1;
        }
       
       // 组件被挂载时,我们用 onMounted 钩子记录一些消息
        onMounted(() => console.log('component mounted!'));
        // 外部使用组合API中定义的变量或方法,在模板中可用。
        return {count,myFn} // 返回的函数与方法的行为相同
    }
}
</script>

在 Vue 3.0 中,我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用,如下所示:

import { ref } from 'vue'
let count = ref(0);

ref() 函数可以根据给定的值来创建一个响应式的数据对象,返回值是一个对象,且只包含一个 .value 属性。

在 setup() 函数内,由 ref() 创建的响应式数据返回的是对象,所以需要用 .value 来访问。

import { ref } from 'vue'
const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
相关文章
|
15天前
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
40 0
|
14天前
|
JavaScript 架构师 API
Vue 3.x全面升级指南:Composition API深度探索
Vue 3.x 的全面升级引入了 Composition API,这是对 Vue 2.x 传统 Options API 的一个重大改进,它提供了更加灵活和模块化的代码组织方式.
15 0
|
15天前
|
JavaScript API 开发者
Vue3有哪些常用的API
Vue3有哪些常用的API
13 1
|
15天前
|
JavaScript 前端开发 API
组合API:掌握Vue的组合式API(Composition API)
【4月更文挑战第24天】Vue.js的组合式API是Vue 3中的新特性,旨在提供更灵活的组件逻辑组织方式。它允许开发者像React Hooks一样定义和复用逻辑单元——组合函数。通过组合函数,可以跨组件共享和管理状态,提升代码复用和维护性。本文介绍了如何开始使用组合式API,包括安装Vue CLI、引入API、使用组合函数以及组织和复用逻辑。掌握组合式API能增强开发复杂应用的能力,改善代码结构和可读性。
|
15天前
|
JavaScript API
Vue3 API函数及功能
Vue3 API函数及功能
9 0
|
15天前
|
JavaScript API
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记
32 3
|
3天前
|
监控 数据挖掘 API
京东商品API接口:电商数据自动化的钥匙
京东商品API接口为电商领域带来了巨大的便利和潜力。通过本篇文章,读者应该能够了解如何使用京东商品API接口,并通过示例代码学习如何实际调用API获取商品数据。 随着技术的不断发展,京东商品API接口将继续为电商自动化、数据分析和市场研究提供支持,帮助商家和开发者在竞争激烈的市场中保持领先。我们鼓励读者继续探索和学习,充分利用京东商品API接口带来的机遇。
|
13天前
|
监控 安全 数据挖掘
Email 接口API有哪些?具体分析一下阿里云和AOK的优点
本文介绍了常见的Email接口API,如阿里云邮件推送、AOKSend、SendGrid、Mailgun和Amazon SES。阿里云API以其高稳定性和数据分析功能脱颖而出,支持批量发送和多语言;而AOKSend API以易于集成、高安全性和优秀客户支持为亮点。企业在选择时应考虑自身需求和预算,以优化邮件营销效果。
|
13天前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
14天前
|
JSON 安全 API
解锁淘宝商品评论API接口:电商数据分析的新视角
淘宝商品评论API接口是淘宝开放平台提供的一组API接口,允许开发者通过编程方式获取淘宝商品评论数据。这些接口可以获取到商品的详细信息、用户评论、评分等数据,为电商数据分析提供了丰富的素材。