Vue3-01 组合式API

最新推荐文章于 2026-05-29 08:17:31 发布
原创 最新推荐文章于 2026-05-29 08:17:31 发布 · 597 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
Vue

当前文章被收录于：

Vue
36 篇文章 2 人学习
订阅专栏 查看详情
本文介绍了Vue3的升级过程，包括VueCLI的更新、项目创建、Vue实例、Router和Store的创建。重点讨论了组合式API的调用时机、返回值、参数以及在模板中的使用。同时，对比了Vue3的生命周期钩子和Vue2的变化，探讨了响应式修改、依赖注入、模板Refs的使用，并与React Hooks进行了比较。文章指出，Vue3的组合式API旨在提供更灵活的代码复用和逻辑提取，但需要开发者保持良好的代码组织。

文章目录

升级到Vue3

升级VueCLI

VueCLI需要在4.3.1以上才可以支持Vue3

npm update -g @vue/cli

vue -V
@vue/cli 4.4.6

创建项目

vue create vue3-learning
vue add vue-next # 添加 vue3 插件升级为 vue3

在创建项目时选择手动添加配置，选择vue-router和Vuex，这样创建完的项目各个插件也都会升级为支持Vue3的版本

{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.6",
    "vuex": "^4.0.0-alpha.1"
  }
}

创建Vue实例

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

创建Router

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

创建路由的方式与以前有所变化，路由模式除了Hash模式（createWebHashHistory）和History模式（createWebHistory），还多了带缓存的History路由（createMemoryHistory）

使用路由跳转的API也有所变化：

import {useRouter} from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goHome = () => router.push('/');
    return {goHome}
  }
}

关于router的具体变化，后面再单独学习

创建Store

import {createStore} from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    changeCount(state, isAdd) {
      state.count = isAdd ? state.count + 1 : state.count - 1;
    }
  },
  actions: {},
  modules: {}
});

使用：

import {useStore} from 'vuex';

export default {
  setup() {
    const store = useStore();
    const storeState = store.state;
    return {storeState}
  }
}

可以看出来，Vuex和vue-router，API都有了一些变化，与React Hooks的API很类似，但是基本原理没有太大变化

setup

setup函数是新的Composition API的入口点

调用时机

setup在创建组件之前调用（在beforeCreate之前），Props初始化后就会调用setup函数，在beforeCreate钩子前被调用

返回值

setup返回的对象的属性将被合并到组件模板的渲染上下文，也可以返回一个渲染函数

参数

接受两个参数：

  • props
  • context

props

接受props作为第一个参数，使用的时候，需要首先声明props：

export default {
  props: {
    name: String,
  },
  setup(props) {
    console.log(props.name)
  },
}

props是响应式的，前提是不对props进行解构，解构后会失去响应性

如果需要结构props，可以通过使用roRefs来完成解构操作，并且保持响应式：

import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)

  console.log(title.value)
}

如果title是一个可选的Prop，此时toRefs不会为title创建一个ref，需要使用toRef来创建响应式变量：

import { toRef } from 'vue'

setup(props) {
  const title = toRef(props, 'title')

  console.log(title.value)
}

context

setup第二个参数是上下文对象context，从2.x中的this选择性地暴露出三个组件的属性attrs、slots、emit。context就是一个普通的JavaScript对象，它不是响应式的，所以可以对context进行解构，不需要担心失去响应性

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

// 或者
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

this的用法

this在setup中不可用，它并不会指向该组件实例

访问组件的Property

执行setup时，组件实例尚未被创建，因此只能访问slots/props/attrs/emit这些组件属性，无法访问computed、data、methods组件选项

结合模板使用

如果setup返回一个对象，那么可以在组件模板中直接使用，就如同使用Props一样

<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

setup返回的refs在模板中访问是被自动解开的，不需要在模板中使用.value

生命周期

生命周期钩子函数只能在setup期间同步使用，在组件卸载时，生命周期内部创建的侦听器和计算状态也会被自动删除

与Vue2.x相比，beforeCreated和created被删除了，对应的逻辑在setup内部完成，其他的生命周期钩子都改为了onXxx的形式（beforeDestoryed改为了onBeforeUnmount，destroyed改为了onUnmounted）

两个新增的调试钩子函数onRenderTracked和onRenderTriggered：

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}

函数接受一个回调函数，当钩子被组件调用时将会被执行

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

依赖注入

基本使用

使用provide和inject实现依赖注入，与2.x版本中基本一致，只能在setup中使用

import { provide, inject } from 'vue'

const ThemeSymbol = Symbol()

const Ancestor = {
  setup() {
    provide(ThemeSymbol, ref('dark'))
  },
}

const Descendent = {
  setup() {
    const theme = inject(ThemeSymbol, ref('light') /* optional default value */)
    return {
      theme,
    }
  },
}

使用ref传值可以保证provided和injected之间值的响应性

响应式修改

在使用响应式provide/inject时，建议尽可能，在提供者内保持响应式Property的任何更改

如果需要在注入数据的组件内部更新inject的数据，在这种情况下，建议provide一个方法来负责改变响应式Property的方法，让注入方调用

如果要确保通过provide传递的数据不会被inject的组件更改，可以对提供者的Property使用readonly

import { provide, reactive, readonly, ref } from 'vue'

export default {
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    const updateLocation = () => {
      location.value = 'South Pole'
    }

    provide('location', readonly(location))
    provide('geolocation', readonly(geolocation))
    provide('updateLocation', updateLocation)
  }
}

getCurrentInstance

如果在setup中要访问组件实例，需要使用这个方法来访问，例如在app.config.globalProperties定义了全局变量，如果希望在setup中访问，就要用到这个方法：

// main.js
app.config.globalProperties.$http = () => {
  console.log(123);
};

// 组件中
import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

    internalInstance.appContext.config.globalProperties.$http(); // 访问 globalProperties
  }
}

注意，它只能在setup和生命周期钩子中调用，如果在其外调用（例如Event Listener中）需要在setup中调用getCurrentInstance()获取实例后传入对应的函数中使用

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance(); // works

    // 在组合式函数中调用也可以正常执行
    const id = useComponentId();// works

    const handleClick = () => {
      getCurrentInstance(); // doesn't work
      useComponentId(); // doesn't work

      internalInstance; // works
    }

    onMounted(() => {
      getCurrentInstance() // works
    });

    return () =>
      h(
        'button',
        {
          onClick: handleClick
        },
        `uid: ${id}`
      )
  }
}


function useComponentId() {
  return getCurrentInstance().uid
}

模板Refs

常规使用

Vue2.x中的ref原本是用于获取DOM的， Vue3中ref不仅可以响应化数据，也可以实现获取DOM的功能

<template>
  <div ref="root"></div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // 在渲染完成后, 这个 div DOM 会被赋值给 root ref 对象
        console.log(root.value) // <div/>
      })

      return {
        root,
      }
    },
  }
</script>

在setup中声明一个ref并返回，在模板中声明ref并且值与返回的ref相同，这时在渲染初始化后（onMounted）就可以获取分配的DOM或组件实例

在v-for中使用

在v-for中使用时，需要使用3.0新增的函数形的ref，为ref赋值：

<template>
  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

  export default {
    setup() {
      const list = reactive([1, 2, 3])
      const divs = ref([])

      // 确保在每次变更之前重置引用
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs,
      }
    },
  }
</script>

侦听模板引用

在watch或者watchEffect中引用Dom Ref，需要使用flush: 'post'选项，因为默认情况下watch和watchEffect的副作用函数是在DOM被挂载或者更新之前运行的，此时模板引用还没有被更新

使用了flush: 'post' ，保证监听器在DOM更新后执行副作用，确保模板引用于DOM保持同步，引用正确元素

组合式API实现更灵活的复用

Mixin的缺点

  • 容易发生冲突
  • 可复用性优先，不能向Mixin传递参数来改变逻辑，降低了在抽象逻辑方面的灵活行

Vue3的组合式API就是为了解决这些问题而存在的

更多的灵活性来自更多的自我克制

组合式API的初衷就是为了实现更有组织的代码，实现更灵活的逻辑提取与复用，在代码中会出现更多的、零碎的函数模块，在不同的位置、不同的组件间进行重复调用

它可以避免Vue2.x时代逻辑复用的几种主要形式（Mixin/HOS/SLOT）的弊端，带来了比较明显的好处：

但是它在提到了代码质量的上限的同时，降低了下线，setup中会出现大量面条式的代码，避免这种糟糕情况的关键就是，将逻辑更合理的划分为单独的函数，将setup作为一个入口，在其中进行不同组合函数的调用。

与React Hooks比较

Vue3的基于函数的组合式API受到了React Hooks的启发，在很多思维模型方面与React Hooks很类似，提供了同等级别的逻辑组合能力，但是也有着比较明显的不同，组合式API的setup函数只会被调用一次，也就意味着使用组合式API时：

  1. 不需要考虑调用顺序，可以用在条件语句中（React Hooks不可以）
  2. 不会再每次渲染时重复执行，降低垃圾回收的压力（React Hooks每次渲染都会重复执行）
  3. 不存在内联处理函数导致子组件永远更新的问题，也不需要useCallback（React Hooks需要用useCallback进行性能优化）
  4. 不存在忘记记录依赖的问题，也不需要useEffecr和useMemo并传入依赖数组以捕获过时的变量，Vue的自动以来可以确保侦听器和计算值总是准确无误的（React Hooks需要手动记录依赖）
Vue3笔记_01setup与常用的Composition API(组合式API)
qq_43260366的博客
11-27 1347
传送门组件中所用到的：数据、方法，均要配置在setup中(不需要在data、methods中进行配置了)setup() {// [1]定义数据(原来在data中,现在在setup中配置) let 变量名 = 值 // [2]声明方法(原来在methods中声明，现在在setup中声明) 方法名 function() {//... } ... // 返回值 return ... }setup函数有两种返回值：若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用（重点关注！）
DIY压电陶瓷传感器信号放大：从拆解到JFET电路实战（附示波器实测数据）
weixin_29195615的博客
03-11 294
本文详细介绍了如何利用废旧设备拆解的压电陶瓷片，结合JFET（结型场效应管）高输入阻抗特性，DIY搭建高灵敏度振动传感器放大电路。从元件拆解、参数实测到JFET共源极放大器实战搭建与调试，提供了完整的步骤、示波器实测数据及优化方案，帮助电子爱好者实现低功耗振动检测应用。
vue3-router
skdjbd的博客
03-18 633
vue3的路由和vue2的路由版本核心方法基本保持一致的,重点是vue3路由中的composition组合式的使用方式。
PyTorch实战（21）——扩散模型（Diffusion Model）
盼小辉丶的博客
01-08 2610
扩散模型通过简单的噪声扩散过程，就能创造出高质量的超现实图像。在本节中，我们首先学习了扩散如何用于图像生成，了解了扩散模型的内部运作机制。随后基于动漫图像数据集，使用 PyTorch 和 Hugging Face 框架训练和运行自定义扩散模型，生成逼真动漫图像。
Vue3 项目实战与性能优化：组合式 API 进阶、响应式高级用法、可复用逻辑封装与新特性全解
最新发布
qq_40303030的博客
05-29 1139
本文深入解析Vue3高级特性，涵盖组合式API进阶、响应式系统优化、自定义hooks封装和核心新特性应用。重点讲解了setup语法糖、toRef/toRefs解决响应式丢失、shallowRef/shallowReactive优化大数据性能、Teleport解决DOM层级限制等核心知识点，并提供企业级实战案例。文章还总结了Vue3项目性能优化方案，包括响应式优化、代码体积控制、渲染性能提升和内存管理技巧，帮助开发者真正掌握Vue3设计思想，写出高质量代码。
Vue3组合式API之getCurrentInstance详解（在行为验证码之滑动验证AJ-Captcha遇到在开发环境可以，测试环境报错）
m0_52263688的博客
11-01 2373
ctx和proxy都是getCurrentInstance()对象中的属性，通过解构赋值的方式拿到。但是在Vue3中，在setup中无法通过this获取组件实例的。所以在Vue3中，我们可以通过getCurrentInstance()来获取当前组件实例。首先大家知道我们可以通过 getCurrentInstance这个函数来获取当前组件的实例对象,也就是当前vue这个实例对象。由于本人在使用AJ-Captcha插件的过程中发现在开发环境调试正常，但是测试环境会报错，获取不到组件实例。开发中只适用于调试！
vue3入门起步
babyxuqian的博客
04-14 1552
在vue3中需要什么就引入什么：import { } from "vue"; （注意：在vue3中只有响应式数据才能在页面中特别渲染变化） setup函数 简介：setup函数是vue3专门为组件提供的新属性 执行：创建组件实例，初始化props，然后就调用setup，在生命周期beforeCareat钩子之前调用 reactive函数 reactive函数接收一个普通对象，返回一个响应式对象 模板语法----循环语句 <template> <div class="m
前端基础之《Vue（28）—Vue3 组合API》
csj50的专栏
07-31 582
组合API介绍
【小兔鲜】day01 项目、Vue3介绍、组合式API、小案例
Blue_Pepsi_Cola的博客
03-30 1073
通过一个Counter案例体验Vue3新引入的组合式API。（下一代前端工具链），为开发提供极速响应。是Vue官方新的脚手架工具，底层切换到了。使用create-vue创建项目。
01.Vue3组合式API·响应式·模板渲染基础Ref，Reavtive
wenlan_859122329的博客
08-03 364
ref声明响应式变量案例。
【Vue3 实战系列·第 01 篇】组合式 API 与响应式：ref·reactive·computed·watch——从选项式到组合式的思维转换
小李同学_LSH的博客
05-26 814
Vue3组合式API带来了从选项式到逻辑组织的思维转变。核心响应式系统包括：ref()处理任意类型响应式数据，reactive()深度响应式处理对象，需注意解构陷阱；computed()自动追踪依赖实现派生状态，具有缓存特性；watch/watchEffect提供精确或自动的数据侦听，支持异步操作和副作用清理。组合式API的精髓在于将状态与逻辑封装为可复用的Composables函数，解决了Vue2 Mixins的命名冲突问题。本文通过对比ref与reactive的适用场景，详解computed与watch
小兔鲜Vue3 项目学习笔记Day01
不被定义的程序媛写的博客儿
05-18 2541
vue3现在使用很广泛，必学！vue3项目，本文主要是学习项目功能实现并进行总结。配套资料的话去B站下方自己拿。持续更新…
Vue3+Ts+Vite入门
weixin_67455784的博客
08-01 586
v3+Ts+vite
Vue3 常用的10个组合式 API
weixin_57031986的博客
02-06 1286
Vue3 常用的10个组合式 API
Vue3详细教程
热门推荐
m0_55734030的博客
11-06 2万+
（1）新增组合式api（2）更加接近原生（3）更加解耦（react启发）setup api ref 创建值类型响应式数据方法 在seup内部需要 .value 来访问设置值 reactive 创建引用类型响应式数据方法 defineProps 定义 组传的传参props defineEmits 定义组件发送的事件 watch 监听一个数据的变化 watchEffect 监听多个数据 生命周期 setup中的生命周期，没有beforeCreate与create
vuejs中组件的两种不同的编写风格-选项式API及组合式API
itclanCoder
12-25 2450
前言随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Teleport,Suspense,也去掉了vue2中一些特性,比如:移除keyCode支持作为v-on的修饰符等在编程风格上也有一些区别01选项式API选项式API也可以成为配置项API,它是将组件的实例选项...
Vue3.0 组合式 API 分析与实践
weixin_41888295的博客
06-11 1489
本文带大家深入理解组合式 API 的设计详情，同时加入我们的实践经验总结。 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性，其中组合式 API（Composition API），一组附加的、基于功能的 API 被作为一种新的逻辑复用和代码组织的方式提供给了开发者，提供更加灵活的组合组件逻辑能力。同时组合式 API 通过使用简单的变量和函数，也提供了更好的类型推断，这使得通过新的 API 编写的代码即使不用 TypeScript 也可以通过 IDE 的支持方便的获得类型提示。组合式 API
Vue3组合式API详解
iamkaikai的博客
07-20 315
搜索提示列表搜索结果列表搜索记录列表< div align = center > < img src = "./img/05-01-搜索案例.png" / > < div > 搜索案例 < / div > < / div >那么分别通过选项式和组合式是如何组织和实现代码的呢？可以发现选项式组织代码的时候，代码的跳跃性特别的强，对于后期维护特别的不方便；而组合式则是把相同功能的代码放到一起，功能独立，易于维护。
Vue3 组合式API
weixin_44952258的博客
08-01 1017
本篇文章主要为笔者师从杨洪波老师学习Vue3.0的随手笔记,本篇文章结合了Vue3.0官方文档
Vue3 day01
babicu123的博客
07-17 1306
导入main.js。
快速打通 Vue 3（一）：基本介绍与组合式 API
kkq的博客
01-02 1307
迁移文档2020年9月18日，Vue.js发布版3.0One Piece，距离现在已经三年多了，期间也经历了很多更新，开始学Vue的时候可以从Vue 3开始学起。截止我写这篇博客的时候，最新的版本为v3.4.3新的版本在各方面都有重大的升级比如打包大小大幅减小，渲染速度大幅提升，内存占用减小，并且开始拥抱TypeScript，并且引入了新的特性接下来我们看看创建的 Vue 3 项目通过vite创建的项目和我们之前通过Vue CLI创建的整体是差不多的。但因为我们引入了TypeScript。
海康威视存储解除企业级硬盘限制
海康卫视存储必须企业级硬盘，否则认不到，可以上传这个文件，解除限制
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值