[Vue3核心语法] OptionsAPI 与 CompositionAPI

原创 已于 2024-10-15 19:40:20 修改 · 492 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
vue3实战学习

当前文章被收录于：

vue3实战学习
8 篇文章 0 人学习

从2024年10月13日开始记录本人学习vue3的过程， 本次主要记录PC端，本框架包含以下重要基础组件： ● Vue3：数据驱动的核心前端框架 ● Vite5：下一代前端工具链，性能好，响应快 ● TypeScript：提供类型安全的JS代码和异常捕获机制 ● Vue-Router4：基于Vue3

订阅专栏 查看详情
于 2024-10-15 19:36:48 首次发布

【OptionsAPI 与 CompositionAPI】

  • Vue2的API设计是Options（配置）风格的。

  • Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起

说明：以上四张动图原创作者：大帅老猿

标签
#vue.js
《Vue3 三》Vue 中的 options 选项
花铛
12-24 677
template 选项：用于编写模板。data 返回的对象中定义的数据可以通过插值语法等方式绑定到 template 模板中。当数据发生变化时，template 模板会自动进行更新来显示最新的数据。template 模板对数据的监听默认就是深度的，即使改变的是对象中的某个属性，template 也可以监听到并自动更新显示。
vue3中国省市区三级联动options简洁写法（无依赖）
weixin_45403802的博客
03-04 1414
其中 provinceArr、cityArr、areaArr 绑定options选项，province、city、area 绑定input 输入框。同样，这里的市默认选中第一个，city 也是双向绑定到 输入框， 为了能够在页面随时响应式改变，添加了一个watch 监听。这样就拿到了一个省份数组，这里随机默认选中第一个，北京市，这里 province 变量用来绑定输入框的值。2、能够拿到 省份、市、区 的 options 数组来绑定就可以了。这里同样默认选中第一个，当市变化时，区也会切换到对应的市区数据。
Vue基础学习——Vue3的Options-API
qq_17189095的博客
05-18 1066
在实际开发中，我们会遇到一些情况，比如我们可能需要对数据进行一些转化后再显示，或将多个数据结合起来进行显示；如果把这些逻辑直接写在template中，这样就会使得UI里放逻辑，就违背了vue设计的愿景, 这个时候compute计算属性就产生了。
Vue3中Options-API 学习总结一
liushihao_的博客
08-16 4689
复杂data的处理方式 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示； 比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示； 在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算； 在模板中放入太多的逻辑会让模板过重和难以维护； 并且如果多个地方都使用到，那么会有大量重复的代码； 我们有没有什么方法可以将逻辑抽离出去呢？ 可以
Vue3中的$options
m0_57836225的博客
07-21 1430
在 Vue 3 中， $options 指的是当前组件的详细信息，包括组件的各种选项，例如 data 、 props 、 methods 、 computed 、 watch 等，还包括 mixin 和 extends 的基组件等信息。例如，可以使用 this.$options.data 来获取组件的 data 对象，使用 this.$options.methods 来获取组件定义的方法等。// 在 data 外面定义的属性和方法通过 $options 可以获取和调用。
前端框架Vue3（二）——Vue3核心语法之OptionsAPI与CompositionAPI与setup
最新发布
chancygcx_的博客
07-31 1104
OptionsAPI与CompositionAPI和setup语法糖
1.1 Vue3核心语法之【OptionsAPI 与 CompositionAPI】
m0_73814612的博客
05-13 557
可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。// methods 是一些用来更改状态与触发更新的函数。选项所定义的属性都会暴露在函数内部的。// 生命周期钩子会在组件生命周期的各个不同阶段被调用。// data() 返回的属性将会成为响应式的状态。// 例如这个函数就会在组件挂载完成后被调用。// 它们可以在模板中作为事件处理器绑定。// 并且暴露在 `this` 上。中的，若想新增或者修改一个需求，就。// 用来修改状态、触发更新的函数。上，它会指向当前的组件实例。
Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup
把代码调成柠檬味
01-02 941
可以用函数的方式，更加优雅的组织代码，让相关公告的代码更加有序的组织在一起。，不便于维护和复用Composition API。
vue3核心语法【一】compositionAPI、setup语法糖、生命周期、自定义hook
zxz947462113的博客
05-24 1667
vue3核心语法之：CompositionAPI、setup（概述、返回值、语法糖）、vue3常见生命周期函数、自定义hook
【Vue3核心技术】from 张天禹
amsxtyf的博客
04-18 2553
vue3
Vue3语法笔记记录
weixin_39379355的博客
03-28 1584
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
张天禹 Vue3+TypesScript
weixin_55896343的博客
12-31 1975
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
Vue3 核心语法
Jason World
01-10 1167
Vue3 核心语法
Vue 3 教程：核心知识
技术路上的探险家
05-29 1530
2020年9月18日，Vue.js发布版3.0One Piece（n4800+次提交40+个RFC600+次PR300+贡献者3.4.27setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。
Vue3快速上手
lizi88888的博客
09-18 3250
// 引入对应的useXxxxxStore import {useSumStore} from '@/store/sum' // 调用useXxxxxStore得到对应的store const sumStore = useSumStore()
vue3 学习与实战
xxpxxpoo8的专栏
12-30 934
vue3
Vue3 笔记 (万字速通）
2301_79083000的博客
11-14 1568
2020年9月18日，Vue.js发布版3.0One Piece（n）4800+次提交40+个RFC600+次PR300+贡献者3.3.4setup是Vue3中一个新的配置项，值是一个函数，它是“表演的舞台，组件中所用到的：数据、方法、计算属性、监视…等等，均配置在setup中。setup函数返回的对象中的内容，可直接在模板中使用。setup中访问this是undefined。setup函数会在之前调用，它是“领先”所有钩子执行的。姓名：{{name}}
vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3vue3
口袋的天空的博客
05-12 1474
vue3,elementui-plus,pinia
Vue3新手教程
打工人
03-25 5947
Vue3新手教程
Vue3笔记（2024）
qq_46574748的博客
01-25 2351
修改名字
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值