Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

这篇具有很好参考价值的文章主要介绍了Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

Composition API 可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题?
通常使用Vue2开发的项目,普遍会存在以下问题:
1、代码的可读性随着组件变大而变差
2、每一种代码复用的方式,都存在缺点
3、TypeScript支持有限
一、Options Api
Options API,即大家常说的选项API,即以vue为后缀的文件,通过定义methods,computed,watch,data等属性与方法,共同处理页面逻辑

例:
export default {
 data(){
     return{};
 },
 methods:{},
 comouted:{},
 watch:{}
}

可以看到Options代码编写方式,如果是组件状态,则写在data属性上,如果是方法,则写在methods属性上…
用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效
然而,当组件变得复杂,导致对应属性的列表也会增长,这可能会导致组件难以阅读和理解。
二、Composition Api
在 Vue3 Composition API 中,组件根据逻辑功能来组织的,一个功能所定义的所有API会放在一起(更加的高内聚,低耦合)
即使项目很大,功能很多,我们都能快速的定位到这个功能所用到的所有 API
三、对比

小结
在逻辑组织和逻辑复用方面,Composition API是优于Options API
因为Composition API几乎是函数,会有更好的类型推断。
Composition API 对 tree-shaking 友好,代码也更容易压缩
Composition API中见不到this的使用,减少了this指向不明的情况
如果是小型组件,可以继续使用Options API,也是十分友好的文章来源地址https://www.toymoban.com/news/detail-519171.html

到了这里,关于Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(54)
  • 【vue3】11-Vue 3中的Composition Api(一)

    在Vue2中,我们编写组件的方式是Options APl: Options API的一大特点就是在 对应的属性 中编写 对应的功能模块 ; 比如 data定义数据 、 methods中定义方法 、 computed中定义计算属性 、 watch中监听属性改变 ,也包括 生命周期钩子 ; 但是这种代码有一个很大的弊端: 当我们 实现某一个功

    2024年02月08日
    浏览(40)
  • Vue3的手脚架使用和组件父子间通信-插槽(Options API)学习笔记

    全局安装最新vue3 升级Vue CLI: 如果是比较旧的版本,可以通过下面命令来升级 通过脚手架创建项目 父组件 子组件 UserComponent.vue 父组件 **子组件1 JiaComponent.vue ** ** 子组件2 JianComponent.vue ** 父组件 子组件 TitleComponents.vue 父组件 **子组件 NavComponent.vue ** 父组件 子组件 NavCompone

    2024年02月05日
    浏览(41)
  • 探究Vue3中的Composition API:优化组件逻辑的新利器

    在 Vue 3.0 中,引入了一种新的响应式 API,即 toRef 。 toRef 函数可以将一个普通值转换为响应式引用类型,这样就可以在模板中直接使用这个响应式引用类型的属性,并且当该属性发生变化时,视图会自动更新。 通过控制台打印输出的内容和页面的变化,我们可以观察到,age的

    2024年02月10日
    浏览(37)
  • Composition API 的优势、新的组件(Fragment,Teleport,Suspense)【Vue3】

    使用传统OptionsAPI中,新增或者修改一个需求,就需要分别在data,methods,computed里修改。 我们可以更加优雅的组织我们的代码,函数。让相关功能的代码更加有序的组织在一起。 在Vue2中:组件必须有一个根标签 在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个

    2024年02月02日
    浏览(41)
  • vue/composition-api 的使用

    最近我们项目是 vue2,但是要使用 jsx + composition ,所以来学习一下这个 vue/composition-api (一)安装 (二)注册 在 main.ts 中 (三)使用 最基本的组件: defineComponent 本身的功能很简单,但是最主要的功能是为了 ts 下的类型推导~ 1. setup 函数 setup 在 create 实例在初始化之前调

    2024年02月05日
    浏览(40)
  • Vue3和Vue2有什么区别?

    先来说说Vue3相对于Vue2的优点吧: 更快的渲染速度 更小的体积 更少的内存占用 更丰富的功能 听起来好像Vue3比Vue2强很多啊,但是具体强在哪里呢?我们来看几个代码例子: 首先是安装Vue3和Vue2: 在Vue3中,如果你想注册一个组件,你可以这样做: 而在Vue2中,你需要这样做:

    2024年02月08日
    浏览(89)
  • vue3前端开发,感受一下组合式api和VUE2选项式的差异

    vue3前端开发,感受一下组合式api和VUE2选项式的差异!今天开始,正式开始,进入学习Vue3的内容。以后代码,案例分享,都会采用组合式api的模式为大家做展示。 今天是第一节,带大家感受一下,Vue3的组合式api和之前传统的vue2版本选项式api的差别。 首先,大家需要提前使用

    2024年01月19日
    浏览(37)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(50)
  • Vue 3 Composition API 详解

    在Vue 3中,引入了一个新的Composition API,旨在提供一种更灵活和可重用的方式来组织组件代码。Composition API基于函数式编程思想,允许开发者将逻辑和状态管理逻辑分离,使代码更加清晰和可维护。 响应式数据 在Vue 3中,响应式数据是组件状态的重要组成部分。通过使用 re

    2024年01月21日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包