Vue3组合式API(2和3区别)

已于 2024-04-22 14:07:38 修改
阅读量545 收藏 9
点赞数 14
文章标签： vue.js 前端 javascript
于 2024-01-01 11:22:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69203733/article/details/135322854
版权
本文比较了Vue2的OptionsAPI（配置式）和Vue3的OptionsitionAPI（组合式），重点讲解了两者在数据管理（ref和响应式）、组件结构和方法定义上的差异，以及Vue3中setup的使用场景。
摘要由CSDN通过智能技术生成

Options API 和 Optionsition API 区别

Vue2中Options API ('配置式' 或 '选项式') ：把属性拆分到不同的配置项中，缺点：不集中

Vue2传统组件

Vue3中 Optionsition API (组合式)：把元素集中到一起，Vue3 使用组合式 API 的地方为 setup

Vue3组合式API

2和3写法上的区别

定义数据 (此时3中举例的数据都非响应式)

若要变成响应式则加上 ref()

let name=ref('张三')
let age=ref(18)

方法（3中的方法变成函数）

元气 ·唐小糖
关注
  • 14
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
「Vue3系列」Vue3 组合式 API
日常笔记/总结/系列知识梳理
03-09 1180
通过模板引用，你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件，从而能够直接操作它们或访问它们的属性和方法。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。函数是组合式 API 的核心，它提供了一个新的逻辑组织方式，允许你使用响应式状态、计算属性、方法、生命周期钩子等，而不必依赖于 Vue 组件的选项对象。函数返回一个对象，该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。
vue3组合式API
weixin_45090657的博客
03-10 1409
# 第一天
02vue3组合式api看这个.md
06-07
02vue3组合式api看这个.md
Vue2选项式API和Vue3组合式API的区别
默的博客
03-22 1519
总之，Vue3的新API设计减轻了前端开发者的开发难度，并且提供了更多的便利、更好的性能、更丰富的生命周期方法、更完善的TS支持等等。Vue3的兴起也是前端发展的重要里程碑，可以让我们更好地服务用户，带领前端技术发展更迅速，实现更加美好的web世界。来实现组件通讯，但是与Vue2不同的是，它是基于新的响应式API来实现的，它们之间可以多层嵌套传递数据，且避免了命名冲突。这两段代码功能相同，但是语法上看起来完全不同，Vue3使用了新的API，相比Vue2更加易于使用和管理。Vue3采用的是ES6的。
Vue3选项式api和组合式api
ZMN0057的博客
03-12 251
①代码风格： data 选项写数据， methods 选项写函数，一个功能l逻辑的代码分散；②优点：易于学习和使用，新手上手简单；③缺点：代码组织性差，相似代码逻辑不好复用，逻辑复杂代码也不好阅读；虽然提供了 mixins用来封装逻辑，但出现数据函数覆盖的概率大，不好维护。
Vue3组合式API
jerryyang_2017的博客
10-28 8335
vue3组合式api
vue3组合式API与vue2选项API
m0_68009075的博客
05-26 220
Vue 3 主推的是组合式 API，相对于 Vue 2 的选项 API，有以下几个不同点：
vue3 组合式API composition 简单使用
jyn15159的博客
03-12 2272
composition api 组合式API 官网文档 通过创建 Vue 组件，可以将界面中重复的部分连同其功能一起提取为可重用的代码段。 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。 这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，必须不断地“跳转”相关代码的选项块。 如
vue3 选项式 API 和组合式 API 区别
weixin_43867229的博客
05-08 969
vue组合式和选项式的区别
vue2选项式API和vue3组合式API区别的通俗解释
热门推荐
weixin_55894946的博客
07-29 2万+
vue3对于这种代码布局的方式进行了优化，引出了组合式API,所展现的代码风格如下图，它的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法，watch监听方法，computed计算属性等放到一起，形成代码功能上的模块化，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便，设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理，代码逻辑更清晰，可读性更强，后期维护的同学不会像vue2中那么痛苦。...
Vue3组合式api.xmind
06-16
Vue3组合式api
实现基于Vue3组合式API的登陆系统
04-07
在很多公司的前端框架使用中，Vue做为一门技术流行开来，具备了虚拟DOM树，面向组件的开发模式和观察者模式等优点。nodejs是JavaScript的一个运行环境，使得我们在前端写的js代码能够在服务端运行。相较于传统的web...
Vue3组合式api(老田).md
06-16
Vue3组合式api(老田)
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
2. **自定义指令和组合式函数**：Vue3 允许我们创建自定义指令（如 `v-my-directive`），并且通过组合式函数（也称为组合函数或组合API）将复杂的逻辑封装起来，这些函数可以返回需要在 `setup()` 中使用的对象，...
VUE3组合式API
Circle_Key的博客
12-14 1665
Vue3组合式API自由理解
深入理解 Vue.js 中的 deep: true
最新发布
weixin_42279822的博客
06-26 719
deep: truedeep: true是 Vue.js 监听器中的一个重要配置选项，允许我们递归地监听对象内部所有属性的变化。在处理复杂数据结构和需要实时同步数据的场景中，deep: true非常有用。然而，在使用时需要注意性能问题，确保在必要的场景下才使用这个选项。通过合理使用deep: true，我们可以更好地管理和响应数据的变化，提升应用的健壮性和用户体验。
vue elementui简易侧拉栏的使用
han_xiao_xiao的博客
06-26 312
vue简易侧拉栏的使用
Vue下载接口返回流的处理
qq_42753983的博客
06-25 267
2.可以写公共方法处理。3-2 不需要带日期。
vue如何引入图标
qq_45398535的博客
06-24 256
方法1：iconify/vue。
vue3组合式Api
01-18
Vue 3的组合式API是一种新的API风格，它使开发者能够更好地组织和重用组件逻辑。下面是一个关于Vue 3组合式API的例子： ```vue 解构响应式对象数据 <p>Username: {{ username }} <p>Age: {{ age }} ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值