vue3组合式API
vue3组合式API
为什么要用组合式API,我们来看看它是如何解决vue2的局限性的
1.vue2的局限性
- 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护。
vue2组件采用配置式API,props,data,methods等相关的配置会被放在一起,导致同样的功能块分散,并和其他的功能块混合。我们希望统一功能块的代码可以放在一起,增加可读性

- vue2的代码复用机制存在缺点,(Mixins)
- 容易冲突
- 依赖关系不明确,不易维护
- 函数式的mixins不能在实例化过程中使用
- vue2对ts的支持度不够友好
2.组合式API的基本用法
组合式API是vue3新增的语法,它并没有替代vue2的配置API,vue2原先的用法不变。组合式API只是更高级的语法
1. setup和ref方法
1<template>
2 <div>
3 <p>Capacity: {{ capacity }}</p>
4 <button @click="increaseCapacity()">Increase Capacity</button>
5 <h2>Attending</h2>
6 <ul>
7 <li v-for="(name, index) in attending" :key="index">{{ name }}</li>
8 </ul>
9 </div>
10</template>
11
12<script>
13import { ref } from "vue";
14export default {
15 setup() {
16 const capacity = ref(4);
17 function increaseCapacity() {
18 capacity.value++;
19 }
20 const attending = ref(["Tim", "Bob", "Joe"]);
21 return { capacity, attending, increaseCapacity };
22 }
23};
24</script>
使用ref创建响应式数据,模板中使用ref对象会自动结构[ref].value,不需要手写.value
2. reactive和computed方法
1<template>
2 <p>Spaces Left: {{ spacesLeft }} out of {{ capacity }}</p>
3 <h2>Attending</h2>
4 <ul>
5 <li v-for="(name, index) in attending" :key="index">
6 {{ name }}
7 </li>
8 </ul>
9 <button @click="increaseCapacity()">Increase Capacity</button>
10</template>
11
12<script>
13import { reactive, computed, toRefs } from "vue";
14export default {
15 setup() {
16 const event = reactive({
17 capacity: 4,
18 attending: ["Tim", "Bob", "Joe"],
19 spacesLeft: computed(() => {
20 return event.capacity - event.attending.length;
21 })
22 });
23 function increaseCapacity() {
24 event.capacity++;
25 }
26 return { ...toRefs(event), increaseCapacity };
27 }
28};
29</script>
直接解构event会导致响应式失效,使用toRefs解构可以规避
3. 可复用的setup
1<template>
2 ...
3</template>
4<script>
5import useEventSpace from "@/use/event-space";
6import useMapping from "@/use/mapping";
7export default {
8 setup() {
9 return { ...useEventSpace(), ...useMapping() }
10 }
11};
12</script>
13
14<!-- event-space.js -->
15import { ref, computed } from "vue";
16export default function useEventSpace() {
17 const capacity = ref(4);
18 const attending = ref(["Tim", "Bob", "Joe"]);
19 const spacesLeft = computed(() => {
20 return capacity.value - attending.value.length;
21 });
22 function increaseCapacity() {
23 capacity.value++;
24 }
25 return { capacity, attending, spacesLeft, increaseCapacity };
26}
4. setup中的生命周期
- vue3中 beforeDestroy 和 destroyed 更名为 beforeUnmount 和 unmounted
- setup中使用生命周期函数需在函数前加on
- setup中不需要使用beforeCreate和created周期函数,- setup中函数的执行顺序是 beforeCreate() -> setup() -> created()
- 新增两个生命周期:onRenderTracked 和 onRenderTriggered
5. watch
1<template>
2 <div>
3 Search for <input v-model="searchInput" />
4 <div>
5 <p>Number of events: {{ results }}</p>
6 </div>
7 </div>
8</template>
9<script>
10import { ref, watch } from "@vue/composition-api";
11import eventApi from "@/api/event.js";
12export default {
13 setup() {
14 const searchInput = ref("");
15 const results = ref(0);
16 watch(() => {
17 results.value = eventApi.getEventCount(searchInput.value);
18 });
19 <span class="hljs-keyword">return</span> { searchInput, results };
20 }
21};
22</script>
23
24<!-- watch 传参 -->
25watch(searchInput, (newVal, oldVal) => {
26 ...
27});
28watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
29 ...
30});

vue3组合式API的更多相关文章
- 解决WebStorm无法正确识别Vue3组合式API的问题
1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信Web ...
- [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处
前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...
- Vue3 组合式 API 中获取 DOM 节点的问题
模板引用 Vue 提供了许多指令让我们可以直接操作组件的模板.但是在某些情况下,我们仍然需要访问底层 DOM 元素.在模板中添加一个特殊的属性ref就可以得到该元素. 访问模板引用 <scrip ...
- 第三十五篇:vue3,(组合式api的初步理解)
好家伙, 来一波核心概念:数据劫持是响应式的核心 1.由set up开始 (1)vue3中的一个新的配置项,值为一个函数. (2)组件中所用的到的:数据,方法,计算属性均要配置在set up中. (3 ...
- 一篇文章讲明白vue3的script setup,拥抱组合式API!
引言 vue3除了Composition API是一个亮点之外,尤大大又给我们带来了一个全新的玩意 -- script setup,对于setup大家相信都不陌生,而对于script setup有些同 ...
- Vue3全局APi解析-源码学习
本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...
- Vue3 Composition API写烦了,试试新语法糖吧—setup script
前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...
- 熬夜讲解vue3组合API中setup、 ref、reactive的用法
1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变 ...
- Vue3 中有哪些值得深究的知识点?
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
随机推荐
- DDD 领域驱动设计之面向对象思想
面向对象 面向对象是一种对世界理解和抽象的方法.那么对象是什么呢? 对象是对世界的理解和抽象,世界又代称为万物.理解世界是比较复杂的,但是世界又是由事物组成的. 正是这样的一种关系,认识事物是极其重要 ...
- 跨平台跨架构的统信DTK开发套件教程及常见问题
DTK是统信基于Qt开发的一整套简单且实用的通用开发框架,处于统信UOS系统中的核心位置,统信UOS浏览器.音乐.邮件等40余款原生应用全部使用DTK开发.DTK从开发者的角度出发,融合现代化的开发理 ...
- TLS 1.0 至 1.3 握手流程详解
概述 TLS 全称为 Transport Layer Security(传输层安全),其前身是 SSL,全称为 Secure Sockets Layer(安全套接字层),它的作用是为上层的应用协议提供 ...
- 爬虫简介与requests模块
爬虫简介与requests模块 一 爬虫简介 概述 网络爬虫是一种按照一定规则,通过网页的链接地址来寻找网页的,从网站某一个页面(通常是首页)开始,读取网页的内容,找到网页中的其他链接地址,然后通过这 ...
- Django APIView源码解析
APIView使用:luffy项目中关于APIView的使用 在Django之 CBV和FBV中,我们是分析的from django.views import View下的执行流程,以下是代码 fro ...
- 使用gdb
1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...
- C# WinForm 解决子窗体放大后,子窗体图标放大的问题
解决子窗体放大后,子窗体的图标占用主窗体的菜单栏的问题. C#子窗体最大化时, 那个图标跑到主窗体的前面去了, 造成界面不统一也不美观. 所以需要进行处理, 只要有主窗体的菜单ItemAdded事件中 ...
- (bzoj4408)[FJOI2016]神秘数(可持久化线段树)
(bzoj4408)[FJOI2016]神秘数(可持久化线段树) bzoj luogu 对于一个区间的数,排序之后从左到右每一个数扫 如果扫到某个数a时已经证明了前面的数能表示[1,x],那么分情况: ...
- 为什么你需要在用 Vue 渲染列表数据时指定 key
本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...
- SpringDataJdbc使用数据库默认值的解决方法
SpringDataJdbc提供了 @ReadOnlyProperty 注解,这会造成由Repository保存的实体会忽略这个字段的值进行保存,进而采用数据库的默认值操作:而查询时这个字段也是能够查 ...