composition API（三）

最新推荐文章于 2023-04-22 13:55:03 发布
最新推荐文章于 2023-04-22 13:55:03 发布
阅读量65 收藏
点赞数
分类专栏： composition API 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_l_l_l_l_l_l_li/article/details/118251611
版权
前端 同时被 3 个专栏收录
9 篇文章 3 订阅
订阅专栏
vue
7 篇文章 0 订阅
订阅专栏
composition API
2 篇文章 0 订阅
订阅专栏

一、生命周期钩子

注意：生命周期可以注册多个

在这里插入图片描述

二、provide和inject

provide()有两个参数 第一个是传过去的key,第二个是传过去的值
inject()可以有两个参数 第一个是传过来的key,如果传来的没有值 第二个参数可以设置默认值

在这里插入图片描述

建议：传过去的值一般都用readonly()包裹 这样的话子孙组件就没办法修改这个值了

三、练习

1、计数器案例

在这里插入图片描述

笑别弯腰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
optionsAPI与compositionAPI
peanut
02-11 4810
1、区别 optionsAPI： vue2中使用的是optionsAPI，来定义一个组件内部的一些属性，如methods、data等等； 其缺点往往会在大项目中体现出来，比如一个简单的计数器功能，可能需要在methods内部书写一部分逻辑，在computed内部也书写一部分逻辑，那么问题来了：如果该组件内部有n个这样的小功能，那么此时代码逻辑是十分分散的，并且后期迭代维护面临的问题也是可能修改一个需求需要在不同的属性内部反复查找相关的代码，而compositionAPI的出现就是为了解决这一问题的。 co
Composition-API
她还会来吗的博客
09-08 3167
简介 Composition API简介：一组基于函数的附加API，能够灵活地组成组件逻辑，Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易 Options API和Composition-API的区别 Options API 在vue2中，
Composition API
Raccon_的博客
02-21 2421
Composition API Composition API也称为组合式API，实现代码的共享以及重用 Composition-api提供的函数 setup ref reactive watchEffect watch computed toRefs 生命周期hooks
Composition API 的优势
薛定谔的猫
04-22 287
使用传统OptionsAPI（配置性api）中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。看这张图，一个data中保存着n个功能的数据，那么methods中保存着n个功能的方法，看起来十分的乱。把所有数据，方法，计算属性按照功能点，进行打包，那么打出来的包就是一个hock函数。这张图告诉我们，我们在v2的时候功能放到配置中。它想告诉我们所有的功能都拆散了。我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。组合式api就解决了这个问题。
Composition API的优势
mantou_riji的博客
07-25 653
CompositionAPI(组合式API)是vue3的写法，通俗地理解组合式API就是在setup中对数据（data），方法（methods）等进行配置。vue2中使用的是OptionsAPI(配置式API)
Vuex+CompositionAPI
鸟人的博客
08-16 285
本章简单介绍下CompositionAPI如何使用Vuex，写法上和普通的有什么区别。
composition API
l_l_l_l_l_l_l_li的博客
06-23 612
一、composition API的基本使用 **为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方； 在Vue组件中，这个位置就是 setup函数。 setup其实就是组件的另外一个选项 只不过这个选项强大到我们可以用它来替代之前所编写的大部分其他选项 比如methods、computed、watch、data、生命周期等等** 1、setup函数的基本使用 setup函数的基本使用包括两部分：他的参数和返回值 注意：setup()函数中不能使用thi
Vue3 之 Composition API
玄鱼殇
10-08 6462
Vue3 之 Composition API
Composition API 使用
weixin_46351593的博客
07-05 6435
文章目录Composition API 常用部分1. setup2. ref3. reactive4. 比较Vue2与Vue3的响应式(重要)vue2的响应式vue3的响应式5. setup细节6. reactive和ref-的细节问题7. 计算属性与监视8. 声明周期对比vue2声明周期示图：vue3声明周期示图：9. 自定义hook函数10. toRefs11. ref获取元素Composition API 其他部分1. shallowReactive 与 shallowRef2. readonly 与
composition API和option API
weixin_44292241的博客
01-18 2951
Option API —— 又称选项API（vue2.x） 以vue为后缀的文件，通过定义methods，computed，watch，data等页面语法，共同处理页面逻辑 缺点： 1. 随着组件功能的增大，关联性大大降低，阅读难 2. 逻辑过多时this会出现指向不明等问题 3. 代码出错时，自动检测和类型检查是失效的，因为本身不是有效的js】代码 composition API —— 组合API（vue3.x） 根据逻辑功能来组织的，一个功能多定义的所有API会放在一起（高聚合、低耦合
composition-api:Vue 2的Composition API插件
03-11
import VueCompositionAPI from '@vue/composition-api' Vue . use ( VueCompositionAPI ) // use the APIs import { ref , reactive } from '@vue/composition-api' :light_bulb: 当您迁移到Vue 3时，只需将@vue...
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
Vue3 Composition API 替换 Vue Mixins 的原因与方法 Vue 2 中的 Mixins 是一种常见的代码复用机制，允许开发者将通用的功能抽取到一个单独的模块中，然后在多个组件中引用。然而，随着时间的推移，人们发现 Mixins...
vue3.0 composition API.docx
05-19
Vue3.0 Composition API Vue3.0 Composition API 是 Vue3.0 中的一种新的编程模式，它提供了一种更灵活、更高效的方式来编写 Vue 应用程序。在这个文档中，我们将详细介绍 Composition API 的各个方面，包括 Setup...
composition-api：Nuxt的Composition API挂钩
02-06
:building_construction_selector: Nuxt Composition API Nuxt的Composition API挂钩 @nuxtjs/composition-api提供了一种在特定于Nuxt的功能中使用Vue 3 Composition API的方法。 注意：主要目的是允许在最终发布...
vuex-composition-helpers:一个实用程序包，可轻松将Vuex与Composition API结合使用
05-06
Vuex合成助手 一个实用程序包，可轻松将Vuex与Composition API结合使用。安装$ npm install vuex-composition-helpers 默认情况下不转储该库。 您的项目应进行编译，从而使最终版本更小，更易摇晃。 看一下。 非打字...
一、webpack的全局安装和局部安装以及使用
l_l_l_l_l_l_l_li的博客
05-26 3979
1、webpack的使用前提 webpack的运行环境是依赖Node环境的，所以电脑上必须有node。安装node 14.15.5版本，npm 6.14.11版本 2、webpack和webpack-cli全局安装和使用 **方法：npm install webpack webpack-cli -g** 安装好之后就可以在终端运行webpack，当我们运行webpack的时候，webpack会找当前目录下的src/index.js作为入口，如果项目中没有这个文件夹那么就会报错。出口文件默认为dist文件夹
VUE ROUTER---路由
l_l_l_l_l_l_l_li的博客
07-06 948
一、认识和安装vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装vuerouter: npm install vue-router@4 细节：@4代表的是安装vuerouter4最新的版本 二、路由的使用步骤 三、路由的默认路径 四、router-link 通过.router-link-active这个类名可以给router-link这个内置组件样式
三、css-loader以及style-loader的使用
l_l_l_l_l_l_l_li的博客
07-12 772
1、什么是loader？ loader 可以用于对模块的源代码进行转换； 我们可以将css文件也看成是一个模块，我们是通过import来加载这个模块的； 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能； 2、css-loader和style-loader的安装 方法：npm install css-loader -D 安装css-loader 方法：npm install style-loader -D 安装style-loader 3、css
TypeScript
l_l_l_l_l_l_l_li的博客
07-21 703
一、邂逅TypeScript TS的编译环境 注意：默认情况下，所有的ts文件都是在同一个作用域下编写的，如果想把每一个ts文件当做一个单独的作用域的时候，可以使用export {},这样这个文件就是一个单独的作用域，当然，这只是其中的一种方式 npm install typescript -g 安装typescript之后自动就安装了tsc。 然后就可以通过tsc typescript.ts命令 把typescript.ts转成js代码 ts的运行环境 方式二：通过ts-
composition api
最新发布
07-27
Composition API是Vue.js的一项新功能，旨在通过将当前可用组件属性作为JavaScript函数暴露出来的机制来解决组件逻辑复用的问题。它被描述为一组基于功能的附加API，可以灵活地组合组件逻辑。使用Composition API编写的代码更易读，没有幕后的魔力，更容易阅读和学习。\[1\] 为了开始使用Composition API，我们需要在Vue组件中的setup函数中使用它。setup函数是一个可以实际使用Composition API的地方。\[2\] 另外，Mixin是Vue.js提供的一种非常灵活的方式，用于分发可复用功能到Vue组件中。一个Mixin对象可以包含任何组件选项，当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中。这使得我们可以在多个组件之间共享和重用代码逻辑。\[3\] 所以，Composition API和Mixin都是Vue.js中用于组件逻辑复用的机制，但它们的实现方式和使用方法略有不同。 #### 引用[.reference_title] - *1* *2* *3* [【Vue3.0+Ts】—— composition API（一）](https://blog.csdn.net/qq_53061847/article/details/125659863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值