分类：composition

2022
05-12

Vue3 composition API实现逻辑复用的方法

CompositionAPI实现逻辑复用的步骤：抽离逻辑代码到一个函数，这个函数命令约定为useXXX格式（这点同ReactHooks）在setup中引用函数useXXX举下例子，定义一个获取当前鼠标位置的方法第一种，直接使用ref定义的useMousePosition：这种方式，导出和导入都可以随意解构//useMousePosition.jsimport{ref,onMounted,onUnmounted}from'vue'//1.定义一个函数,抽离逻辑，命名使用useXXXfunctionuseMousePosition(){... 继续阅读 >
2021
07-01

C++ 组合 (Composition)的介绍与实例

概述c++中一个重要的特点就是代码的重用，为了代码重用，有两个非常重要的手段，一个是继承，一个是组合组合(Composition)指在一个类中另一类的对象作为数据成员.案例在平面上两点连成一条直线,求直线的长度和直线中点的坐标.要求:基类:Dot派生类:Line(同时组合)派生类Line从基类Dot继承的Dot数据,存放直线的中点坐标Line类再增加两个Dot对象,分别存放两个端点的坐标Dot类:#ifndefPROJECT5... 继续阅读 >
2021
03-29

Vue3 Composition API的使用简介

vue3.0在7月发布了rc版本，vue-cli4.5后也支持选择vue3作为备选版本可以体验了，vue3的正式版本相必也不远了。学不动了呀!!!!相比vue2.0版本(OptionAPI)，CompositionAPI（组合API）算是3.0的重大变更之一了。概述CompositionAPI主要灵感来源于ReactHooks，目的是通过一组低侵入式的、函数式的API，使得我们能够更灵活地「组合」组件的逻辑。示例<template><div>{{count}}</div><button@click="addCount">添加</button></... 继续阅读 >
2020
10-28

详解vue3.0 的 Composition API 的一种使用方法

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >
2020
10-28

vue3.0 的 Composition API 的使用示例

网上讨论的文章已经很多了，这里举一个简单的例子来讨论一下CompositionAPI的用法，具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页，以前是把需要的数据都放在data里面，事件都放在methods里面，代码少的话还好分辨，如果代码多了，看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能，我们先做一个模板：（简单表示一下，不做美化处理了）<template><div>论坛... 继续阅读 >
2020
10-08

Vue3新特性之在Composition API中使用CSS Modules

在Vue3CompositionAPI最近的一次beta升级中，无论是Vue3本3库vue-next，还是面向Vue2过渡用的@vue/composition-api库中，都同步更新了一个useCSSModule函数--用来在使用了CompositionAPI的Vue实例中，支持CSSModules语法。首先来看看什么是CSSModules：CSSModulesCSSModules是一种CSS的模块化和组合系统。vue-loader集成CSSModules，可以作为模拟scopedCSS的替代方案。启用CSSModule... 继续阅读 >
2020
10-07

使用Vue Composition API写出清晰、可扩展的表单实现

表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。基于组件的框架，如Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。在本教程中，将向您展示新的VueCompositionAPI（即将加入Vue3中）如何使表单代码更清晰、更具可扩展性。为什么表单代码经常很烂像Vue这种基于组件的框架的关键设计模式是组件组合。这种模式将应用程序的特性抽象为独立的、单一用途的组件，这些组件... 继续阅读 >
2020
09-28

浅谈Vue3 Composition API如何替换Vue Mixins

想在你的Vue组件之间共享代码？如果你熟悉Vue2则可能知道使用mixin，但是新的CompositionAPI提供了更好的解决方案。在本文中，我们将研究mixins的缺点，并了解CompositionAPI如何克服它们，并使Vue应用程序具有更大的可伸缩性。回顾Mixins功能让我们快速回顾一下mixins模式，因为对于下一部分我们将要讲到的内容，请务必将其放在首位。通常，Vue组件是由一个JavaScript对象定义的，它具有表示我们所需功能的各种属性——诸如... 继续阅读 >