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

已于 2024-04-22 14:07:38 修改
阅读量555 收藏 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 1193
通过模板引用，你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件，从而能够直接操作它们或访问它们的属性和方法。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。函数是组合式 API 的核心，它提供了一个新的逻辑组织方式，允许你使用响应式状态、计算属性、方法、生命周期钩子等，而不必依赖于 Vue 组件的选项对象。函数返回一个对象，该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。
Vue3与Vue2的区别（组合式API）
qq_38329392的博客
08-11 2288
vue3 组合式API的常用api以及优势
Vue2选项式API和Vue3组合式API的区别
默的博客
03-22 1538
总之，Vue3的新API设计减轻了前端开发者的开发难度，并且提供了更多的便利、更好的性能、更丰富的生命周期方法、更完善的TS支持等等。Vue3的兴起也是前端发展的重要里程碑，可以让我们更好地服务用户，带领前端技术发展更迅速，实现更加美好的web世界。来实现组件通讯，但是与Vue2不同的是，它是基于新的响应式API来实现的，它们之间可以多层嵌套传递数据，且避免了命名冲突。这两段代码功能相同，但是语法上看起来完全不同，Vue3使用了新的API，相比Vue2更加易于使用和管理。Vue3采用的是ES6的。
Vue3选项式api和组合式api
ZMN0057的博客
03-12 257
①代码风格： data 选项写数据， methods 选项写函数，一个功能l逻辑的代码分散；②优点：易于学习和使用，新手上手简单；③缺点：代码组织性差，相似代码逻辑不好复用，逻辑复杂代码也不好阅读；虽然提供了 mixins用来封装逻辑，但出现数据函数覆盖的概率大，不好维护。
vue3组合式API与vue2选项API
m0_68009075的博客
05-26 226
Vue 3 主推的是组合式 API，相对于 Vue 2 的选项 API，有以下几个不同点：
Vue3组合式API
jerryyang_2017的博客
10-28 8378
vue3组合式api
vue3 组合式API composition 简单使用
jyn15159的博客
03-12 2278
composition api 组合式API 官网文档 通过创建 Vue 组件，可以将界面中重复的部分连同其功能一起提取为可重用的代码段。 使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。然而，当组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。 这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，必须不断地“跳转”相关代码的选项块。 如
vue3 选项式 API 和组合式 API 区别
weixin_43867229的博客
05-08 981
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()` 中使用的对象，...
02vue3组合式api看这个.md
06-07
02vue3组合式api看这个.md
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1206
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1407
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue和Element UI 路由跳转，侧边导航的路由跳转，侧边栏拖拽
爱敲代码的卡拉米的博客
07-12 304
项目中用到了点击侧边栏的跳转，所以记录下来，方便有需要的人用到~是通过重定向定位到登陆页的，然后通过登陆页跳转到主页。首先看布局，因为我的用于页面显示的。
vue 自定义滚动条同步拖动（移动端）
最新发布
u014206461的博客
07-12 156
vue 自定义滚动条同步拖动（移动端）
vue3组合式Api
01-18
Vue 3的组合式API是一种新的API风格，它使开发者能够更好地组织和重用组件逻辑。下面是一个关于Vue 3组合式API的例子： ```vue <template> <div> <h1>解构响应式对象数据</h1> <p>Username: {{ username }}</p> <p>Age: {{ age }}</p> </div> </template> <script> import { reactive, toRefs } from "vue"; export default { name: "解构响应式对象数据", setup() { const user = reactive({ username: "张三", age: 10000, }); return { ...toRefs(user) }; }, }; </script> ``` 在这个例子中，我们使用了Vue 3的`reactive`函数将一个普通对象`user`转换为响应式对象。然后，我们使用`toRefs`函数将响应式对象的每个属性转换为`ref`，以便在模板中使用。 通过这种方式，我们可以在模板中直接使用`username`和`age`属性，并且它们会自动响应式地更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值