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. 龙哥量化:期货软件中红红绿绿的"多开,空开,空平,多平,多换,空换,双开,双平,换手"是什么意思?(转载的)

    期货投资者在看盘时,会看到红红绿绿的"多开,空开,空平,多平,多换,空换,双开,双平,换手",以快期专业版为例,如下图1所示: 图1.红绿开平数据(快期专业版) 这些数据里面的红色 ...

  2. 如何查看一个域名所对应的IP地址?

    具体步骤如下: 1.点击电脑左下角开始菜单,打开"运行"选项. 2.然后输入"cmd"并打开. 3.在弹出的页面输入ping+你想要查看的域名,比如新浪网,pi ...

  3. [转]在MyBatis中使用pageHelper5.1.9分页插件实现物理分页

    pagehelper的GIT地址:https://github.com/pagehelper/Mybatis-PageHelper/ 废话少说,直接给出中文官方链接: 1.如何使用分页插件 2.HOW ...

  4. 「V 曲闲谈」《万物与我同归于寂》——终与始

      死亡, 胃酸逆流 失去最初模样 开端与结局颠倒 脉搏也摇晃   于强烈的动机下选定这首歌,但构思时又发觉,一个十六岁的青年,似乎在这个艰涩的哲学问题上难以开口.   那么先来说说我的动机.为什么我 ...

  5. Solution Set -「LOCAL」冲刺省选 Round VII

    \(\mathscr{Summary}\)   三道结论题,毁灭吧.   A 题一开始思路偏了,发现答案最高 bit 能固定之后接下来的结论就顺理成章了.   B 题哈哈哈哈又是经典:我结论猜对了,然 ...

  6. CDS标准视图:设备 I_Equipment

    视图名称:I_Equipment 视图类型:基础视图 视图内容: 设备编码和设备内容 设备来源及详细信息 有效期 事务代码: IE03,IH08 视图代码 点击查看代码 @EndUserText.la ...

  7. 连接Redis 错误的解决方法: It was not possible to connect to the redis server(s); to create a disconnected multiplexer

    The error you are getting is usually a sign that you have not set abortConnect=false in your connect ...

  8. c# 调用DeepAI

    包括画卡通画,找出2张图片的相似度,电脑做梦的图片生成,利用GTP-2的文本续写. using System; using System.Collections.Concurrent; using S ...

  9. w3cschool-Apache Pig 教程

    https://www.w3cschool.cn/apache_pig/ 什么是Apache Pig? Apache Pig是MapReduce的一个抽象.它是一个工具/平台,用于分析较大的数据集,并 ...

  10. 深入浅出:Agent如何调用工具——从OpenAI Function Call到CrewAI框架

    深入浅出:Agent如何调用工具--从OpenAI Function Call到CrewAI框架 嗨,大家好!作为一个喜欢折腾AI新技术的算法攻城狮,最近又学习了一些Agent工作流调用工具的文章,学 ...