vue3组合式API

为什么要用组合式API,我们来看看它是如何解决vue2的局限性的

1.vue2的局限性

  1. 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护。

vue2组件采用配置式API,props,data,methods等相关的配置会被放在一起,导致同样的功能块分散,并和其他的功能块混合。我们希望统一功能块的代码可以放在一起,增加可读性


  1. vue2的代码复用机制存在缺点,(Mixins)
  • 容易冲突
  • 依赖关系不明确,不易维护
  • 函数式的mixins不能在实例化过程中使用
  1. 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的更多相关文章

  1. 解决WebStorm无法正确识别Vue3组合式API的问题

    1 问题描述 Vue3的组合式API无法在WebStorm中正确识别,表现为defineComponent等无法被识别: 2 尝试方案 猜想这种问题的原因是无法正确识别对应的Vue3库,笔者相信Web ...

  2. [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处

    前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...

  3. Vue3 组合式 API 中获取 DOM 节点的问题

    模板引用 Vue 提供了许多指令让我们可以直接操作组件的模板.但是在某些情况下,我们仍然需要访问底层 DOM 元素.在模板中添加一个特殊的属性ref就可以得到该元素. 访问模板引用 <scrip ...

  4. 第三十五篇:vue3,(组合式api的初步理解)

    好家伙, 来一波核心概念:数据劫持是响应式的核心 1.由set up开始 (1)vue3中的一个新的配置项,值为一个函数. (2)组件中所用的到的:数据,方法,计算属性均要配置在set up中. (3 ...

  5. 一篇文章讲明白vue3的script setup,拥抱组合式API!

    引言 vue3除了Composition API是一个亮点之外,尤大大又给我们带来了一个全新的玩意 -- script setup,对于setup大家相信都不陌生,而对于script setup有些同 ...

  6. Vue3全局APi解析-源码学习

    本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...

  7. Vue3 Composition API写烦了,试试新语法糖吧—setup script

    前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...

  8. 熬夜讲解vue3组合API中setup、 ref、reactive的用法

    1.初识setUp的使用 简单介绍下面的代码功能: 使用ref函数,去使用监听某一个变量的变化,并且把它渲染到视图上. setUp函数是组合API的入口函数.这个是非常重要的. setUp可以去监听变 ...

  9. Vue3 中有哪些值得深究的知识点?

    众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...

随机推荐

  1. DDD 领域驱动设计之面向对象思想

    面向对象 面向对象是一种对世界理解和抽象的方法.那么对象是什么呢? 对象是对世界的理解和抽象,世界又代称为万物.理解世界是比较复杂的,但是世界又是由事物组成的. 正是这样的一种关系,认识事物是极其重要 ...

  2. 跨平台跨架构的统信DTK开发套件教程及常见问题

    DTK是统信基于Qt开发的一整套简单且实用的通用开发框架,处于统信UOS系统中的核心位置,统信UOS浏览器.音乐.邮件等40余款原生应用全部使用DTK开发.DTK从开发者的角度出发,融合现代化的开发理 ...

  3. TLS 1.0 至 1.3 握手流程详解

    概述 TLS 全称为 Transport Layer Security(传输层安全),其前身是 SSL,全称为 Secure Sockets Layer(安全套接字层),它的作用是为上层的应用协议提供 ...

  4. 爬虫简介与requests模块

    爬虫简介与requests模块 一 爬虫简介 概述 网络爬虫是一种按照一定规则,通过网页的链接地址来寻找网页的,从网站某一个页面(通常是首页)开始,读取网页的内容,找到网页中的其他链接地址,然后通过这 ...

  5. Django APIView源码解析

    APIView使用:luffy项目中关于APIView的使用 在Django之 CBV和FBV中,我们是分析的from django.views import View下的执行流程,以下是代码 fro ...

  6. 使用gdb

    1.设置断点,在源程序第16 行处 (gdb)break 16 Breakpoint 1 at 0x8048496: file tst.c, line 16. 2.设置断点,在函数func()入口处. ...

  7. C# WinForm 解决子窗体放大后,子窗体图标放大的问题

    解决子窗体放大后,子窗体的图标占用主窗体的菜单栏的问题. C#子窗体最大化时, 那个图标跑到主窗体的前面去了, 造成界面不统一也不美观. 所以需要进行处理, 只要有主窗体的菜单ItemAdded事件中 ...

  8. (bzoj4408)[FJOI2016]神秘数(可持久化线段树)

    (bzoj4408)[FJOI2016]神秘数(可持久化线段树) bzoj luogu 对于一个区间的数,排序之后从左到右每一个数扫 如果扫到某个数a时已经证明了前面的数能表示[1,x],那么分情况: ...

  9. 为什么你需要在用 Vue 渲染列表数据时指定 key

    本文改写整理自一篇博文,原文链接如下: Why you should use the key directive in Vue.js with v-for Application state and ...

  10. SpringDataJdbc使用数据库默认值的解决方法

    SpringDataJdbc提供了 @ReadOnlyProperty 注解,这会造成由Repository保存的实体会忽略这个字段的值进行保存,进而采用数据库的默认值操作:而查询时这个字段也是能够查 ...