vue2中如何使用组合式API和vueuse工具包

1. 安装 @vue/composition-api 依赖包

yarn add @vue/composition-api
# 或
npm install @vue/composition-api

2. 安装 @vueuse/core 依赖包

yarn add @vueuse/core
# 或
npm install @vueuse/core

3. 从 @vue/composition-api 中导入 组合式API函数 (ref reactive等)

vue3.x

import {ref} from 'vue'

vue2.x

 import {ref} from '@vue/composition-api'

其余使用方式完全一致

typescript 部分支持

import { defineComponent } from '@vue/composition-api'
// 只需要把代码写在defineComponent里面,ts的静态检查就会工作
export default defineComponent({
// type inference enabled
props:{}
setup(props,ctx){}
data(){}
created(){}
mounted(){}
})

vue2中如何使用组合式API和vueuse工具包的更多相关文章

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

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

  2. vue3组合式API

    vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...

  3. Vue3笔记(二)了解组合式API的应用与方法

    一.组合式API(Composition API)的介绍 官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 组 ...

  4. vue3组合式API介绍

    为什么要使用Composition API? 根据官方的说法,vue3.0的变化包括性能上的改进.更小的 bundle 体积.对 TypeScript 更好的支持.用于处理大规模用例的全新 API,全 ...

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

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

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

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

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

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

  8. Vue3中的响应式api

    一.setup文件的认识 特点1:script 中间的内容就是一个对象 特点2:script 在第一层 定义的方法 或者 变量 => 就是这个对象 属性  => 顶层的绑定回被暴露给模板( ...

  9. Unity在Android和iOS中如何调用Native API

    本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调 ...

  10. Windows 商店应用中使用 SharePoint REST API

    前面一篇我们介绍了 Office 365 REST API 的官方工具的使用,本篇我们来看一下 SharePoint REST API 本身的描述.结构和使用方法,以及一些使用经验. 首先来看看Sha ...

随机推荐

  1. 关于TB交易开拓者的KDJ指标与经典KDJ指标计算方法不同的分析

    我之前在群里咨询的问题, TB官方的技术大佬,给出详细的分析 原链接:https://www.kdocs.cn/l/cgF3sA7ypa99 在这,我只复制最核心的内容,如果需要深入研究, 请联系我, ...

  2. 查看MySQL数据库所有的表名、表注释、字段名称、类型、长度、备注,一键导出生成数据库字典

    一.先了解下INFORMATION_SCHEMA1.在MySQL中,把INFORMATION_SCHEMA看作是一个数据库,确切说是信息数据库.其中保存着关于MySQL服务器所维护的所有其他数据库的信 ...

  3. React部署到线上Nginx环境中刷新页面后404解决方案

    我们需要在Nginx的配置文件中修改以下内容(通常Nginx配置文件位置为/etc/nginx/nginx.conf): server { # ... location / { # ... # 增加下 ...

  4. Qt编写物联网管理平台37-逻辑设计

    一.前言 本系统的逻辑设计是个人认为做过的系统中最好的,一个系统支持多个通信端口,每个通信端口都可选不同的通信协议,一个通信端口可以接255个控制器,相当于主设备,一个控制器可以接255个探测器,相当 ...

  5. Springboot整合WebSocket作为服务端遇到的坑

    最近遇到一个需求,对接某公有云上的坐席系统,需要接收人工坐席和客户对话的语音流,然后调用ASR(Automatic Speech Recognition,自动语音识别)引擎,对语音流实时转写,最后将实 ...

  6. Type of the default value for 'data' prop must be a function的解决方法

    Type of the default value for 'data' prop must be a function的解决方法 问题现象 在写形如prop: {type: Array; defau ...

  7. Web网页端IM产品RainbowChat-Web的v7.1版已发布

    一.关于RainbowChat-Web RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIM ...

  8. 基于Netty,从零开发IM(二):编码实践篇(im单聊功能)

    本文由作者"大白菜"分享,个人博客 cmsblogs.cn,有较多修订和改动.注意:本系列是给IM初学者的文章,IM老油条们还望海涵,勿喷! 1.引言 接上篇<IM系统设计篇 ...

  9. Solution -「LOCAL」Minimal DFA

    \(\mathscr{Description}\)   Private link.   令 \(\Sigma=\{\texttt a,\texttt b\}\),对于所有形式语言 \(L\subset ...

  10. CDS标准视图:应收账龄表 I_ARJrnlEntrItmAgingGrid

    视图名称:应收账龄表 I_ARJrnlEntrItmAgingGrid 视图类型:参数 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'IARJEITMAGGRID' ...