Vue2中使用组合式API

vue2.7的组合式api已经快要实现了,现在简单说一下在vue2.6x里面怎么使用组合式api,感兴趣可以体验一下。

实现步骤

1.初始化vue2的项目

vue create vue2-setup-demo

2.安装插件

yarn add @vue/composition-api

3.注册插件

// main.js中
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'Vue.use(VueCompositionAPI)

在代码里面使用组合式api

<template><div id="app">{{msg}}</div>
</template><script>import { ref } from '@vue/composition-api'export default {setup(){const msg= ref('hello')return {message}}}
</script>

其余用法与vue3中基本一样,可以体验一下。

Vue2中使用组合式API相关推荐

Vue3 中使用组合式API替换mixins，实现代码复用并解决隐患
我们在vue mixin混入–基础中聊过mixins可以使我们的代码进行复用,非常的灵活方便. 但是在vue3中却不推荐使用了,因为它存在一些问题. mixins问题不清晰的数据来源:当使用了多个 ...
Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
Vue3为什么要使用组合式API--Vue3的组合式API和Vue2的选项式API的优缺点 1.Vue2为什么使用选项式API 2.Vue2如何使用组合式API 3.组合式API Vs 选项式API ...
vuejs中组件的两种不同的编写风格-选项式API及组合式API
前言随着vue3的逐渐稳定,以及周边生态的完善,现在vue3已经成为默认的使用方式了的所以,对于一个前端开发者,Vue2与Vue3都得要会,在vue3中新增很多东西,比如:Fragment,Tel ...
Vue3中的API——选项式API、组合式API
Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API. 对于熟悉Vue2的人来说,选项式api是一个很好的选择,但Vue3提供的组合式api对于代码复用效果更为突出.博主之前是用的 ...
Vue2选项式API和Vue3组合式API的区别
文章目录 Vue2选项式API和Vue3组合式API的区别响应式处理组件生命周期组件通讯其他差异编译器的变化 TypeScript 静态类型提升 Vue2选项式API与Vue3组合式API ...
在vue2中使用vue3的核心功能（渐进式升级vue版本）
一.前言学了真香的vue3语法,但目前的vue2项目中短期内不会再升级了,空有屠龙之术无法施展?来试试以下的解决方案,让你在vue2项目中也能用上vue3的核心语法-组合式API. 二.选项式API ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
组合式 API如何解决vue2中mixin的局限性？
Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. // 定义一个mixin object const myMixin = {created() {this.hello()}, ...
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
要使用Vue3,那必须得会setup,因为setup是组合式API表演的舞台. 安装volar 如果你的VScode之前安装有vuter插件,请先把他禁用或者卸载掉,然后安装volar. 因为,vut ...

Vue2中使用组合式API

Vue2中使用组合式API相关推荐

最新文章

热门文章