Vue3带来的变化（新的API）

最新推荐文章于 2024-04-16 20:34:09 发布
最新推荐文章于 2024-04-16 20:34:09 发布
阅读量251 收藏
点赞数
分类专栏： vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43033748/article/details/122426964
版权
Vue3从Options API转向Composition API，解决了代码内聚性问题，允许将相关逻辑集中处理。同时，引入的Hooks函数提高了代码复用性，避免了Vue2中mixins的命名冲突和响应式问题。
摘要由CSDN通过智能技术生成

由Options API 到 Composition API：

在Vue2.x的时候，我们会通过Options API来描述组件对象

Options API包括data、props、methods、computed、生命周期等等这些选项；

存在比较大的问题是多个逻辑可能是在不同的地方：

ü 比如created中会使用某一个method来修改data的数据，代码的内聚性非常差

Composition API可以将 相关联的代码 放到同一处 进行处理，而不需要在多个Options之间寻找；

n Hooks函数增加代码的复用性：

在Vue2.x的时候，我们通常通过mixins在多个组件之间共享逻辑

了解本专栏 订阅专栏 解锁全文 超级会员免费看
叮咚前端
关注
专栏目录
订阅专栏
vue3带来的变化(性能)
qq_43033748的博客
11-06 204
使用proxy进行数据劫持 在vue2.0中，vue2使用Object.defineproperty来劫持数据getter和setter方法的 缺点：当给对象添加和删除属性时，是无法劫持和监听 所以vue2中不得不添加一些api，比如set和set和set和delect，都是属于hack方法，增加开发成本 删除一些不必要的API 移除了实例上，on,on,on,off和$once 移除一些特性:如filter，内联模版 包过编译方面的优化 生成Block tree slot编译优化，diff算法优化 .
Vue3中新的API
WFL804203164的博客
01-21 865
常用的 Composition API（组合API） setup Vue3.0新增的配置项，值为一个函数 setup是所有Composition API的 组件中所用到的：数据，方法等等，均需要配置在setup函数中 setup函数的两种返回值： 若返回是一个对象，对象中的属性，方法，在模板中军可以直接使用 若返回一个渲染函数，则可以自定义渲染内容 setup的两个注意点： setup的执行时机：在beforeCreate之前执行一次，this是undefined setup的参数： props
Vue3.0的新特性（7）Teleport
weixin_43365995的博客
03-09 1365
Teleport翻译过来就是传送、远距离传送的意思；顾名思义，它可以将插槽中的元素或者组件传送到页面的其他位置： 在React中可以通过createPortal函数来创建需要传送的节点；本来尤大大想起名叫Portal，但是H5原生的Portal标签也在计划中，虽然有一些安全问题，但是为了避免重名，因此改成Teleport。 Teleport一个常见的使用场景，就是在一些嵌套比较深的组件来转移模态框的位置。虽然在逻辑上模态框是属于该组件的，但是在样式和DOM结构上，嵌套层级后较深后不利于进行维护（z-inde
vue3变化
qq_41261490的博客
09-22 578
Global API 全局Vue Api已更改为使用应用程序实例 vue2创建全局组件（new Vue()）缺点 全局配置使得在测试期间很容易意外地污染其他测试用例 全局配置使得在同一页面上的多个“app”之间共享同一个 Vue 副本非常困难，但全局配置不同 vue3引入：createApp 返回一个应用实例import { createApp } from 'vue' const app = createApp({}) vue2.x全局api在vue3.x中变化 对比 2.x 全局
vue3 新增API整理
tp27933的博客
12-11 507
1. Ref / Reactive a. Ref 可以接受 simple 或 Object type，但是不會對物件或陣列內部的屬性變動做監聽。 聲明 並傳值 const state = ref ( 10 ) = > 調用 reactive 並創建對象 => 在對象自動聲成 { value : 傳遞的值 } 因為這樣的過程，因此需要透過 .value來取值 ，如 state.value。 b. Reactive 只能接受物件或陣列，可以做深層的監聽。 <script&g
vue3-composition-API
03-31
10. **性能优化**：Vue3通过优化编译器和响应式系统，提高了整体性能，如Teleport、Fragment、Suspense等新特性也带来了更好的开发体验。 总的来说，Vue3 Composition API 的引入，不仅提升了代码的可读性和可维护...
Vue3新特性——Composition API详解
ailsa_csdn的博客
03-01 1万+
本套笔记是学习尚硅谷视频教程所整理
vue3带来的新特性及亮点
php_martin的博客
08-12 1655
vue3带来的新特性/亮点
Vue3最新源码分享。
02-03
通过深入理解Vue3的`diff`算法和虚拟DOM机制，以及新的API和特性，我们可以编写出更高效、更易于维护的应用程序。对于希望提升自身技术能力的开发者，研究Vue3的源码无疑是一个值得投入的时间和精力的途径。
vue3新特性及api介绍（二）
weixin_42733155的博客
05-07 2320
接上文的介绍。vue3新特性地址戳我 vue3api介绍地址戳我 二、vue3新特性 7.provide/inject 用法和之前类似，不过只能在setup函数内使用 const proKey = Symbol("provide"); provide(proKey, "aaa"); inject(proKey, "123"); inject的第二个参数是默认值...
快速使用Vue3最新的15个常用API
Yvette Lau的专栏
12-08 619
之前我写了一篇博客介绍了Vue3的新特性，简单了解了一下Vue3都有哪些特色，并且在文末带大家稍微体验了一下Vue3中 Composition API 的简单使用因为这个月的月初给自己定...
快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏）(1)
最新发布
2401_84150102的博客
04-16 1086
方法默认是渐层的监听我们指定的数据，例如如果监听的数据有多层嵌套，深层的数据变化不会触发监听的回调，若我们想要其对深层数据也进行监听，可以在第三个参数对象中设置。方法的第一个参数我们已经指定了监听的对象，因此当组件初始化时，不会执行第二个参数中的回调函数，若我们想让其初始化时就先执行一遍，可以在第三个参数对象中设置。由此可见，当我们想修改数据，但不想让视图更新时，可以选择直接修改原始数据上的值，因此需要先获取到原始数据，我们可以使用 Vue3 提供的。
vue3.0有哪些新特性
u014212540的博客
04-20 4343
Vue3 新特性
vue3的新特性及api
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-06 2851
前言： 最近在学vue源码，vue已经到vue3(beat)版本（目前官方建议不在生产环境使用），说实话vue2和vue3的有了质的飞跃（主要是性能上）。想对vue3有更好的了解我强烈推荐看看尤大的介绍视频（vu3尤大介绍视频）。这篇文章就是我看过之后自己的心德与理解总结。 一、vue3的新特性及新增api 1.响应式原理 vue2的响应式原理是利用Object.defineProperty而vue3则是利用Proxy。Proxy的性能和功能比Object.defineProperty强很多（这里的
【前端知识点总结】Vue3 (一) Vue3的新特性
热门推荐
jiang_ziY的博客
04-02 2万+
本章内容包含：1、vue3的新特性，2、Composition API，3、setup函数，4、reactive函数，5、ref函数，6、toRefs函数，7、计算属性computed函数
Vue3最新的14个常用API
lannieZ的博客
11-27 1526
（1）setup （2）ref setup 函数也是 Compsition API 的入口函数，我们的变量、方法都是在该函数里定义的 <template> <div> <p>{{ msg }}</p> <button @click="change">改变msg的值</button> </div> </template> <script> import { ref } from
vue3学习—API和数据响应式变化
xun__xing的博客
03-27 555
API和数据响应式变化一、API和数据响应式变化1、去掉了Vue构造函数2、组件实例中的API3、对比数据响应式 一、API和数据响应式变化 这里我们从两个问题来看vue3中APi和数据响应式的变化。 1、去掉了Vue构造函数 为什么vue3中去掉了vue构造函数？ 在vue2中，我们需要使用new Vue构造函数从而返回一个vue实例，实例就是我们vue控制的区域。（其实实例就是是一个复杂的vue组件） <!-- vue2 --> <div id="app1"></div&g
带你看懂vue3中最重要的API——ref和reactive
qq_42365082的博客
01-14 1万+
知识前景：假设你已了解vue3组合式API中，关于setup的知识。如果你刚开始学习，可以看看官方文档，或者我的这篇文章。 在vue3中，有两个重要的API——ref和reactive，这两个API你不懂其原理的话，可以说你没学好vue3。 但这两个API很难理解，已有vue2经验的我，整体过完vue3的文档后，感觉最难理解就是这两货，因为这个涉及到很多底层知识：JS的数据类型、内存栈、Object.defineProperty、ES6的Proxy ，那么今天，我就带你来啃这块难啃的骨头。 .
Vue 3新特性解析：Composition API与TypeScript增强
资源摘要信息:"Vue 3 是 Vue.js 的下一代版本，它带来了许多新特性和改进，旨在提高开发者的效率、提升应用的性能和减少打包体积。Vue 3 引入了一些重大更改，比如 Composition API、更好的 TypeScript 支持、以及更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

叮咚前端

你的鼓励是我们的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值